Chris Tate's banner

Chris Tate

@ctatedev • 63,165 subscribers

@Vercel Labs | Created https://t.co/473Fqx4HKt, https://t.co/ZekOfFeoXF, https://t.co/itpYrocV3p, https://t.co/9MKvOdyxN3 | Husband & Dad | He/him | Musician, Space Nerd, Foodie | Vegan

Shorts

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

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

1,343,689 views

Made a CLI version with TS + scriptc → 197 KB → 7 ms to first frame → 2.9 MB peak memory

Made a CLI version with TS + scriptc → 197 KB → 7 ms to first frame → 2.9 MB peak memory

65,095 views

New: @𝚓𝚜𝚘𝚗-𝚛𝚎𝚗𝚍𝚎𝚛/𝚝𝚊𝚗𝚜𝚝𝚊𝚌𝚔-𝚜𝚝𝚊𝚛𝚝 TanStack Start apps from JSON specs Define your components and data loaders AI composes pages and layouts, with routing and SSR For website builders, CMS-driven sites and customer portals with customizable pages

New: @𝚓𝚜𝚘𝚗-𝚛𝚎𝚗𝚍𝚎𝚛/𝚝𝚊𝚗𝚜𝚝𝚊𝚌𝚔-𝚜𝚝𝚊𝚛𝚝 TanStack Start apps from JSON specs Define your components and data loaders AI composes pages and layouts, with routing and SSR For website builders, CMS-driven sites and customer portals with customizable pages

26,082 views

Introducing <terminal /> A built-in component for Native SDK → Real shell on a PTY → Powered by libghostty-vt → Selection, scrollback + truecolor → Record sessions, replay them offline Give your software factory or agent orchestrator a terminal

Introducing <terminal /> A built-in component for Native SDK → Real shell on a PTY → Powered by libghostty-vt → Selection, scrollback + truecolor → Record sessions, replay them offline Give your software factory or agent orchestrator a terminal

131,840 views

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

171,026 views

Introducing WebMCP + agent-browser The web is becoming agent-native 𝚊𝚐𝚎𝚗𝚝-𝚋𝚛𝚘𝚠𝚜𝚎𝚛 𝚠𝚎𝚋𝚖𝚌𝚙 <𝚕𝚒𝚜𝚝|𝚒𝚗𝚟𝚘𝚔𝚎> → Discover & call tools → For missing tools, falls back to browser automation

Introducing WebMCP + agent-browser The web is becoming agent-native 𝚊𝚐𝚎𝚗𝚝-𝚋𝚛𝚘𝚠𝚜𝚎𝚛 𝚠𝚎𝚋𝚖𝚌𝚙 <𝚕𝚒𝚜𝚝|𝚒𝚗𝚟𝚘𝚔𝚎> → Discover & call tools → For missing tools, falls back to browser automation

64,666 views

New: agent-browser Contact Sheets Agents can now debug UI bugs they couldn't see before Record an interaction → get timestamped frames w/ changes highlighted This signature appears then disappears Instead of having identical before/after screenshots, agents see what happened

New: agent-browser Contact Sheets Agents can now debug UI bugs they couldn't see before Record an interaction → get timestamped frames w/ changes highlighted This signature appears then disappears Instead of having identical before/after screenshots, agents see what happened

33,705 views

Introducing wterm (“dub-term”) A terminal emulator for the web → DOM rendering — not canvas → Select text, copy/paste, ⌘+F, a11y → Dirty-row tracking, 24-bit color, themes → WebSocket transport with reconnection → Zig core compiled to ~12 KB WASM → just-bash, local, SSH

Introducing wterm (“dub-term”) A terminal emulator for the web → DOM rendering — not canvas → Select text, copy/paste, ⌘+F, a11y → Dirty-row tracking, 24-bit color, themes → WebSocket transport with reconnection → Zig core compiled to ~12 KB WASM → just-bash, local, SSH

191,707 views

