Vercel का json-render - Generative UI framework
(json-render.dev)- AI यूज़र प्रॉम्प्ट लेकर JSON structure जनरेट करता है और उसे पहले से परिभाषित components के साथ render करने वाला एक generative UI framework
- प्रॉम्प्ट से dynamic और personalized UI जनरेट करते हुए भी, predefined component catalog के जरिए सुरक्षित और predictable output सुनिश्चित करता है
- Catalog में उपलब्ध components, actions, validation functions को परिभाषित करने पर AI उसी दायरे में केवल constrained JSON जनरेट करता है
- जनरेट किया गया JSON streaming तरीके से progressively render होता है, इसलिए model response आते ही UI तुरंत दिखने लगता है
- जनरेट किए गए UI को standalone React code (Next.js project) के रूप में export किया जा सकता है, और pure React code के रूप में deploy किया जा सकता है जो runtime dependency के बिना काम करे
- React और React Native दोनों में एक ही catalog और spec format के साथ rendering support, इसलिए web और mobile को एक ही definition से कवर किया जा सकता है
- उपलब्ध components
- Layout: Card, Grid, Stack, Tabs, Carousel, Collapsible, Accordion
- Input: Input, Textarea, Select, Checkbox, Radio, Switch, Slider, Toggle, ToggleGroup, Rating
- Display: Text, Heading, Image, Badge, Alert, Progress, Skeleton, Spinner, Table, Avatar, Separator
- Interaction: Button, ButtonGroup, Link, DropdownMenu, Dialog, Drawer, Popover, Tooltip, Pagination
- Charts: BarGraph, LineGraph
- हर component
{ $bindState }के जरिए two-way data binding को support करता है checksarray के साथrequired,email,minLengthजैसी validation rules को declaratively निर्दिष्ट किया जा सकता है- Event handlers को
on.press,on.change,on.select,on.submitआदि से bind किया जाता है
npm install @json-render/core @json-render/react
1 टिप्पणियां
कमाल है। लगता है कि अब प्लानिंग से शुरू होकर डिज़ाइन और पब्लिशिंग क्षेत्र के लिए भी यह एक अच्छा माध्यम बन सकता है।