+ {showImg ? (
+ 
+ ) : (
+
+ {initials}
+
+ )}
+
+ );
+ },
+ },
+});
+
+class ErrorBoundary extends Component<
+ { children: ReactNode },
+ { error: Error | null }
+> {
+ state = { error: null as Error | null };
+ static getDerivedStateFromError(error: Error) {
+ return { error };
+ }
+ render() {
+ if (this.state.error) {
+ return (
+
+ Error: {this.state.error.message}
+
+ );
+ }
+ return this.props.children;
+ }
+}
+
+function forceFullWidth(spec: Spec): Spec {
+ if (!spec.elements) return spec;
+ const elements = { ...spec.elements };
+ for (const [key, el] of Object.entries(elements)) {
+ if (el.type === "Card" && el.props) {
+ elements[key] = {
+ ...el,
+ props: { ...el.props, maxWidth: "full", centered: false },
+ };
+ }
+ }
+ return { ...spec, elements };
+}
+
+function parseSpec(
+ result: { content?: Array<{ type: string; text?: string }> } | undefined,
+): Spec | null {
+ const text = result?.content?.find((c) => c.type === "text")?.text;
+ if (!text) return null;
+ try {
+ return forceFullWidth(JSON.parse(text) as Spec);
+ } catch {
+ return null;
+ }
+}
+
+function applyHostContext(ctx: {
+ theme?: string;
+ styles?: { variables?: Record
+ {error}
+
+ );
+ }
+
+ if (!spec) {
+ return (
+
+ Loading...
+
+ );
+ }
+
+ return (
+
+
+
+
+ );
+ }
+
+ if (!spec) {
+ return (
+
+ Connection error: {error.message}
+
+ {logs.join("\n")}
+
+
+ );
+ }
+
+ return (
+
+ {connecting
+ ? "Connecting to host..."
+ : loading
+ ? "Waiting for UI spec..."
+ : "No spec received."}
+
+ {logs.join("\n")}
+
+
+
+
+ );
+}
diff --git a/examples/mcp/tsconfig.json b/examples/mcp/tsconfig.json
new file mode 100644
index 0000000..458d416
--- /dev/null
+++ b/examples/mcp/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "verbatimModuleSyntax": true,
+ "noEmit": true,
+ "strict": true,
+ "skipLibCheck": true,
+ "jsx": "react-jsx"
+ },
+ "include": ["src", "server.ts"]
+}
diff --git a/examples/mcp/vite.config.ts b/examples/mcp/vite.config.ts
new file mode 100644
index 0000000..185077f
--- /dev/null
+++ b/examples/mcp/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { viteSingleFile } from "vite-plugin-singlefile";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+ plugins: [react(), tailwindcss(), viteSingleFile()],
+ build: {
+ outDir: "dist",
+ emptyOutDir: false,
+ rollupOptions: {
+ input: "index.html",
+ },
+ },
+});
diff --git a/examples/svelte-chat/src/lib/render/registry.ts b/examples/svelte-chat/src/lib/render/registry.ts
index 7802bb1..1209ad3 100644
--- a/examples/svelte-chat/src/lib/render/registry.ts
+++ b/examples/svelte-chat/src/lib/render/registry.ts
@@ -1,7 +1,6 @@
-import { defineRegistry, type ComponentRegistry } from "@json-render/svelte";
+import { defineRegistry } from "@json-render/svelte";
import { explorerCatalog } from "./catalog";
-// Import render components
import StackComponent from "./components/Stack.svelte";
import CardComponent from "./components/Card.svelte";
import GridComponent from "./components/Grid.svelte";
@@ -28,7 +27,7 @@ import SelectInputComponent from "./components/SelectInput.svelte";
import TextInputComponent from "./components/TextInput.svelte";
import ButtonComponent from "./components/Button.svelte";
-const components: ComponentRegistry = {
+const components = {
Stack: StackComponent,
Card: CardComponent,
Grid: GridComponent,
diff --git a/packages/mcp/README.md b/packages/mcp/README.md
new file mode 100644
index 0000000..c2b79d3
--- /dev/null
+++ b/packages/mcp/README.md
@@ -0,0 +1,124 @@
+# @json-render/mcp
+
+MCP Apps integration for [json-render](https://github.com/vercel-labs/json-render). Serve json-render UIs as interactive MCP Apps inside Claude, ChatGPT, Cursor, VS Code, and other MCP-capable clients.
+
+## What are MCP Apps?
+
+[MCP Apps](https://modelcontextprotocol.io/docs/extensions/apps) is an extension to the Model Context Protocol that lets MCP servers return interactive HTML UIs rendered directly inside chat conversations. Instead of text-only tool responses, users get full interactive interfaces -- dashboards, forms, data visualizations -- embedded inline.
+
+## Installation
+
+```bash
+npm install @json-render/mcp @json-render/core @modelcontextprotocol/sdk
+```
+
+## Quick Start
+
+### 1. Define your catalog
+
+```ts
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/react/schema";
+import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
+
+const catalog = defineCatalog(schema, {
+ components: { ...shadcnComponentDefinitions },
+ actions: {},
+});
+```
+
+### 2. Create the MCP server
+
+```ts
+import { createMcpApp } from "@json-render/mcp";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import fs from "node:fs";
+
+const server = createMcpApp({
+ name: "My Dashboard",
+ version: "1.0.0",
+ catalog,
+ html: fs.readFileSync("dist/index.html", "utf-8"),
+});
+
+await server.connect(new StdioServerTransport());
+```
+
+### 3. Build the UI (iframe)
+
+Create a React app that uses `useJsonRenderApp` from `@json-render/mcp/app`:
+
+```tsx
+import { useJsonRenderApp } from "@json-render/mcp/app";
+import { JSONUIProvider, Renderer } from "@json-render/react";
+
+function McpAppView({ registry }) {
+ const { spec, loading, connected, error } = useJsonRenderApp();
+
+ if (error) return Error: {error.message}
;
+ if (!spec) return Waiting for spec...
;
+
+ return (
+