Chris Tate's banner
Chris Tate's profile picture

Chris Tate

@ctatedev • 64,845 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

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

22,791 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

170,454 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,345 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

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

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

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

46,295 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

114,732 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

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

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

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,496 views

Introducing AI CLI Generate images, video, and text from your terminal. Pipe them together. Works with any agent. ai image "sunset" | ai video "animate" → Hundreds of models → Multi-model comparison → Inline previews, no native deps → AI SDK + AI Gateway

Introducing AI CLI Generate images, video, and text from your terminal. Pipe them together. Works with any agent. ai image "sunset" | ai video "animate" → Hundreds of models → Multi-model comparison → Inline previews, no native deps → AI SDK + AI Gateway

61,522 views

New: @𝚓𝚜𝚘𝚗-𝚛𝚎𝚗𝚍𝚎𝚛/𝚍𝚒𝚛𝚎𝚌𝚝𝚒𝚟𝚎𝚜 Ready-made directives for Generative UI → $format - currencies, dates, percentages via Intl → $t - i18n with key interpolation → $math - arithmetic at render time → $pluralize, $concat, $join, $count Import the ones you need

New: @𝚓𝚜𝚘𝚗-𝚛𝚎𝚗𝚍𝚎𝚛/𝚍𝚒𝚛𝚎𝚌𝚝𝚒𝚟𝚎𝚜 Ready-made directives for Generative UI → $format - currencies, dates, percentages via Intl → $t - i18n with key interpolation → $math - arithmetic at render time → $pluralize, $concat, $join, $count Import the ones you need

58,136 views

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

84,473 views

Now Available: agent-browser v0.7 𝚗𝚙𝚡 𝚊𝚐𝚎𝚗𝚝-𝚋𝚛𝚘𝚠𝚜𝚎𝚛 New: - Cloud providers (Browserbase, Browser Use) - Persistent profiles (--profile) - Remote CDP WebSocket URLs - Download commands - Launch config (--args, --user-agent, --proxy-bypass) - Enhanced Claude Code skills Fixes: - Screenshot refs support - WebSocket URLs in connect - Socket file location - Windows binary path - Output messages Docs: - Claude Code marketplace plugin - Skills references & templates - Error docs

Now Available: agent-browser v0.7 𝚗𝚙𝚡 𝚊𝚐𝚎𝚗𝚝-𝚋𝚛𝚘𝚠𝚜𝚎𝚛 New: - Cloud providers (Browserbase, Browser Use) - Persistent profiles (--profile) - Remote CDP WebSocket URLs - Download commands - Launch config (--args, --user-agent, --proxy-bypass) - Enhanced Claude Code skills Fixes: - Screenshot refs support - WebSocket URLs in connect - Socket file location - Windows binary path - Output messages Docs: - Claude Code marketplace plugin - Skills references & templates - Error docs

70,995 views

New proposal: Markdown Experience Guidelines A spec for how interfaces should present Markdown Virtual pages, navigation, search, theming Any .md file, zero changes Reference implementation below Would love your input

New proposal: Markdown Experience Guidelines A spec for how interfaces should present Markdown Virtual pages, navigation, search, theming Any .md file, zero changes Reference implementation below Would love your input

36,899 views

Videos

LIVE
1.2k

Anya Rossi

sweetdream.ai

SweetDream.aiSponsored•Livecam
Streaming Now

Watch Anya Live

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

HD live stream
Exclusive private shows
1.2k viewers online

Free preview available • Premium content

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. 𝚗𝚙𝚖 𝚒 @𝚓𝚜𝚘𝚗-𝚛𝚎𝚗𝚍𝚎𝚛/𝚛𝚎𝚗𝚍𝚎𝚛-𝚓𝚜𝚘𝚗
0:21
ctatedev's profile picture

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. 𝚗𝚙𝚖 𝚒 @𝚓𝚜𝚘𝚗-𝚛𝚎𝚗𝚍𝚎𝚛/𝚛𝚎𝚗𝚍𝚎𝚛-𝚓𝚜𝚘𝚗

Chris Tate

194,221 views • 5 months ago

We got on-demand asset creation for your vibe-coded, web-based three.js Sims game before GTA 6
0:27
ctatedev's profile picture

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

Chris Tate

589,628 views • 1 year 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.
0:26
ctatedev's profile picture

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.

Chris Tate

207,892 views • 6 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.
0:23
ctatedev's profile picture

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.

Chris Tate

136,079 views • 4 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
0:47
ctatedev's profile picture

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

Chris Tate

168,005 views • 6 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
0:44
ctatedev's profile picture

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

Chris Tate

142,722 views • 5 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.
0:20
ctatedev's profile picture

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.

Chris Tate

42,172 views • 1 month ago

Imagination is all you need
0:45
ctatedev's profile picture

Imagination is all you need

Chris Tate

149,817 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
0:34
ctatedev's profile picture

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

Chris Tate

52,321 views • 6 months ago

Vibecoders— Rodin is now *free* to use for #vibejam API key: vibecoding 🤯 Fork this example to get started ↓
0:28
ctatedev's profile picture

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

Chris Tate

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.
0:21
ctatedev's profile picture

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.

Chris Tate

39,146 views • 8 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
0:05
ctatedev's profile picture

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

Chris Tate

42,558 views • 1 year ago

Let's cook together
8:48
ctatedev's profile picture

Let's cook together

Chris Tate

21,620 views • 1 year ago

No more content to load