agent-browser, now more human --cursor Visible pointers and click feedback --human Smooth, curved mouse movement / drags For demos, bug repros, reviewing agent runs

agent-browser, now more human --cursor Visible pointers and click feedback --human Smooth, curved mouse movement / drags For demos, bug repros, reviewing agent runs

34,771 views

json-render now supports YAML as a wire format JSONL needs a full element before rendering YAML is valid at every prefix, going from element-level to property-level 💨 YAML looks like source code to LLMs And we use 3 standards they know: JSON Patch, Merge Patch, Unified diff

json-render now supports YAML as a wire format JSONL needs a full element before rendering YAML is valid at every prefix, going from element-level to property-level 💨 YAML looks like source code to LLMs And we use 3 standards they know: JSON Patch, Merge Patch, Unified diff

190,816 views

Introducing Generative UI for MCP Apps One server. Infinite interfaces. Instead of building views, define a component catalog. The AI assembles the right UI based on your API, CLI or MCP server tools. Works in Claude, ChatGPT, VS Code, Cursor and more

Introducing Generative UI for MCP Apps One server. Infinite interfaces. Instead of building views, define a component catalog. The AI assembles the right UI based on your API, CLI or MCP server tools. Works in Claude, ChatGPT, VS Code, Cursor and more

165,297 views

Introducing visual-json > JSON editing with human-first ergonomics – Minimalist – Embeddable – Schema-aware – Extensible – Drag and drop – Keyboard navigation – Tree view to drill into deeply nested data

Introducing visual-json > JSON editing with human-first ergonomics – Minimalist – Embeddable – Schema-aware – Extensible – Drag and drop – Keyboard navigation – Tree view to drill into deeply nested data

168,558 views

the fly brain has browser access now 166,700 simulated neurons connected to agent-browser

the fly brain has browser access now 166,700 simulated neurons connected to agent-browser

31,770 views

Introducing agent-browser chat agent-browser is now a browser agent. → One-shot: agent-browser chat "open google, search for dogs" → Interactive: agent-browser chat → Built-in AI chat in the dashboard → Execute any agent-browser command → Use agent-browser as a sub-agent

Introducing agent-browser chat agent-browser is now a browser agent. → One-shot: agent-browser chat "open google, search for dogs" → Interactive: agent-browser chat → Built-in AI chat in the dashboard → Execute any agent-browser command → Use agent-browser as a sub-agent

119,125 views

Introducing <𝚌𝚘𝚍𝚎 /> A built-in component for Native SDK Anywhere you need to render code: chat, editors, PR reviews Example is 5.7mb, no webviews → 25 languages → Read-only or editable → Line numbers, wrap + scroll → Selection, clipboard + undo/redo

Introducing <𝚌𝚘𝚍𝚎 /> A built-in component for Native SDK Anywhere you need to render code: chat, editors, PR reviews Example is 5.7mb, no webviews → 25 languages → Read-only or editable → Line numbers, wrap + scroll → Selection, clipboard + undo/redo

52,475 views

agent-browser + Lightpanda + batch + multi-session is a dangerous combo Completed this benchmark task in 5.85s

agent-browser + Lightpanda + batch + multi-session is a dangerous combo Completed this benchmark task in 5.85s

87,260 views

iOS support just landed in agent-browser, the browser automation CLI for agents 𝚊𝚐𝚎𝚗𝚝-𝚋𝚛𝚘𝚠𝚜𝚎𝚛 -𝚙 𝚒𝚘𝚜 𝚘𝚙𝚎𝚗 <𝚞𝚛𝚕> Available starting in v0.9

iOS support just landed in agent-browser, the browser automation CLI for agents 𝚊𝚐𝚎𝚗𝚝-𝚋𝚛𝚘𝚠𝚜𝚎𝚛 -𝚙 𝚒𝚘𝚜 𝚘𝚙𝚎𝚗 <𝚞𝚛𝚕> Available starting in v0.9

111,355 views

