正在加载视频...

视频加载失败

Introducing json-render × React Native Another step toward UGI (User-Generated Interfaces), powered by Generative UI. Dynamic, personalized UIs per user without sacrificing reliability. Predefined components and actions for safe, predictable output.

208,082 次观看 • 8 个月前 •via X (Twitter)

38 条评论

Chris Tate 的头像
Chris Tate8 个月前

More examples here:

Stern - uɹǝʇS 的头像
Stern - uɹǝʇS8 个月前

We back baby…

Chris Tate 的头像
Chris Tate8 个月前

So back

Yousef Rol 的头像
Yousef Rol8 个月前

hey i have been testing json render on the website and this happened, will it happen inside my webapp aswell ? and great work, will use it to make users fill forms mid-chat, this is extremely helpful, especially if we added upload button for example, that uses the original upload button component so its an alias, or an alias of a hidden component to handle file uploads or more. this is extremely great product, keep it up!

Chris Tate 的头像
Chris Tate8 个月前

Thanks - this was very helpful Just deployed a fix

Yousef Rol 的头像
Yousef Rol8 个月前

great!

rj 的头像
rj8 个月前

Self generating UIs will never take off because nobody want to use a different app every time they open it or want to make a change.

Avid 的头像
Avid8 个月前

Chris I love the stuff you been shipping fam recently super handy a W overall

🧞‍♂️Martin Donadieu - oss/acc 的头像
🧞‍♂️Martin Donadieu - oss/acc8 个月前

@NoCodeProCode apparently they recode the wheel themself without issue 😂 Go for it !

A. 的头像
A.8 个月前

any plans to add Vue support?

Chris Tate 的头像
Chris Tate8 个月前

Yes

Gregor 的头像
Gregor8 个月前

Building my app I've seen how hard it is to balance customizability with reliability, sounds like json-render could help solve that.

Sidi jeddou 的头像
Sidi jeddou8 个月前

Wow, this is amazing 🔥

Carlos Ziegler 的头像
Carlos Ziegler8 个月前

Amazing!!!!!!!!!!!!!!! Will test it!! Thanks 🤩

Alan Lam 🔥 的头像
Alan Lam 🔥8 个月前

i build similar things before, but your solutions much better in long term

Pietro Montaldo 的头像
Pietro Montaldo8 个月前

UGI is getting real with this

Afuh Flynn 的头像
Afuh Flynn8 个月前

This is amazing

Shawn Khodai 的头像
Shawn Khodai8 个月前

woah this is really cool

toni 的头像
toni8 个月前

UGI is a cool concept but the hard part isn't rendering dynamic UI, it's keeping state consistent when every user sees something different. That's where most generative UI projects quietly break down.

Tom Beckenham 的头像
Tom Beckenham8 个月前

I'm loving json-render. Keep it up!

Meer Habib 的头像
Meer Habib8 个月前

Man! This is cool af

Shreyans Bhansali 的头像
Shreyans Bhansali8 个月前

generative UI turning everyone into a designer while i still fight flexbox

Abhishek Balija 的头像
Abhishek Balija8 个月前

I think users didn’t sign up to be devs.😅

Sadok 的头像
Sadok8 个月前

Generative ui is about to be a thing.

Alexander 的头像
Alexander8 个月前

why json if AI can server render React Native?

CatGod 的头像
CatGod8 个月前

Seeing json‑render merge with React Native feels like a quiet breakthrough for personalized app experiences. CLI would be incredible.

Mufaro 的头像
Mufaro8 个月前

this is pointless though? someone still has to define how the UI is done.

Zoe Sterling 的头像
Zoe Sterling8 个月前

user-generated interfaces is just "letting the intern deploy to prod" but with extra steps and a better rebrand

Washington Sanchez 🦇🔊 的头像
Washington Sanchez 🦇🔊8 个月前

Reminds of Jasonette back in the day, good memories

Senior CRUD Monkey 的头像
Senior CRUD Monkey8 个月前

