Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

New experiment: json-render + jev The future Generative UI is instant Your components, your actions, your design system Rendered in milliseconds

Chris Tate

67,831 subscribers

1,333,079 views • 10 days ago •via X (Twitter)

Arts Music Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Today, we're joining Google's release of A2UI v0.9 🎉 Declarative Generative UI with your own design system. Works with any AG-UI Agent. Your agents describes UI via JSON, your frontend renders it using your components catalog like lego building blocks UI is alive and dead. CLI for agents, Generative UI for humans. Try it out: npx copilotkit@latest create my-app --framework a2ui

Today, we're joining Google's release of A2UI v0.9 🎉 Declarative Generative UI with your own design system. Works with any AG-UI Agent. Your agents describes UI via JSON, your frontend renders it using your components catalog like lego building blocks UI is alive and dead. CLI for agents, Generative UI for humans. Try it out: npx copilotkit@latest create my-app --framework a2ui

Atai Barkai

71,895 views • 5 months ago

Generative UI for Svelte is here – JSON specs to native Svelte components – Runes-based reactivity – Type-safe component registries – Streaming UI generation – State, actions, visibility, validation providers npx skills add vercel-labs/json-render --skill svelte

Generative UI for Svelte is here – JSON specs to native Svelte components – Runes-based reactivity – Type-safe component registries – Streaming UI generation – State, actions, visibility, validation providers npx skills add vercel-labs/json-render --skill svelte

Chris Tate

28,583 views • 6 months ago

json-render can now render images You define a catalog. AI generates JSON constrained to that catalog. Output is an SVG or PNG. Same way json-render keeps AI within your design system for UI - now it does the same for OG images, marketing graphics, data visualizations

json-render can now render images You define a catalog. AI generates JSON constrained to that catalog. Output is an SVG or PNG. Same way json-render keeps AI within your design system for UI - now it does the same for OG images, marketing graphics, data visualizations

Chris Tate

84,473 views • 7 months ago

Generative UI agents can now render real shadcn/ui components. shadcn /ui support is now live in OpenUI.

Generative UI agents can now render real shadcn/ui components. shadcn /ui support is now live in OpenUI.

Rabi Shanker Guha

55,754 views • 6 months ago

Introducing Generative UI for Claude Code, Codex and Pi Charts, forms, 3D, anything Your agent renders real UI for users while it works in a sandbox Powered by AI SDK's experimental HarnessAgent + json-render

Introducing Generative UI for Claude Code, Codex and Pi Charts, forms, 3D, anything Your agent renders real UI for users while it works in a sandbox Powered by AI SDK's experimental HarnessAgent + json-render

Chris Tate

171,026 views • 3 months ago

AI tool that uses your design system to create new components (along with all of the code) 👇

AI tool that uses your design system to create new components (along with all of the code) 👇

Ridd 🤿

144,769 views • 2 years ago

Storybook MCP for React is here 🎉 Storybook MCP gives AI agents structured context from your components and design system to build better UI the first time. 🧵 ⤵

Storybook MCP for React is here 🎉 Storybook MCP gives AI agents structured context from your components and design system to build better UI the first time. 🧵 ⤵

Storybook

169,560 views • 6 months ago

new Figma plugin in Cursor!! it can inspect your design system, find the right components/variables/styles, then write directly to figma as editable layers

new Figma plugin in Cursor!! it can inspect your design system, find the right components/variables/styles, then write directly to figma as editable layers

edwin

45,069 views • 6 months ago

Progress update: The new Vercel AI SDK v5 is so cool! The AI can now generate and render UI components directly in the chat!

Progress update: The new Vercel AI SDK v5 is so cool! The AI can now generate and render UI components directly in the chat!

Hugo

41,528 views • 1 year ago

Design System Checklist Open-source checklist that will help you plan, build and grow your design system. It covers design language, tokens, core components, and maintenance (support and documentation).

Design System Checklist Open-source checklist that will help you plan, build and grow your design system. It covers design language, tokens, core components, and maintenance (support and documentation).

