fix homepage

Fixes a React runtime error where `useRef` was null due to multiple React instances being bundled.

## Changes Made

- **Vite configuration**: Added `resolve.dedupe` for `react` and `react-dom` in `examples/mcp/vite.config.ts` to ensure only one instance of React is used during bundling
- **React version constraints**: Changed from exact versions (`19.2.3`) to flexible ranges (`^19.0.0`) in `examples/mcp/package.json` to improve compatibility
- **Build entry point**: Added new `build-app-html-entry.ts` file and updated `tsup.config.ts` to include it as a build target
- **Package exports**: Added `./build-app-html` export path in `packages/mcp/package.json`
- **Minor fixes**: Updated Next.js type reference path in stripe-app example

The root cause was React being duplicated in the bundle, causing hooks like `useRef` to fail when components tried to access React's internal state from the wrong instance. The `dedupe` configuration ensures Vite resolves all React imports to the same module instance.

Fixes #190

.gitignore

@@ -4,6 +4,7 @@
 node_modules
 .pnp
 .pnp.js
+.pnpm-store/
 
 # Local env files
 .env*

AGENTS.md

@@ -98,7 +98,7 @@ When asked to prepare a release (e.g. "prepare v0.12.0"):
    - An API reference page at `apps/web/app/(main)/docs/api/<name>/page.mdx`
    - An entry in `apps/web/lib/page-titles.ts` and `apps/web/lib/docs-navigation.ts`
    - An entry in the docs-chat system prompt (`apps/web/app/api/docs-chat/route.ts`)
-   - A skill at `skills/json-render-<name>/SKILL.md`
+   - A skill at `skills/<name>/SKILL.md`
    - A `packages/<name>/README.md`
 6. **Run `pnpm type-check`** after all changes to verify nothing is broken
 

apps/web/app/(main)/docs/ai-sdk/page.mdx

@@ -3,7 +3,7 @@ export const metadata = pageMetadata("docs/ai-sdk")
 
 # AI SDK Integration
 