Beware this doesn't work nor scale well for deeply nested trees of hierarchical views.

Kevin Nexus 的头像
Kevin Nexus8 个月前

Personalized interfaces without fragility is huge.

Meni Koppenhol 的头像
Meni Koppenhol8 个月前

@elonmusk the future of user generated interfaces/pixels is here

Bonk 的头像
Bonk8 个月前

Love the idea but one question. If i want to customise each component, wouldn't that be same as writing regular typescript interfaces?

troneras 的头像
troneras8 个月前

This has a singularity vibe. If UI is generated per intent, whats the point of having multiple apps?

Dod✞ 的头像
Dod✞8 个月前

0x0e2d0ec2f55d25bd9dfaee1fbd90896b2f356b07

Lukas 的头像
Lukas8 个月前

this is super cool, hadn't even heard of the initial concept curious how much better this will be as models improve and get faster

Nadeem Siddique 的头像
Nadeem Siddique8 个月前

I thought any team or product more than 3 years old eventually built a components library like this.

Joshua Johnson 的头像
Joshua Johnson8 个月前

Got a perfect project for this. 🚀

相关视频

Anthropic's most viral feature is now open-source! Until now, Anthropic's Generative UI capabilities only existed inside its own products. CopilotKit🪁 just shipped Open Generative UI, an open-source implementation of Claude Artifacts that works in any app. The agent generates HTML/SVG at runtime, and CopilotKit streams it token-by-token into a sandboxed iframe inside the app's chat. So the user can watch the UI assemble itself in real time, not after the full response is ready. The sandbox is fully isolated with no access to the parent app, the DOM, or user data. So if the agent hallucinates broken markup or unexpected JavaScript, nothing leaks outside the iframe. Under the hood, the agent does not select from pre-built components. Instead, it generates arbitrary visuals from scratch every time. The output is unconstrained by default, but you can shape it by defining prompt-based skills that teach the agent specific visual formats or guidelines. For instance, a skill prompt can guide the agent toward producing a Chart.js dashboard with proper axis labels and responsive sizing, or an interactive 3D model with rotation controls. The video below shows this in action, and the output quality you see actually comes from the skills layer. Open Generative UI runs on AG-UI, so it works out of the box with LangGraph, CrewAI, Mastra, Google ADK, AWS Strands, and more. It also ships with a standalone MCP server that plugs into Claude Code, Cursor, or any MCP-compatible client. And the entire stack is built on top of CopilotKit, the open-source frontend framework for agents and generative UI. 30k+ GitHub stars, with SDKs for React, Next.js, Angular, and Vue. I have shared the GitHub repo and a live playground in the replies!

Akshay 🚀

87,048 次观看 • 5 个月前