Nick Babich

52,116 views • 2 years ago

new skill: improve-ui built to audit interfaces against their own design language, inspired by shadcn's improve skill. it reads your repo's design context: DESIGN.md, CSS, shared components, etc. then finds where the UI breaks its own rules and writes a plan to fix it

new skill: improve-ui built to audit interfaces against their own design language, inspired by shadcn's improve skill. it reads your repo's design context: DESIGN.md, CSS, shared components, etc. then finds where the UI breaks its own rules and writes a plan to fix it

Ibelick

103,374 views • 2 months ago

Jev by TypeSafe AI is now on OpenRouter, in beta. Jev is a System One model. Instead of generating text, it takes your app's state plus a typed question and returns a typed decision with a probability attached. There is no JSON prompting, parsing layer, and nothing to validate against.

Jev by TypeSafe AI is now on OpenRouter, in beta. Jev is a System One model. Instead of generating text, it takes your app's state plus a typed question and returns a typed decision with a probability attached. There is no JSON prompting, parsing layer, and nothing to validate against.

OpenRouter

565,340 views • 11 days ago

Now in Clerk: 𝚎𝚕𝚎𝚟𝚊𝚝𝚒𝚘𝚗: '𝚏𝚕𝚞𝚜𝚑' Render components without the default card wrapper, so they blend right into your app.

Now in Clerk: 𝚎𝚕𝚎𝚟𝚊𝚝𝚒𝚘𝚗: '𝚏𝚕𝚞𝚜𝚑' Render components without the default card wrapper, so they blend right into your app.

Clerk

18,120 views • 4 months ago

The best UI components ready to use, save this 👇 - free animated component library - Animated thinking orb component - essential transitions for web apps - crafted UI for AI-native interfaces. - huge community library - The React component library - patterns from 95 design systems - Annotate your UI. Guide your coding agent What Did I Miss?

The best UI components ready to use, save this 👇 - free animated component library - Animated thinking orb component - essential transitions for web apps - crafted UI for AI-native interfaces. - huge community library - The React component library - patterns from 95 design systems - Annotate your UI. Guide your coding agent What Did I Miss?

Nero

95,343 views • 1 month ago

Introducing support for Design Systems in Bolt Now Bolt uses your actual design system components, not some mimic Here’s how to stop building from scratch and start building on-brand: 👇

bolt.new

66,945 views • 1 year ago

Say goodbye to custom web design. In the next 5 years, browsers won't render *your* interface. They'll construct *their own* interface for your content.

Say goodbye to custom web design. In the next 5 years, browsers won't render your interface. They'll construct their own interface for your content.

Patrick Morgan

53,378 views • 2 years ago

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)

📐Design Systems and DESIGN.md Consistency using Design Systems and DESIGN.md: ✨ Every new design automatically starts with a cohesive design system which GREATLY improves consistency (we heard you!) ✨ Edit the system, and all associated screens can be easily updated ✨ You can extract a design system from any URL ✨ Use DESIGN.md to export your design rules or import your design rules from other products (just ask your agent to create you a DESIGN.md file from your code or other context) ✨ You can start a new design by choosing from popular design systems ✨ Read more about DESIGN.md in the docs (link in thread)

Stitch by Google

219,386 views • 6 months ago

This is how you can instantly get the first projects for your UX/UI design portfolio! 🔥

This is how you can instantly get the first projects for your UX/UI design portfolio! 🔥

Jan Mraz

133,419 views • 3 years ago

Introducing Prefab 🎨 A generative UI framework for building MCP Apps, data dashboards, or whatever you (or your agent) want. In Python. (Really.) 100+ shadcn components. Real React. No JavaScript required. And built right into FastMCP 3.2.

Introducing Prefab 🎨 A generative UI framework for building MCP Apps, data dashboards, or whatever you (or your agent) want. In Python. (Really.) 100+ shadcn components. Real React. No JavaScript required. And built right into FastMCP 3.2.

Jeremiah Lowin

10,273 views • 5 months ago