Now available: eve + agent-browser ① Build an agent with ② Give it a browser Fill out forms, test websites, collect data, automate work 𝚗𝚙𝚖 𝚒𝚗𝚜𝚝𝚊𝚕𝚕 @𝚊𝚐𝚎𝚗𝚝-𝚋𝚛𝚘𝚠𝚜𝚎𝚛/𝚎𝚟𝚎

Now available: eve + agent-browser ① Build an agent with ② Give it a browser Fill out forms, test websites, collect data, automate work 𝚗𝚙𝚖 𝚒𝚗𝚜𝚝𝚊𝚕𝚕 @𝚊𝚐𝚎𝚗𝚝-𝚋𝚛𝚘𝚠𝚜𝚎𝚛/𝚎𝚟𝚎

46,933 views

New Skill: Email Emulation Test magic links, verification codes w/o sending real emails → Send via the Resend SDK → Retrieve emails from a local inbox → Extract codes to complete auth flows → One env var to reroute traffic npx skills add vercel-labs/emulate --skill resend

New Skill: Email Emulation Test magic links, verification codes w/o sending real emails → Send via the Resend SDK → Retrieve emails from a local inbox → Extract codes to complete auth flows → One env var to reroute traffic npx skills add vercel-labs/emulate --skill resend

84,566 views

New: @𝚓𝚜𝚘𝚗-𝚛𝚎𝚗𝚍𝚎𝚛/𝚗𝚎𝚡𝚝 Prompt → JSON → Full Next.js app Routes, layouts, SSR, metadata, data loaders, static generation. For AI website builders. Internal tool generators. CMS-driven apps. White-label SaaS. One JSON spec, entire multi-page app.

New: @𝚓𝚜𝚘𝚗-𝚛𝚎𝚗𝚍𝚎𝚛/𝚗𝚎𝚡𝚝 Prompt → JSON → Full Next.js app Routes, layouts, SSR, metadata, data loaders, static generation. For AI website builders. Internal tool generators. CMS-driven apps. White-label SaaS. One JSON spec, entire multi-page app.

86,692 views

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

We got on-demand asset creation for your vibe-coded, web-based three.js Sims game before GTA 6

We got on-demand asset creation for your vibe-coded, web-based three.js Sims game before GTA 6

589,628 views • 1 year ago

Introducing render-json The Generative JSON framework. 1. Point it at anything 2. It generates JSON 3. That's it Apps, games, and more. If it exists, it can be converted into a JSON spec. 𝚗𝚙𝚖 𝚒 @𝚓𝚜𝚘𝚗-𝚛𝚎𝚗𝚍𝚎𝚛/𝚛𝚎𝚗𝚍𝚎𝚛-𝚓𝚜𝚘𝚗

Introducing render-json The Generative JSON framework. 1. Point it at anything 2. It generates JSON 3. That's it Apps, games, and more. If it exists, it can be converted into a JSON spec. 𝚗𝚙𝚖 𝚒 @𝚓𝚜𝚘𝚗-𝚛𝚎𝚗𝚍𝚎𝚛/𝚛𝚎𝚗𝚍𝚎𝚛-𝚓𝚜𝚘𝚗

194,221 views • 6 months ago

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.

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 views • 8 months ago

GPT-5.5 literally changes the game I've tried making this work with so many other models and never got this far. One prompt in, the physics worked. The animations worked. GPT-image-2 generated the backgrounds. A few lazy follow-ups later, Mochipuff was born.

GPT-5.5 literally changes the game I've tried making this work with so many other models and never got this far. One prompt in, the physics worked. The animations worked. GPT-image-2 generated the backgrounds. A few lazy follow-ups later, Mochipuff was born.

136,079 views • 5 months ago

One more thing. json-render has entered the chat Your AI can now respond with text, fully rendered UI, and interactive 3D scenes

One more thing. json-render has entered the chat Your AI can now respond with text, fully rendered UI, and interactive 3D scenes

168,005 views • 8 months ago

Auto-discover and connect to your running Chrome with agent-browser agent-browser --auto-connect open <url> Or via environment variable: AGENT_BROWSER_AUTO_CONNECT=1