Build uncompromising high-performance, high-fidelity apps with React. What you see is not the Apple Messages app, nor is it meant to be 1:1. Rather it serves as an aspirational and real example of UI/UX that is possible. Every detail from the bubble animations to keyboard gestures to scroll view insets and safe areas to parallax timestamps required care and attention. Quality UIs come from caring hard. The little chat bubble tails that morph away when the next message animates in. Timestamps that scroll at a different rate than the bubbles. Peek gestures powered by UIKit that lift a chat bubble, tail and all, with a gentle haptic pulse. The subtle shadow of the text composer and responsively sliding down the keyboard in pixel-perfect concert. The composer shrinking its width to fit iPhone’s rounded bezel. The beautiful Liquid Glass refractions have the level of glassiness chosen by the user (new in iOS 27). Scroll view insets that adjust to fit the home bar and keyboard dynamically, creating a sense of depth as the chat bubbles are slightly visible as they scroll under the keyboard. Keeping the keyboard on screen if the prior screen already presented it. Sliding the keyboard and composer with the screen when the user drags to navigate back. I am excited to explore using the new iPhone Duo view controllers natively with React when the time comes. There is always room for innovation and improvement. This chat demo runs at 120 FPS on iOS 27 even on my phone that’s four versions old now. There are several approaches to high-performance lists. I explored a new Expo scroll view that uses the native gesture systems along with react-native’s VirtualView (codenamed “Fling” to reflect the speed of flinging a scroll view), which Meta’s React team designed to prioritize scroll momentum with React’s scheduler. There are tradeoffs with other scroll strategies for how the scroll views gracefully degrade, and they can be swapped out based on what’s best for your app’s use case. And, by virtue of using modern React, high-priority events like user gestures can preempt lower-priority ones like a network response. Let us dispel any myth that using React requires compromising on beautiful, smooth, user-friendly UI/UX that Uses the Platform. Let us dispel any myth frame-perfect UI coordination is not achievable. The Hermes thread and the UI thread can coordinate when needed, like for controlled text inputs. Let us dispel any myth that React Native’s performance is impacted by a bridge, let alone has a bridge. Bridgeless JSI and the Fabric renderer are here for apps that use the New Architecture. What about Android? The app runs and I’ll share a screenshot from my cloud agent’s emulator. With some attention to detail dedicated to Android I’m confident crafted UX is attainable. I’ve spent my tokens once and have a structural head start everywhere. One more thing! Most of this chat’s application code is written with , , , and other familiar elements. The styling is mostly CSS, including linear-gradient(), background-attachment: fixed, and semantic platform colors that adapt to dark mode. Not just appearance - CSS Animations and CSS Transitions run entirely natively. There are a handful of custom native components written in Swift and Kotlin, like the chat bubbles and a custom CAShapeLayer and UIBezierPath for the tails. Native coding is a first-class feature. The way to think about building beautiful apps this way is React and Native, not React vs. Native. Aspire high and raise your ambitions for what is possible!

James Ide

140,825 次观看 • 1 个月前

AG-UI makes building agentic applications dramatically easier. Here's how it works. This is a model for a simple chatbot: User → LLM → Response But interactive agents that render UI, pause for approvals, and ask users for input need a much more complex model. When building these agents, a response from the LLM will include a series of state changes as the agent runs: • Agent started a task • Agent called a tool • Agent updated its state • Agent streams these tokens • Agent is waiting on a human • Agent is resuming the task The Agent-User Interaction Protocol (AG-UI) treats the LLM response as a stream of events rather than a text endpoint. In practice, here is what you get as an agent runs: 1. Lifecycle events so your UI knows where the agent is. 2. Text messages that stream tokens. 3. Tool calls so your UI can prefill a form with any required arguments. 4. State updates that keep your UI in sync with the agent. 5. Special events for human approvals, rich media, and custom needs. All of these events travel over standard transports (SSE, WebSockets, or plain HTTP) as JSON. As a result, you can build a frontend that stays in sync with the agent's progress without having to invent a custom process to make this happen. For example, building a human-in-the-loop workflow becomes an off-the-shelf component you can integrate rather than build from scratch. CopilotKit🪁 is the creator of AG-UI, and you can use it when building frontend applications pretty much anywhere: • React • Angular • Vue • React Native • Slack • Teams • Discord • WhatsApp • Telegram Here is the link for you to check it out: Thanks to the CopilotKit team for partnering with me on this post.

Santiago

17,438 次观看 • 3 个月前

AI instead of UI The last few years radically changed how we think about digital products & product design process in general. What we are witnessing right now is a transition where AI is no longer just a feature; it is becoming the infrastructure of interaction. For decades, UI design was rooted in the concept of “Happy Path,” a series of static, linear screens (routes from A to B) designed to funnel users toward a goal. This “one-size-fits-all” approach assumes that all users have the same mental model, which is far from the truth. The rise of AI tools like ChatGPT and Gemini is showing that we are moving into an era of Generative Interfaces. Instead of a designer pre-determining every button and menu, the interface is synthesized in real-time based on user actions. Back in 2019, Gleb Kuznetsov and I were working on the concept of morphing Interface, the idea of a UI that adapts its structure based on user intent. The great thing about this UI is that it was highly dynamic: different users saw different content/contextual actions based on their behavior. This concept was crazy in 2019, but it is highly relevant to the modern state of the product design process. And I strongly believe that it represents the future of UI design. We will move beyond the “AI chatbox" crutch Yes, many products today treat AI as a sidecar (think of Copilots or chatbots pinned to the side of a traditional dashboard), but this is a transitional phase. Why? Because adding a chat window to a 20-year-old software layout is like putting a jet engine on a horse-drawn carriage. That's why the future isn't "AI as an add-on"; it is AI as the Operating System. AI will power generative interfaces that are rooted in anticipatory design: UI won’t wait for a command; it will surface tools based on the user's current environmental context and historical behavior. This evolution changes the very nature of product design, and we will move away from designing pages/screens and toward designing systems of logic.