-Use json-render with the [Vercel AI SDK](https://sdk.vercel.ai) for seamless streaming. json-render supports two modes: **Generate** (standalone UI) and **Chat** (UI embedded in conversation). See [Generation Modes](/docs/generation-modes) for a detailed comparison.
+Use json-render with the [Vercel AI SDK](https://sdk.vercel.ai) for seamless streaming. json-render supports two modes: **Standalone** (standalone UI) and **Inline** (UI embedded in conversation). See [Generation Modes](/docs/generation-modes) for a detailed comparison.
 
 ## Installation
 
@@ -11,9 +11,9 @@ Use json-render with the [Vercel AI SDK](https://sdk.vercel.ai) for seamless str
 npm install ai @ai-sdk/react
 ```
 
-## Generate Mode
+## Standalone Mode
 
-In generate mode, the AI outputs only JSONL patches. The entire response is a UI spec with no prose. This is the default mode and is ideal for playgrounds, builders, and dashboard generators.
+In standalone mode, the AI outputs only JSONL patches. The entire response is a UI spec with no prose. This is the default mode and is ideal for playgrounds, builders, and dashboard generators.
 
 ### API Route
 
@@ -73,9 +73,9 @@ function GenerativeUI() {
 }
 ```
 
-## Chat Mode
+## Inline Mode
 
-In chat mode, the AI responds conversationally and includes JSONL patches inline. Text-only replies are allowed when no UI is needed. This is ideal for chatbots, copilots, and educational assistants.
+In inline mode, the AI responds conversationally and includes JSONL patches inline. Text-only replies are allowed when no UI is needed. This is ideal for chatbots, copilots, and educational assistants.
 
 ### API Route
 
@@ -96,7 +96,7 @@ export async function POST(req: Request) {
 
   const result = streamText({
     model: yourModel,
-    system: catalog.prompt({ mode: "chat" }),
+    system: catalog.prompt({ mode: "inline" }),
     messages,
   });
 
@@ -182,13 +182,13 @@ const systemPrompt = catalog.prompt({
 });
 ```
 
-### Chat Mode Prompt
+### Inline Mode Prompt
 
 ```typescript
-const chatPrompt = catalog.prompt({ mode: "chat" });
+const inlinePrompt = catalog.prompt({ mode: "inline" });
 ```
 
-In chat mode, the prompt instructs the AI to respond conversationally first, then include JSONL patches on their own lines when UI is needed. Text-only replies are allowed.
+In inline mode, the prompt instructs the AI to respond conversationally first, then include JSONL patches on their own lines when UI is needed. Text-only replies are allowed.
 
 ## Which Mode?
 
@@ -197,8 +197,8 @@ In chat mode, the prompt instructs the AI to respond conversationally first, the
     <thead>
       <tr>
         <th></th>
-        <th>Generate</th>
-        <th>Chat</th>
+        <th>Standalone</th>
+        <th>Inline</th>
       </tr>
     </thead>
     <tbody>
@@ -215,7 +215,7 @@ In chat mode, the prompt instructs the AI to respond conversationally first, the
       <tr>
         <td>System prompt</td>
         <td><code>catalog.prompt()</code></td>
-        <td><code>{"catalog.prompt({ mode: \"chat\" })"}</code></td>
+        <td><code>{"catalog.prompt({ mode: \"inline\" })"}</code></td>
       </tr>
       <tr>
         <td>Stream utility</td>

apps/web/app/(main)/docs/api/core/page.mdx

@@ -75,7 +75,7 @@ interface Catalog {
 interface PromptOptions {
   system?: string;           // Custom system message intro
   customRules?: string[];    // Additional rules to append
-  mode?: "generate" | "chat"; // Output mode (default: "generate")
+  mode?: "standalone" | "inline" | "generate" | "chat"; // Output mode (default: "standalone")
 }
 
 interface SpecValidationResult<T> {
@@ -370,7 +370,7 @@ Most users should use `pipeJsonRender()` instead, which wraps this transform for
 
 ### createMixedStreamParser
 
-Parse a mixed stream of text and JSONL patches (used for Chat + GenUI mode):
+Parse a mixed stream of text and JSONL patches (used for Inline mode):
 
 ```typescript
 import { createMixedStreamParser } from '@json-render/core';
@@ -389,7 +389,7 @@ parser.flush();
 
 ### pipeJsonRender
 
-Pipe an AI SDK `UIMessageStream` through the json-render transform. Lines that parse as JSONL patches are emitted as `data-spec` parts; everything else passes through as text. Used in Chat mode API routes.
+Pipe an AI SDK `UIMessageStream` through the json-render transform. Lines that parse as JSONL patches are emitted as `data-spec` parts; everything else passes through as text. Used in Inline mode API routes.
 
 ```typescript
 import { pipeJsonRender } from '@json-render/core';
@@ -403,7 +403,7 @@ const stream = createUIMessageStream({
 return createUIMessageStreamResponse({ stream });
 ```
 
-See [Generation Modes](/docs/generation-modes) for full Chat mode setup.
+See [Generation Modes](/docs/generation-modes) for full Inline mode setup.
 
 ### SpecStream Types
 

apps/web/app/(main)/docs/changelog/page.mdx

@@ -341,6 +341,8 @@ February 2026
 
 ### New: Chat Mode (Inline GenUI)
 
+> **Note:** These modes were renamed in v0.12.1 — "Generate" is now "Standalone" and "Chat" is now "Inline". The old names are accepted as deprecated aliases.
+
 json-render now supports two generation modes: **Generate** (JSONL-only, the default) and **Chat** (text + JSONL inline). Chat mode lets the AI respond conversationally with embedded UI specs, ideal for chatbots and copilot experiences.
 
 ```typescript

apps/web/app/(main)/docs/generation-modes/page.mdx

@@ -3,15 +3,15 @@ export const metadata = pageMetadata("docs/generation-modes")
 
 # Generation Modes
 
-json-render supports two modes for AI-generated UI: **Generate mode** for standalone UI and **Chat mode** for inline UI within a conversation.
+json-render supports two modes for AI-generated UI: **Standalone mode** for standalone UI and **Inline mode** for inline UI within a conversation.
 
 The mode controls how the AI formats its output and how your app processes the stream. The underlying JSONL patch format is the same in both modes.
 
 <GenerationModesDiagram />
 
-## Generate Mode (Standalone)
+## Standalone Mode
 
-In generate mode, the AI outputs **only JSONL patches** — no prose, no markdown. The entire response is a UI spec.
+In standalone mode, the AI outputs **only JSONL patches** — no prose, no markdown. The entire response is a UI spec.
 
 This is the default mode and is ideal for:
 
@@ -25,7 +25,7 @@ This is the default mode and is ideal for:
 ```typescript
 import { streamText } from "ai";
 
-// Generate mode is the default (no mode option needed)
+// Standalone mode is the default (no mode option needed)
 const systemPrompt = catalog.prompt({
   customRules: [
     "Use Card as root for forms and small UIs.",
@@ -74,9 +74,9 @@ The AI outputs only JSONL — one patch per line, no surrounding text:
 {"op":"add","path":"/elements/submit","value":{"type":"Button","props":{"label":"Sign In"}}}
 ```
 
-## Chat Mode (Inline)
+## Inline Mode
 
-In chat mode, the AI responds **conversationally first**, then outputs JSONL patches on their own lines. Text-only replies are allowed when no UI is needed (e.g. greetings, clarifying questions).
+In inline mode, the AI responds **conversationally first**, then outputs JSONL patches on their own lines. Text-only replies are allowed when no UI is needed (e.g. greetings, clarifying questions).
 
 This is ideal for:
 
@@ -92,8 +92,8 @@ import { streamText } from "ai";
 import { pipeJsonRender } from "@json-render/core";
 import { createUIMessageStream, createUIMessageStreamResponse } from "ai";
 
-// Enable chat mode
-const systemPrompt = catalog.prompt({ mode: "chat" });
+// Enable inline mode
+const systemPrompt = catalog.prompt({ mode: "inline" });
 
 const result = streamText({
   model: yourModel,
@@ -180,8 +180,8 @@ If the user asks a simple question ("what does BTC stand for?"), the AI replies
     <thead>
       <tr>
         <th />
-        <th>Generate</th>
-        <th>Chat</th>
+        <th>Standalone</th>
+        <th>Inline</th>
       </tr>
     </thead>
     <tbody>
@@ -198,7 +198,7 @@ If the user asks a simple question ("what does BTC stand for?"), the AI replies
       <tr>
         <td>System prompt</td>
         <td><code>{"catalog.prompt()"}</code></td>
-        <td><code>{'catalog.prompt({ mode: "chat" })'}</code></td>
+        <td><code>{'catalog.prompt({ mode: "inline" })'}</code></td>
       </tr>
       <tr>
         <td>Stream utility</td>

apps/web/app/(main)/docs/migration/page.mdx

@@ -309,10 +309,35 @@ const catalog = defineCatalog(schema, {
 
 const prompt = catalog.prompt();
 
-// Chat mode prompt
+// Inline mode prompt (formerly "chat")
+const inlinePrompt = catalog.prompt({ mode: "inline" });
+```
+
+## Generation Modes
+
+The generation mode values passed to `catalog.prompt()` have been renamed for clarity:
+
+- `"generate"` is now `"standalone"`
+- `"chat"` is now `"inline"`
+
+The old names are accepted as deprecated aliases, so existing code will continue to work. Update when convenient.
+
+**Before:**
+
+```typescript
+const prompt = catalog.prompt({ mode: "generate" });
 const chatPrompt = catalog.prompt({ mode: "chat" });
 ```
 
+**After:**
+
+```typescript
+const prompt = catalog.prompt({ mode: "standalone" });
+const inlinePrompt = catalog.prompt({ mode: "inline" });
+```
+
+The default mode (when no `mode` option is provided) is `"standalone"`, which behaves identically to the previous `"generate"` default.
+
 ## Validation
 
 `ValidationCheck` now uses `type` instead of `fn`, `ValidationProvider` uses `customFunctions` instead of `functions`, and `useFieldValidation` takes a config object instead of a checks array.

apps/web/app/(main)/docs/page.mdx

@@ -91,7 +91,7 @@ The result is a native UI built from your own components — not an iframe, not
 - **[Streaming](/docs/streaming)** — Render progressively as the AI responds. Each JSONL patch adds to the spec and the UI updates in real time.
 - **[Data Binding](/docs/data-binding)** — Bind props to runtime data with `$state` paths, repeat elements over arrays, and wire two-way input bindings.
 - **[Visibility](/docs/visibility)** — Show or hide elements based on state conditions. The AI can generate conditional UIs without writing logic.
-- **[Generation Modes](/docs/generation-modes)** — Generate standalone UI (playground/builder) or inline UI within a chat conversation.
+- **[Generation Modes](/docs/generation-modes)** — Standalone mode for full-page generated UI or inline mode for UI embedded in a conversation.
 
 ## Next
 

apps/web/app/(main)/docs/skills/page.mdx

@@ -0,0 +1,117 @@
+import { pageMetadata } from "@/lib/page-metadata"
+
+export const metadata = pageMetadata("docs/skills")
+
+# Skills
+
+json-render ships with skills that teach AI coding agents how to use each package. Install a skill and your agent in Cursor, Claude Code, or Codex can generate json-render UIs without manual guidance.
+
+## Available Skills
+
+- **core** — Core schemas, catalogs, and AI prompt generation.
+- **react** — React renderer that turns JSON specs into React component trees.
+- **react-pdf** — PDF renderer using `@react-pdf/renderer`.
+- **react-email** — Email renderer that produces HTML or plain-text emails.
+- **react-native** — React Native renderer for native mobile UIs.
+- **shadcn** — Pre-built shadcn/ui components (Radix UI + Tailwind).
+- **image** — Image renderer that turns JSON specs into SVG and PNG via Satori.
+- **remotion** — Remotion renderer for video generation from JSON timeline specs.
+- **vue** — Vue 3 renderer for Vue component trees.
+- **svelte** — Svelte 5 renderer for Svelte component trees.
+- **codegen** — Code generation utilities for building custom exporters.
+- **mcp** — MCP Apps integration for Claude, ChatGPT, Cursor, and VS Code.
+- **redux** — Redux adapter for json-render's `StateStore` interface.
+- **zustand** — Zustand adapter for json-render's `StateStore` interface.
+- **jotai** — Jotai adapter for json-render's `StateStore` interface.
+- **xstate** — XState Store adapter for json-render's `StateStore` interface.
+
+## Installation
+
+```bash
+npx skills add vercel-labs/json-render --skill core
+npx skills add vercel-labs/json-render --skill react
+npx skills add vercel-labs/json-render --skill react-pdf
+npx skills add vercel-labs/json-render --skill react-email
+npx skills add vercel-labs/json-render --skill react-native
+npx skills add vercel-labs/json-render --skill shadcn
+npx skills add vercel-labs/json-render --skill image
+npx skills add vercel-labs/json-render --skill remotion
+npx skills add vercel-labs/json-render --skill vue
+npx skills add vercel-labs/json-render --skill svelte
+npx skills add vercel-labs/json-render --skill codegen
+npx skills add vercel-labs/json-render --skill mcp
+npx skills add vercel-labs/json-render --skill redux
+npx skills add vercel-labs/json-render --skill zustand
+npx skills add vercel-labs/json-render --skill jotai
+npx skills add vercel-labs/json-render --skill xstate
+```
+
+After installing, your AI agent will automatically activate the right skill when it encounters a matching request.
+
+## core
+
+The foundational skill. Teaches agents how to define catalogs, create schemas, build specs, and generate AI prompts. This is the starting point for any json-render project and covers `defineCatalog`, `defineSchema`, `specSchema`, `toPrompt`, and the full spec format.
+
+## react
+
+Teaches agents how to render JSON specs as React component trees using `JsonRender`, `JsonRenderClient`, and `useJsonRender`. Covers custom component registries, client-side interactivity, state management, and streaming integration.
+
+## react-pdf
+
+Teaches agents how to generate PDFs from JSON specs using `@react-pdf/renderer`. Covers the PDF-specific component registry, page layout, and styling.
+
+## react-email
+
+Teaches agents how to render JSON specs as HTML or plain-text emails using React Email components. Covers the email-specific registry and rendering pipeline.
+
+## react-native
+
+Teaches agents how to render JSON specs as native mobile UIs with React Native. Covers the native component registry and platform-specific considerations.
+
+## shadcn
+
+Teaches agents how to use the pre-built shadcn/ui component registry with json-render. Includes Radix UI primitives, Tailwind styling, and the full set of available shadcn components.
+
+## image
+
+Teaches agents how to turn JSON specs into SVG and PNG images using Satori. Covers the image-specific registry, dimensions, fonts, and rendering options.
+
+## remotion
+
+Teaches agents how to generate videos from JSON timeline specs using Remotion. Covers compositions, sequences, timeline structure, and video rendering.
+
+## vue
+
+Teaches agents how to render JSON specs as Vue 3 component trees. Covers the Vue renderer API, custom component registries, and reactivity integration.
+
+## svelte
+
+Teaches agents how to render JSON specs as Svelte 5 component trees. Covers the Svelte renderer API and component registration.
+
+## codegen
+
+Teaches agents how to use code generation utilities to export UI specs as framework-specific source code. Covers the codegen pipeline and custom exporter creation.
+
+## mcp
+
+Teaches agents how to build MCP Apps that serve json-render UIs inside AI tools like Claude, ChatGPT, Cursor, and VS Code. Covers MCP server setup, tool definitions, and UI streaming.
+
+## redux
+
+Teaches agents how to connect a Redux store to json-render's `StateStore` interface for state-driven UIs.
+
+## zustand
+
+Teaches agents how to connect a Zustand store to json-render's `StateStore` interface for lightweight state management.
+
+## jotai
+
+Teaches agents how to connect Jotai atoms to json-render's `StateStore` interface for atomic state management.
+
+## xstate
+
+Teaches agents how to connect an XState Store to json-render's `StateStore` interface for state-machine-driven UIs.
+
+## Source
+
+All skill files are in the [`skills/`](https://github.com/vercel-labs/json-render/tree/main/skills) directory of the repository.

apps/web/app/api/docs-chat/route.ts

@@ -17,6 +17,7 @@ const SYSTEM_PROMPT = `You are a helpful documentation assistant for json-render
 GitHub repository: https://github.com/vercel-labs/json-render
 Documentation: https://json-render.dev/docs
 npm packages: @json-render/core, @json-render/react, @json-render/vue, @json-render/svelte, @json-render/shadcn, @json-render/react-native, @json-render/react-email, @json-render/react-pdf, @json-render/image, @json-render/remotion, @json-render/codegen, @json-render/mcp, @json-render/redux, @json-render/zustand, @json-render/jotai, @json-render/xstate
+Skills: json-render ships AI agent skills that teach coding agents how to use each package. Install with "npx skills add vercel-labs/json-render --skill <name>". Available skills: core, react, react-pdf, react-email, react-native, shadcn, image, remotion, vue, svelte, codegen, mcp, redux, zustand, jotai, xstate. See /docs/skills for details.
 
 You have access to the full json-render documentation via the bash and readFile tools. The docs are available as markdown files in the /workspace/docs/ directory.
 

apps/web/components/generation-modes-diagram.tsx

@@ -19,11 +19,11 @@ function FormUI() {
   );
 }
 
-function ChatModeDiagram() {
+function InlineModeDiagram() {
   return (
     <div className="flex flex-col h-full">
       <div className="text-xs font-medium text-muted-foreground mb-3 text-center">
-        Chat Mode
+        Inline Mode
       </div>
       <div className="flex-1 border border-border rounded-lg bg-background overflow-hidden flex flex-col">
         {/* Chat area */}
@@ -69,11 +69,11 @@ function ChatModeDiagram() {
   );
 }
 
-function GenerateModeDiagram() {
+function StandaloneModeDiagram() {
   return (
     <div className="flex flex-col h-full">
       <div className="text-xs font-medium text-muted-foreground mb-3 text-center">
-        Generate Mode
+        Standalone Mode
       </div>
       <div className="flex-1 border border-border rounded-lg bg-background overflow-hidden flex flex-row">
         {/* Left panel - prompt */}
@@ -104,10 +104,10 @@ export function GenerationModesDiagram() {
     <div className="not-prose my-8">
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
         <div className="h-[280px]">
-          <ChatModeDiagram />
+          <InlineModeDiagram />
         </div>
         <div className="h-[280px]">
-          <GenerateModeDiagram />
+          <StandaloneModeDiagram />
         </div>
       </div>
     </div>

apps/web/lib/docs-navigation.ts

@@ -16,6 +16,7 @@ export const docsNavigation: NavSection[] = [
       { title: "Introduction", href: "/docs" },
       { title: "Installation", href: "/docs/installation" },
       { title: "Quick Start", href: "/docs/quick-start" },
+      { title: "Skills", href: "/docs/skills" },
       { title: "Migration Guide", href: "/docs/migration" },
       { title: "Changelog", href: "/docs/changelog" },
     ],

apps/web/lib/page-titles.ts

@@ -37,6 +37,7 @@ export const PAGE_TITLES: Record<string, string> = {
   "docs/ag-ui": "AG-UI Integration",
   "docs/migration": "Migration Guide",
   "docs/changelog": "Changelog",
+  "docs/skills": "Skills",
 
   // API references
   "docs/api/core": "@json-render/core API",

examples/chat/lib/agent.ts

@@ -130,7 +130,7 @@ When the user asks for a quiz, test, or Q&A, build an interactive experience:
 4. You can also add a final score section that becomes visible when all questions are submitted.
 
 ${explorerCatalog.prompt({
-  mode: "chat",
+  mode: "inline",
   customRules: [
     "NEVER use viewport height classes (min-h-screen, h-screen) — the UI renders inside a fixed-size container.",
     "Prefer Grid with columns='2' or columns='3' for side-by-side layouts.",

examples/mcp/package.json

@@ -16,8 +16,8 @@
     "@json-render/shadcn": "workspace:*",
     "@modelcontextprotocol/ext-apps": "^1.2.0",
     "@modelcontextprotocol/sdk": "^1.27.1",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "zod": "^4.3.6"
   },
   "devDependencies": {

examples/mcp/vite.config.ts

@@ -5,6 +5,9 @@ import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
   plugins: [react(), tailwindcss(), viteSingleFile()],
+  resolve: {
+    dedupe: ["react", "react-dom"],
+  },
   build: {
     outDir: "dist",
     emptyOutDir: false,

examples/stripe-app/api/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/svelte-chat/src/lib/agent.ts

@@ -62,7 +62,7 @@ INPUT COMPONENTS:
 - Button: Clickable button. Use on.press to trigger actions.
 
 ${explorerCatalog.prompt({
-  mode: "chat",
+  mode: "inline",
   customRules: [
     "NEVER use viewport height classes (min-h-screen, h-screen) — the UI renders inside a fixed-size container.",
     "Prefer Grid with columns='2' or columns='3' for side-by-side layouts.",

packages/codegen/package.json

@@ -15,7 +15,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/codegen"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/core/README.md

@@ -227,7 +227,7 @@ Schema options:
 | `ActionBinding` | Action binding with `action`, `params`, `confirm`, `preventDefault`, etc. |
 | `BuiltInAction` | Built-in action definition with `name` and `description` |
 
-### Chat Mode (Mixed Streams)
+### Inline Mode (Mixed Streams)
 
 | Export | Purpose |
 |--------|---------|

packages/core/package.json

@@ -19,7 +19,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/core"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/core/src/schema.test.ts

@@ -257,7 +257,7 @@ describe("catalog.prompt", () => {
     expect(prompt).toContain("Keep UIs simple");
   });
 
-  it("generates chat mode prompt when mode is chat", () => {
+  it("generates inline mode prompt when mode is inline", () => {
     const catalog = defineCatalog(testSchema, {
       components: {
         Text: {
@@ -268,13 +268,13 @@ describe("catalog.prompt", () => {
       },
       actions: {},
     });
-    const prompt = catalog.prompt({ mode: "chat" });
+    const prompt = catalog.prompt({ mode: "inline" });
     expect(prompt).toContain("```spec");
     expect(prompt).toContain("conversationally");
     expect(prompt).toContain("text + JSONL");
   });
 
-  it("generates generate mode prompt by default", () => {
+  it("generates standalone mode prompt by default", () => {
     const catalog = defineCatalog(testSchema, {
       components: {
         Text: {
@@ -290,6 +290,38 @@ describe("catalog.prompt", () => {
     expect(prompt).not.toContain("conversationally");
   });
 
+  it("accepts deprecated 'chat' as alias for 'inline'", () => {
+    const catalog = defineCatalog(testSchema, {
+      components: {
+        Text: {
+          props: z.object({}),
+          description: "",
+          slots: [],
+        },
+      },
+      actions: {},
+    });
+    const inlinePrompt = catalog.prompt({ mode: "inline" });
+    const chatPrompt = catalog.prompt({ mode: "chat" });
+    expect(chatPrompt).toEqual(inlinePrompt);
+  });
+
+  it("accepts deprecated 'generate' as alias for 'standalone'", () => {
+    const catalog = defineCatalog(testSchema, {
+      components: {
+        Text: {
+          props: z.object({}),
+          description: "",
+          slots: [],
+        },
+      },
+      actions: {},
+    });
+    const standalonePrompt = catalog.prompt({ mode: "standalone" });
+    const generatePrompt = catalog.prompt({ mode: "generate" });
+    expect(generatePrompt).toEqual(standalonePrompt);
+  });
+
   it("uses actual catalog component names in examples", () => {
     const catalog = defineCatalog(testSchema, {
       components: {

packages/core/src/schema.ts

@@ -112,11 +112,14 @@ export interface PromptOptions {
   /**
    * Output mode for the generated prompt.
    *
-   * - `"generate"` (default): The LLM should output only JSONL patches (no prose).
-   * - `"chat"`: The LLM should respond conversationally first, then output JSONL patches.
+   * - `"standalone"` (default): The LLM should output only JSONL patches (no prose).
+   * - `"inline"`: The LLM should respond conversationally first, then output JSONL patches.
    *   Includes rules about interleaving text with JSONL and not wrapping in code fences.
+   *
+   * @deprecated `"generate"` — use `"standalone"` instead.
+   * @deprecated `"chat"` — use `"inline"` instead.
    */
-  mode?: "generate" | "chat";
+  mode?: "standalone" | "inline" | "generate" | "chat";
 }
 
 /**
@@ -563,15 +566,28 @@ function generatePrompt<TDef extends SchemaDefinition, TCatalog>(
   const {
     system = "You are a UI generator that outputs JSON.",
     customRules = [],
-    mode = "generate",
+    mode: rawMode = "standalone",
   } = options;
 
+  const mode: "standalone" | "inline" =
+    rawMode === "chat"
+      ? (console.warn(
+          '[json-render] mode "chat" is deprecated, use "inline" instead',
+        ),
+        "inline")
+      : rawMode === "generate"
+        ? (console.warn(
+            '[json-render] mode "generate" is deprecated, use "standalone" instead',
+          ),
+          "standalone")
+        : rawMode;
+
   const lines: string[] = [];
   lines.push(system);
   lines.push("");
 
   // Output format section - explain JSONL streaming patch format
-  if (mode === "chat") {
+  if (mode === "inline") {
     lines.push("OUTPUT FORMAT (text + JSONL, RFC 6902 JSON Patch):");
     lines.push(
       "You respond conversationally. When generating UI, first write a brief explanation (1-3 sentences), then output JSONL patch lines wrapped in a ```spec code fence.",
@@ -1014,7 +1030,7 @@ Note: state patches appear right after the elements that use them, so the UI fil
   // Rules
   lines.push("RULES:");
   const baseRules =
-    mode === "chat"
+    mode === "inline"
       ? [
           "When generating UI, wrap all JSONL patches in a ```spec code fence - one JSON object per line inside the fence",
           "Write a brief conversational response before any JSONL output",

packages/image/package.json

@@ -20,7 +20,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/image"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/jotai/package.json

@@ -14,7 +14,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/jotai"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/mcp/package.json

@@ -22,7 +22,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/mcp"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },
@@ -42,6 +42,11 @@
       "types": "./dist/app.d.ts",
       "import": "./dist/app.mjs",
       "require": "./dist/app.js"
+    },
+    "./build-app-html": {
+      "types": "./dist/build-app-html-entry.d.ts",
+      "import": "./dist/build-app-html-entry.mjs",
+      "require": "./dist/build-app-html-entry.js"
     }
   },
   "files": [

packages/mcp/src/build-app-html-entry.ts

@@ -0,0 +1,11 @@
+/**
+ * Server-side utility for building self-contained MCP App HTML.
+ *
+ * This entry point does NOT depend on React and is safe to import
+ * in Node.js / server environments.
+ *
+ * @packageDocumentation
+ */
+
+export { buildAppHtml } from "./build-app-html.js";
+export type { BuildAppHtmlOptions } from "./build-app-html.js";

packages/mcp/tsup.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from "tsup";
 
 export default defineConfig({
-  entry: ["src/index.ts", "src/app.ts"],
+  entry: ["src/index.ts", "src/app.ts", "src/build-app-html-entry.ts"],
   format: ["cjs", "esm"],
   dts: true,
   sourcemap: true,

packages/react-email/package.json

@@ -18,7 +18,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/react-email"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/react-native/package.json

@@ -19,7 +19,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/react-native"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/react-pdf/package.json

@@ -18,7 +18,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/react-pdf"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/react/package.json

@@ -19,7 +19,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/react"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/redux/package.json

@@ -14,7 +14,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/redux"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/remotion/package.json

@@ -19,7 +19,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/remotion"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/shadcn/package.json

@@ -22,7 +22,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/shadcn"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/svelte/package.json

@@ -21,7 +21,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/svelte"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/vue/package.json

@@ -19,7 +19,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/vue"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/xstate/package.json

@@ -15,7 +15,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/xstate"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

packages/zustand/package.json

@@ -14,7 +14,7 @@
     "url": "git+https://github.com/vercel-labs/json-render.git",
     "directory": "packages/zustand"
   },
-  "homepage": "https://github.com/vercel-labs/json-render#readme",
+  "homepage": "https://json-render.dev",
   "bugs": {
     "url": "https://github.com/vercel-labs/json-render/issues"
   },

pnpm-lock.yaml

@@ -536,16 +536,16 @@ importers:
         version: link:../../packages/shadcn
       '@modelcontextprotocol/ext-apps':
         specifier: ^1.2.0
-        version: 1.2.0(@modelcontextprotocol/sdk@1.27.1(zod@4.3.6))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(zod@4.3.6)
+        version: 1.2.0(@modelcontextprotocol/sdk@1.27.1(zod@4.3.6))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
       '@modelcontextprotocol/sdk':
         specifier: ^1.27.1
         version: 1.27.1(zod@4.3.6)
       react:
-        specifier: 19.2.3
-        version: 19.2.3
+        specifier: ^19.0.0
+        version: 19.2.4
       react-dom:
-        specifier: 19.2.3
-        version: 19.2.3(react@19.2.3)
+        specifier: ^19.0.0
+        version: 19.2.4(react@19.2.4)
       zod:
         specifier: ^4.3.6
         version: 4.3.6
@@ -600,7 +600,7 @@ importers:
         version: 0.563.0(react@19.2.4)
       next:
         specifier: 16.1.6
-        version: 16.1.6(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       radix-ui:
         specifier: ^1.4.3
         version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -947,7 +947,7 @@ importers:
         version: 6.0.103(zod@4.3.6)
       next:
         specifier: ^16.1.6
-        version: 16.1.6(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react:
         specifier: ^19.1.0
         version: 19.2.4
@@ -15019,14 +15019,6 @@ snapshots:
 
   '@mixmark-io/domino@2.2.0': {}
 
-  '@modelcontextprotocol/ext-apps@1.2.0(@modelcontextprotocol/sdk@1.27.1(zod@4.3.6))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(zod@4.3.6)':
-    dependencies:
-      '@modelcontextprotocol/sdk': 1.27.1(zod@4.3.6)
-      zod: 4.3.6
-    optionalDependencies:
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-
   '@modelcontextprotocol/ext-apps@1.2.0(@modelcontextprotocol/sdk@1.27.1(zod@4.3.6))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)':
     dependencies:
       '@modelcontextprotocol/sdk': 1.27.1(zod@4.3.6)
@@ -17941,7 +17933,7 @@ snapshots:
   '@stripe/ui-extension-tools@0.0.1(@babel/core@7.29.0)(babel-jest@27.5.1(@babel/core@7.29.0))':
     dependencies:
       '@types/jest': 28.1.8
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@2.6.1))(typescript@4.9.5))(eslint@8.57.1)(typescript@4.9.5)
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@4.9.5))(eslint@8.57.1)(typescript@4.9.5)
       '@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@4.9.5)
       eslint: 8.57.1
       eslint-plugin-react: 7.37.5(eslint@8.57.1)
@@ -18467,7 +18459,7 @@ snapshots:
       '@types/node': 22.19.6
     optional: true
 
-  '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@2.6.1))(typescript@4.9.5))(eslint@8.57.1)(typescript@4.9.5)':
+  '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@4.9.5))(eslint@8.57.1)(typescript@4.9.5)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
       '@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@4.9.5)
@@ -23804,32 +23796,6 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  next@16.1.6(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
-    dependencies:
-      '@next/env': 16.1.6
-      '@swc/helpers': 0.5.15
-      baseline-browser-mapping: 2.9.14
-      caniuse-lite: 1.0.30001764
-      postcss: 8.4.31
-      react: 19.2.4
-      react-dom: 19.2.4(react@19.2.4)
-      styled-jsx: 5.1.6(react@19.2.4)
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 16.1.6
-      '@next/swc-darwin-x64': 16.1.6
-      '@next/swc-linux-arm64-gnu': 16.1.6
-      '@next/swc-linux-arm64-musl': 16.1.6
-      '@next/swc-linux-x64-gnu': 16.1.6
-      '@next/swc-linux-x64-musl': 16.1.6
-      '@next/swc-win32-arm64-msvc': 16.1.6
-      '@next/swc-win32-x64-msvc': 16.1.6
-      '@opentelemetry/api': 1.9.0
-      babel-plugin-react-compiler: 1.0.0
-      sharp: 0.34.5
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-
   node-abi@3.87.0:
     dependencies:
       semver: 7.7.3
@@ -25904,11 +25870,6 @@ snapshots:
       client-only: 0.0.1
       react: 19.2.3
 
-  styled-jsx@5.1.6(react@19.2.4):
-    dependencies:
-      client-only: 0.0.1
-      react: 19.2.4
-
   sucrase@3.35.1:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13

skills/codegen/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-codegen
+name: codegen
 description: Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for @json-render/codegen.
 ---
 

skills/core/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-core
+name: core
 description: Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.
 ---
 

skills/image/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-image
+name: image
 description: Image renderer for json-render that turns JSON specs into SVG and PNG images via Satori. Use when working with @json-render/image, generating OG images from JSON, creating social cards, or rendering AI-generated image specs.
 ---
 

skills/jotai/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-jotai
+name: jotai
 description: Jotai adapter for json-render's StateStore interface. Use when integrating json-render with Jotai for state management via @json-render/jotai.
 ---
 

skills/mcp/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-mcp
+name: mcp
 description: MCP Apps integration for json-render. Use when building MCP servers that render interactive UIs in Claude, ChatGPT, Cursor, or VS Code, or when integrating json-render with the Model Context Protocol.
 ---
 

skills/react-email/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-react-email
+name: react-email
 description: React Email renderer for json-render that turns JSON specs into HTML or plain-text emails using @react-email/components and @react-email/render. Use when working with @json-render/react-email, building transactional or marketing emails from JSON, creating email catalogs, rendering AI-generated email specs, or when the user mentions react-email, HTML email, or transactional email.
 metadata:
   tags: react-email, email, json-render, html email, transactional email

skills/react-native/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-react-native
+name: react-native
 description: React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs from JSON, creating mobile component catalogs, or rendering AI-generated specs on mobile.
 ---
 

skills/react-pdf/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-react-pdf
+name: react-pdf
 description: React PDF renderer for json-render. Use when generating PDF documents from JSON specs, working with @json-render/react-pdf, or rendering specs to PDF buffers/streams/files.
 ---
 

skills/react/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-react
+name: react
 description: React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.
 ---
 

skills/redux/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-redux
+name: redux
 description: Redux adapter for json-render's StateStore interface. Use when integrating json-render with Redux or Redux Toolkit for state management via @json-render/redux.
 ---
 

skills/remotion/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-remotion
+name: remotion
 description: Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from JSON, creating video catalogs, or rendering AI-generated video timelines.
 ---
 

skills/shadcn/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-shadcn
+name: shadcn
 description: Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with Radix UI + Tailwind CSS components.
 ---
 

skills/svelte/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-svelte
+name: svelte
 description: Svelte 5 renderer for json-render that turns JSON specs into Svelte component trees. Use when working with @json-render/svelte, building Svelte UIs from JSON, creating component catalogs, or rendering AI-generated specs.
 ---
 

skills/vue/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-vue
+name: vue
 description: Vue 3 renderer for json-render. Use when building Vue UIs from JSON specs, working with @json-render/vue, defining Vue component registries, or rendering AI-generated specs in Vue.
 ---
 

skills/xstate/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-xstate
+name: xstate
 description: XState Store adapter for json-render's StateStore interface. Use when integrating json-render with @xstate/store for state management via @json-render/xstate.
 ---
 

skills/zustand/SKILL.md

@@ -1,5 +1,5 @@
 ---
-name: json-render-zustand
+name: zustand
 description: Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.
 ---