Auto-discover and connect to your running Chrome with agent-browser agent-browser --auto-connect open <url> Or via environment variable: AGENT_BROWSER_AUTO_CONNECT=1

142,722 views • 7 months ago

Native SDK now ships 40+ built-in components → inputs, trees, charts, dialogs → every design token themeable → eject one to make it your own → a11y + keyboard nav No webview. No DOM. Just markup + TypeScript.

Native SDK now ships 40+ built-in components → inputs, trees, charts, dialogs → every design token themeable → eject one to make it your own → a11y + keyboard nav No webview. No DOM. Just markup + TypeScript.

42,425 views • 3 months ago

Imagination is all you need

Imagination is all you need

149,946 views • 1 year ago

Weekend project: webreel Record scripted videos that never go stale → Define clicks, keystrokes, drags in JSON → Human-like cursor animation → Keystroke HUD + sound effects → MP4 / GIF / WebM → Headless, CI-ready, framework agnostic → Re-record on every deploy

Weekend project: webreel Record scripted videos that never go stale → Define clicks, keystrokes, drags in JSON → Human-like cursor animation → Keystroke HUD + sound effects → MP4 / GIF / WebM → Headless, CI-ready, framework agnostic → Re-record on every deploy

52,321 views • 7 months ago

Vibecoders— Rodin is now *free* to use for #vibejam API key: vibecoding 🤯 Fork this example to get started ↓

Vibecoders— Rodin is now free to use for #vibejam API key: vibecoding 🤯 Fork this example to get started ↓

88,772 views • 1 year ago

My 2025 year-end project: Solving Agents After weeks of stress testing agents, I landed on what a top-tier e2e agent actually looks like: Fast, Durable, Resumable, Secure Benchmarked. Battle-tested. Shipping the best patterns as reusable templates, packages and other OSS soon.

My 2025 year-end project: Solving Agents After weeks of stress testing agents, I landed on what a top-tier e2e agent actually looks like: Fast, Durable, Resumable, Secure Benchmarked. Battle-tested. Shipping the best patterns as reusable templates, packages and other OSS soon.

39,146 views • 9 months ago

While building SEV0, I ran into moments where natural language prompting just wasn't enough - too vague, too indirect. So I started using a method that bridges that gap. I call it Bridged Prompting - a technique where you temporarily step out of the prompt-response loop to manipulate something directly using an AI-generated UI, then step back in. Think of it like GenUI, but more user-driven and transient. AI generates a UI on-the-fly, tailored to your prompt, and lets you manipulate the artifact directly before resuming the conversation. Sure, you could build a full tool, switch tabs, wire it up and round-trip your data. But with Bridged Prompting, the AI just spins up a temporary interface right in the flow. In the video below, I used it to construct the hallway system to closely match the layout of the severed floor. This is something I needed to do for this one project, this one time - I didn't need to make a whole separate app. Bridged Prompting lets you: - Make precise edits visually or structurally - "Hit save" to persist changes to local storage or a backend - Return to your natural language prompt

While building SEV0, I ran into moments where natural language prompting just wasn't enough - too vague, too indirect. So I started using a method that bridges that gap. I call it Bridged Prompting - a technique where you temporarily step out of the prompt-response loop to manipulate something directly using an AI-generated UI, then step back in. Think of it like GenUI, but more user-driven and transient. AI generates a UI on-the-fly, tailored to your prompt, and lets you manipulate the artifact directly before resuming the conversation. Sure, you could build a full tool, switch tabs, wire it up and round-trip your data. But with Bridged Prompting, the AI just spins up a temporary interface right in the flow. In the video below, I used it to construct the hallway system to closely match the layout of the severed floor. This is something I needed to do for this one project, this one time - I didn't need to make a whole separate app. Bridged Prompting lets you: - Make precise edits visually or structurally - "Hit save" to persist changes to local storage or a backend - Return to your natural language prompt

42,558 views • 1 year ago

No more content to load