Nick Babich

54,034 次观看 • 8 个月前

Anthropic's in trouble, again! They spent years building what's now fully open-source. What made Claude feel different from a normal app is that the agent could act inside the interface instead of only talking in a chat box. For instance, Claude Artifacts let an agent render real UI, charts, dashboards, and interactive components that assemble live inside the response. Every major AI product tried to replicate it. But the problem was that unlike reasoning, planning, tool-calling, etc., none of it shipped natively with LangGraph, CrewAI, or Google ADK. So teams started building an owned version that required engineering the entire interface layer from scratch. Most teams, however, just settled for shipping the agent as a backend API in a chat box since rendering the UI is only one piece of it. To actually make it work, the interface layer also needed real-time streaming, state kept in sync between agent and UI, conversations that persist across sessions, and reconnection when a user refreshes mid-run. CopilotKit🪁 is now the only open-source framework that actually lets you build your own full-stack Claude-like apps. It decouples the agent from the interface, talking over AG-UI (an open protocol for agent-to-user communication). Being a standard protocol, the frontend never needs to know whether it is talking to a LangGraph or a CrewAI agent. You can change the backend anytime and the UI will never notice. In practice, CopilotKit's interface layer gives several pre-implemented React building blocks that wire the agent directly into the app, like: - generative UI, so the agent renders real components instead of text - chat windows, sidebars, and popups, or a fully headless setup - shared state, so the agent and app stay in sync - human-in-the-loop approvals, where the agent waits before acting - persistent threads that store the whole session, including the agent-user interactions and generated UI, not just text And because that full history is captured, those interactions can feed a self-learning layer that also improves the agent from real usage over time. The interface layer that Anthropic spent years engineering in-house is now literally available to any developer/team. CopilotKit is open-source with 30k+ GitHub stars, and AG-UI, the protocol underneath, is already supported across every major agent framework: LangGraph, CrewAI, Mastra, Google ADK, and more. CopilotKit GitHub repo → (don't forget to star it ⭐ ) If you want to go deeper, I found a detailed breakdown by Shubham Saboo recently on the three Generative UI patterns, with implementation. Read it below.

Avi Chawla

461,550 次观看 • 4 个月前

Introducing the Next PROOF Launch! Macro launches on the 14th October 🚀 If you're thinking Macro is just another privacy browser, think again. Macro is your gateway to a robust privacy ecosystem, where your data, connections, and digital identity stay yours, always. Built from the ground up for both Web2 + Web3 users, Macro reimagines browsing with native privacy, intelligence, and security. No plugins, no telemetry, no tracking. It’s DeGoogled, private by default, and powered by an AI-native engine that protects and empowers the user every step of the way. Main Features (All built in. No plugins required) - Privacy Profiles: Distinct identities for work, degen, and personal use, each with separate cookies, wallets, and permissions. - Signing Sandbox: Intercepts connect & sign requests with plain-English decoding and policy checks. Undrainable by design. - Mesh P2P VPN: Peer-to-peer, verifiable routes with no centralized chokepoints. - Tab-Aware AI: Reads context, flags risks, and suggests safe actions, all locally. - Built-in E2EE Comms: Encrypted calls, messaging, and private file sharing Macro is building the foundation for private, intelligent, and secure browsing, all onchain. The future of browsing starts here. ⏰ Launch Date: Tuesday 14th October, 1PM UTC 🪙 Ticker: $MACRO ⛓️ Chain: ETH 🔔 Launch Alerts: ✨ Incubated by PROOF 📝 Socials and Docs Website: X: Macro Telegram: Docs: More project details on the way as we lead up to launch day, stay tuned 🔥

PROOF

33,252 次观看 • 1 年前

Grok 4 prompt to generate the video's generative art: You are an expert P5.js developer with expertise in generative art, mathematics (vector fields, Perlin noise), and aesthetic design. Create a visually stunning, interactive particle flow field sketch that mimics ethereal, fluid dynamics with glowing trails and cosmic vibes. Key Features to Implement Exactly: Use P5.js via CDN (version 1.4.0). 1500 particles with random positions and sizes (1-4 pixels). Flow field via multi-layered Perlin noise: base noise + 0.5 * octave at 2x scale, using 3D noise with zOff incrementing by 0.002 per frame; noiseScale = 0.005. Particle physics: Vectors for pos, vel, acc; maxSpeed = 3; force mult 0.15. Dynamic colors: 5-color palette in HSV, baseHue = (frameCount * 0.1) % 360, each hue offset by 72 (pentadic), saturation 80, value 100, alpha 8; update in draw(). Interactivity: Mouse press attracts particles with normalized vector force, strength 0.05 * (1 / (dist + 1)). Aesthetics: Additive blendMode(ADD); noStroke; background fade fill(0,5) rect over canvas; variable sizes for depth. Utilities: Edge wrapping in Particle class; windowResized to resize canvas and reset background. Comments: Explain enhancements (time-based colors, mouse interaction, layered noise, trails), math (vector attraction, multi-octave noise). Step-by-Step Reasoning for Your Response: Analyze: Dissect user intent for aesthetics (glowing, dynamic, interactive) and math (noise layers, forces). Plan Code: setup() for init (canvas full window, particles, placeholders); draw() for fade, color update, zOff++, particle loop; Particle class with constructor, update (noise angle, force, mouse attract, physics), display, edges. Implement: Write modular, readable code with exact values; ensure performance. Verify: Mentally run: Particles flow smoothly, colors cycle, mouse pulls inversely, no errors on resize/edges. Enhance Output: Rate aesthetics/correctness (target 9.5/10); suggest tweaks (e.g., numParticles for perf). Output Structure: Full HTML with for P5.js code. Explanation: Brief on visuals/math/customizations/running.

tetsuo

44,518 次观看 • 10 个月前

The DMT ecosystem is on the cusp of producing yet again another major breakthrough This time ushered in by Superfan.fan and his HIRO’s project AI and DMT are two technology primitives that when combined can produce a new class of digital asset with “lifelike” properties that are generated through Bitcoin block data We discuss this in an interview with Superfan 👇 Introducing HIRO’s Bitcoin’s First Generative AI Killer App Powered By DMT | w/ SuperFan | TBR #224 Superfan is building a next-generation suite of tools that enables creators to use generative AI in their UNAT scripts. This will be showcased by the upcoming HIRO’s launch on 🅼🆂🅲🆁🅸₿🅴 August 15th. HIRO’s is a collection of 4,032 dynamic characters that are responsive to non-arbitrary data patterns that occur on Bitcoin. The HIRO asset itself is an impressive demonstration of the high-fidelity output behind the technology stack being utilized to generate them. We speak with Superfan to understand better the technology and the practical use cases moving forward as he will open source. Also, his thoughts on community building by utilizing AI and the superpower ability it can introduce in metaverse construction. 🚀Sign up to receive our Ordinal Takeover Newsletter for weekly updates! Disclaimer: The views and opinions expressed by The Block Runner are for informational purposes only and do not constitute financial, investment, or other advice.

ᴛʜᴇ ʙʟᴏᴄᴋ ʀᴜɴɴᴇʀ Podcast 🟧

14,538 次观看 • 2 年前