Compare commits

..
Author SHA1 Message Date
Chris Tate 402390b707 skills page 2026-03-06 20:30:48 -06:00
84 changed files with 148 additions and 483 deletions
-1
View File
@@ -4,7 +4,6 @@
node_modules
.pnp
.pnp.js
.pnpm-store/
# Local env files
.env*
-9
View File
@@ -1,14 +1,5 @@
# web
## 0.1.6
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/codegen@0.12.1
- @json-render/react@0.12.1
## 0.1.5
### Patch Changes
+12 -12
View File
@@ -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: **Standalone** (standalone UI) and **Inline** (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: **Generate** (standalone UI) and **Chat** (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
```
## Standalone Mode
## Generate Mode
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.
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.
### API Route
@@ -73,9 +73,9 @@ function GenerativeUI() {
}
```
## Inline Mode
## Chat Mode
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.
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.
### API Route
@@ -96,7 +96,7 @@ export async function POST(req: Request) {
const result = streamText({
model: yourModel,
system: catalog.prompt({ mode: "inline" }),
system: catalog.prompt({ mode: "chat" }),
messages,
});
@@ -182,13 +182,13 @@ const systemPrompt = catalog.prompt({
});
```
### Inline Mode Prompt
### Chat Mode Prompt
```typescript
const inlinePrompt = catalog.prompt({ mode: "inline" });
const chatPrompt = catalog.prompt({ mode: "chat" });
```
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.
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.
## Which Mode?
@@ -197,8 +197,8 @@ In inline mode, the prompt instructs the AI to respond conversationally first, t
<thead>
<tr>
<th></th>
<th>Standalone</th>
<th>Inline</th>
<th>Generate</th>
<th>Chat</th>
</tr>
</thead>
<tbody>
@@ -215,7 +215,7 @@ In inline mode, the prompt instructs the AI to respond conversationally first, t
<tr>
<td>System prompt</td>
<td><code>catalog.prompt()</code></td>
<td><code>{"catalog.prompt({ mode: \"inline\" })"}</code></td>
<td><code>{"catalog.prompt({ mode: \"chat\" })"}</code></td>
</tr>
<tr>
<td>Stream utility</td>
+4 -4
View File
@@ -75,7 +75,7 @@ interface Catalog {
interface PromptOptions {
system?: string; // Custom system message intro
customRules?: string[]; // Additional rules to append
mode?: "standalone" | "inline" | "generate" | "chat"; // Output mode (default: "standalone")
mode?: "generate" | "chat"; // Output mode (default: "generate")
}
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 Inline mode):
Parse a mixed stream of text and JSONL patches (used for Chat + GenUI 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 Inline 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 Chat 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 Inline mode setup.
See [Generation Modes](/docs/generation-modes) for full Chat mode setup.
### SpecStream Types
@@ -341,8 +341,6 @@ 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
@@ -3,15 +3,15 @@ export const metadata = pageMetadata("docs/generation-modes")
# Generation Modes
json-render supports two modes for AI-generated UI: **Standalone mode** for standalone UI and **Inline mode** for inline UI within a conversation.
json-render supports two modes for AI-generated UI: **Generate mode** for standalone UI and **Chat 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 />
## Standalone Mode
## Generate Mode (Standalone)
In standalone mode, the AI outputs **only JSONL patches** — no prose, no markdown. The entire response is a UI spec.
In generate 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";
// Standalone mode is the default (no mode option needed)
// Generate 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"}}}
```
## Inline Mode
## Chat Mode (Inline)
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).
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).
This is ideal for:
@@ -92,8 +92,8 @@ import { streamText } from "ai";
import { pipeJsonRender } from "@json-render/core";
import { createUIMessageStream, createUIMessageStreamResponse } from "ai";
// Enable inline mode
const systemPrompt = catalog.prompt({ mode: "inline" });
// Enable chat mode
const systemPrompt = catalog.prompt({ mode: "chat" });
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>Standalone</th>
<th>Inline</th>
<th>Generate</th>
<th>Chat</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: "inline" })'}</code></td>
<td><code>{'catalog.prompt({ mode: "chat" })'}</code></td>
</tr>
<tr>
<td>Stream utility</td>
+1 -26
View File
@@ -309,35 +309,10 @@ const catalog = defineCatalog(schema, {
const prompt = catalog.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" });
// Chat mode prompt
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.
+1 -1
View File
@@ -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)** — Standalone mode for full-page generated UI or inline mode for UI embedded in a conversation.
- **[Generation Modes](/docs/generation-modes)** — Generate standalone UI (playground/builder) or inline UI within a chat conversation.
## Next
@@ -19,11 +19,11 @@ function FormUI() {
);
}
function InlineModeDiagram() {
function ChatModeDiagram() {
return (
<div className="flex flex-col h-full">
<div className="text-xs font-medium text-muted-foreground mb-3 text-center">
Inline Mode
Chat 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 InlineModeDiagram() {
);
}
function StandaloneModeDiagram() {
function GenerateModeDiagram() {
return (
<div className="flex flex-col h-full">
<div className="text-xs font-medium text-muted-foreground mb-3 text-center">
Standalone Mode
Generate 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]">
<InlineModeDiagram />
<ChatModeDiagram />
</div>
<div className="h-[280px]">
<StandaloneModeDiagram />
<GenerateModeDiagram />
</div>
</div>
</div>
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "web",
"version": "0.1.6",
"version": "0.1.5",
"type": "module",
"private": true,
"license": "Apache-2.0",
-9
View File
@@ -1,14 +1,5 @@
# example-chat
## 0.1.6
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/react@0.12.1
- @json-render/shadcn@0.12.1
## 0.1.5
### Patch Changes
+1 -1
View File
@@ -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: "inline",
mode: "chat",
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.",
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-chat",
"version": "0.1.6",
"version": "0.1.5",
"type": "module",
"private": true,
"scripts": {
-9
View File
@@ -1,14 +1,5 @@
# example-dashboard
## 0.1.6
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/codegen@0.12.1
- @json-render/react@0.12.1
## 0.1.5
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-dashboard",
"version": "0.1.6",
"version": "0.1.5",
"type": "module",
"private": true,
"scripts": {
-8
View File
@@ -1,13 +1,5 @@
# example-image
## 0.1.3
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/image@0.12.1
## 0.1.2
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-image",
"version": "0.1.3",
"version": "0.1.2",
"type": "module",
"private": true,
"scripts": {
-10
View File
@@ -1,15 +1,5 @@
# example-mcp
## 0.1.2
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/mcp@0.12.1
- @json-render/react@0.12.1
- @json-render/shadcn@0.12.1
## 0.1.1
### Patch Changes
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "example-mcp",
"version": "0.1.2",
"version": "0.1.1",
"type": "module",
"private": true,
"scripts": {
@@ -16,8 +16,8 @@
"@json-render/shadcn": "workspace:*",
"@modelcontextprotocol/ext-apps": "^1.2.0",
"@modelcontextprotocol/sdk": "^1.27.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react": "19.2.3",
"react-dom": "19.2.3",
"zod": "^4.3.6"
},
"devDependencies": {
-3
View File
@@ -5,9 +5,6 @@ import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [react(), tailwindcss(), viteSingleFile()],
resolve: {
dedupe: ["react", "react-dom"],
},
build: {
outDir: "dist",
emptyOutDir: false,
-9
View File
@@ -1,14 +1,5 @@
# example-no-ai
## 0.1.6
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/react@0.12.1
- @json-render/shadcn@0.12.1
## 0.1.5
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-no-ai",
"version": "0.1.6",
"version": "0.1.5",
"type": "module",
"private": true,
"scripts": {
-8
View File
@@ -1,13 +1,5 @@
# example-react-email
## 0.1.2
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/react-email@0.12.1
## 0.1.1
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-react-email",
"version": "0.1.2",
"version": "0.1.1",
"type": "module",
"private": true,
"scripts": {
-8
View File
@@ -1,13 +1,5 @@
# example-react-native
## 0.1.6
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/react-native@0.12.1
## 0.1.5
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-react-native",
"version": "0.1.6",
"version": "0.1.5",
"private": true,
"main": "expo-router/entry",
"scripts": {
-8
View File
@@ -1,13 +1,5 @@
# example-react-pdf
## 0.1.6
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/react-pdf@0.12.1
## 0.1.5
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-react-pdf",
"version": "0.1.6",
"version": "0.1.5",
"type": "module",
"private": true,
"scripts": {
-8
View File
@@ -1,13 +1,5 @@
# example-remotion
## 0.1.6
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/remotion@0.12.1
## 0.1.5
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-remotion",
"version": "0.1.6",
"version": "0.1.5",
"type": "module",
"private": true,
"scripts": {
+1 -1
View File
@@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts";
import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -1,13 +1,5 @@
# com.example.json-render-demo
## 0.0.7
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/react@0.12.1
## 0.0.6
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "com.example.json-render-demo",
"version": "0.0.7",
"version": "0.0.6",
"description": "Test",
"private": true,
"license": "~~proprietary~~",
@@ -1,13 +1,5 @@
# com.example.json-render-fullpage-demo
## 0.0.7
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/react@0.12.1
## 0.0.6
### Patch Changes
@@ -1,6 +1,6 @@
{
"name": "com.example.json-render-fullpage-demo",
"version": "0.0.7",
"version": "0.0.6",
"description": "Full-page Stripe App example (alpha)",
"private": true,
"license": "~~proprietary~~",
-8
View File
@@ -1,13 +1,5 @@
# svelte-chat
## 0.0.3
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/svelte@0.12.1
## 0.0.2
### Patch Changes
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "svelte-chat",
"private": true,
"version": "0.0.3",
"version": "0.0.2",
"type": "module",
"scripts": {
"dev": "vite dev",
+1 -1
View File
@@ -62,7 +62,7 @@ INPUT COMPONENTS:
- Button: Clickable button. Use on.press to trigger actions.
${explorerCatalog.prompt({
mode: "inline",
mode: "chat",
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.",
-8
View File
@@ -1,13 +1,5 @@
# example-svelte
## 0.1.3
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/svelte@0.12.1
## 0.1.2
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-svelte",
"version": "0.1.3",
"version": "0.1.2",
"private": true,
"type": "module",
"scripts": {
-10
View File
@@ -1,15 +1,5 @@
# vite-renderers
## 0.1.4
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/react@0.12.1
- @json-render/svelte@0.12.1
- @json-render/vue@0.12.1
## 0.1.3
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "vite-renderers",
"version": "0.1.4",
"version": "0.1.3",
"private": true,
"type": "module",
"scripts": {
-8
View File
@@ -1,13 +1,5 @@
# example-vue
## 0.1.4
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/vue@0.12.1
## 0.1.3
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-vue",
"version": "0.1.4",
"version": "0.1.3",
"private": true,
"scripts": {
"predev": "command -v portless >/dev/null 2>&1 || (echo '\\nportless is required but not installed. Run: npm i -g portless\\nSee: https://github.com/vercel-labs/portless\\n' && exit 1)",
-7
View File
@@ -1,12 +1,5 @@
# @json-render/codegen
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/codegen",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "Utilities for generating code from json-render UI trees",
"keywords": [
@@ -15,7 +15,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/codegen"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
-17
View File
@@ -1,22 +1,5 @@
# @json-render/core
## 0.12.1
### Patch Changes
- 54a1ecf: Rename generation modes and fix MCP React duplicate module error.
### Changed:
- **`@json-render/core`** — Renamed generation modes from `"generate"` / `"chat"` to `"standalone"` / `"inline"`. The old names still work but emit a deprecation warning.
### Fixed:
- **`@json-render/mcp`** — Resolved React duplicate module error (`useRef` returning null) by adding `resolve.dedupe` Vite configuration. Added `./build-app-html` export entry point.
### Other:
- Updated `homepage` URLs across all packages to point to `https://json-render.dev`.
- Reorganized skills directory structure for cleaner naming.
- Added skills documentation page to the web app.
## 0.12.0
### Minor Changes
+1 -1
View File
@@ -227,7 +227,7 @@ Schema options:
| `ActionBinding` | Action binding with `action`, `params`, `confirm`, `preventDefault`, etc. |
| `BuiltInAction` | Built-in action definition with `name` and `description` |
### Inline Mode (Mixed Streams)
### Chat Mode (Mixed Streams)
| Export | Purpose |
|--------|---------|
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/core",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "JSON becomes real things. Define your catalog, register your components, let AI generate.",
"keywords": [
@@ -19,7 +19,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/core"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
+3 -35
View File
@@ -257,7 +257,7 @@ describe("catalog.prompt", () => {
expect(prompt).toContain("Keep UIs simple");
});
it("generates inline mode prompt when mode is inline", () => {
it("generates chat mode prompt when mode is chat", () => {
const catalog = defineCatalog(testSchema, {
components: {
Text: {
@@ -268,13 +268,13 @@ describe("catalog.prompt", () => {
},
actions: {},
});
const prompt = catalog.prompt({ mode: "inline" });
const prompt = catalog.prompt({ mode: "chat" });
expect(prompt).toContain("```spec");
expect(prompt).toContain("conversationally");
expect(prompt).toContain("text + JSONL");
});
it("generates standalone mode prompt by default", () => {
it("generates generate mode prompt by default", () => {
const catalog = defineCatalog(testSchema, {
components: {
Text: {
@@ -290,38 +290,6 @@ 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: {
+6 -22
View File
@@ -112,14 +112,11 @@ export interface PromptOptions {
/**
* Output mode for the generated prompt.
*
* - `"standalone"` (default): The LLM should output only JSONL patches (no prose).
* - `"inline"`: The LLM should respond conversationally first, then output JSONL patches.
* - `"generate"` (default): The LLM should output only JSONL patches (no prose).
* - `"chat"`: 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?: "standalone" | "inline" | "generate" | "chat";
mode?: "generate" | "chat";
}
/**
@@ -566,28 +563,15 @@ function generatePrompt<TDef extends SchemaDefinition, TCatalog>(
const {
system = "You are a UI generator that outputs JSON.",
customRules = [],
mode: rawMode = "standalone",
mode = "generate",
} = 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 === "inline") {
if (mode === "chat") {
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.",
@@ -1030,7 +1014,7 @@ Note: state patches appear right after the elements that use them, so the UI fil
// Rules
lines.push("RULES:");
const baseRules =
mode === "inline"
mode === "chat"
? [
"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",
-7
View File
@@ -1,12 +1,5 @@
# @json-render/image
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/image",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "Image renderer for @json-render/core. JSON becomes SVG and PNG images via Satori.",
"keywords": [
@@ -20,7 +20,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/image"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
-7
View File
@@ -1,12 +1,5 @@
# @json-render/jotai
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/jotai",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "Jotai adapter for json-render StateStore",
"keywords": [
@@ -14,7 +14,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/jotai"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
-20
View File
@@ -1,25 +1,5 @@
# @json-render/mcp
## 0.12.1
### Patch Changes
- 54a1ecf: Rename generation modes and fix MCP React duplicate module error.
### Changed:
- **`@json-render/core`** — Renamed generation modes from `"generate"` / `"chat"` to `"standalone"` / `"inline"`. The old names still work but emit a deprecation warning.
### Fixed:
- **`@json-render/mcp`** — Resolved React duplicate module error (`useRef` returning null) by adding `resolve.dedupe` Vite configuration. Added `./build-app-html` export entry point.
### Other:
- Updated `homepage` URLs across all packages to point to `https://json-render.dev`.
- Reorganized skills directory structure for cleaner naming.
- Added skills documentation page to the web app.
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Minor Changes
+2 -7
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/mcp",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "MCP Apps integration for @json-render/core. Serve json-render UIs as interactive MCP Apps in Claude, ChatGPT, Cursor, and VS Code.",
"keywords": [
@@ -22,7 +22,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/mcp"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
@@ -42,11 +42,6 @@
"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": [
-11
View File
@@ -1,11 +0,0 @@
/**
* 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";
+1 -1
View File
@@ -1,7 +1,7 @@
import { defineConfig } from "tsup";
export default defineConfig({
entry: ["src/index.ts", "src/app.ts", "src/build-app-html-entry.ts"],
entry: ["src/index.ts", "src/app.ts"],
format: ["cjs", "esm"],
dts: true,
sourcemap: true,
-7
View File
@@ -1,12 +1,5 @@
# @json-render/react-email
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Minor Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/react-email",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "React Email renderer for @json-render/core. JSON becomes HTML emails.",
"keywords": [
@@ -18,7 +18,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/react-email"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
-7
View File
@@ -1,12 +1,5 @@
# @json-render/react-native
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/react-native",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "React Native renderer for @json-render/core. JSON becomes React Native components.",
"keywords": [
@@ -19,7 +19,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/react-native"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
-7
View File
@@ -1,12 +1,5 @@
# @json-render/react-pdf
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/react-pdf",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "React PDF renderer for @json-render/core. JSON becomes PDF documents.",
"keywords": [
@@ -18,7 +18,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/react-pdf"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
-7
View File
@@ -1,12 +1,5 @@
# @internal/react-state
## 0.8.6
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.8.5
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@internal/react-state",
"version": "0.8.6",
"version": "0.8.5",
"private": true,
"license": "Apache-2.0",
"description": "Shared React state context for json-render renderer packages",
-7
View File
@@ -1,12 +1,5 @@
# @json-render/react
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/react",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "React renderer for @json-render/core. JSON becomes React components.",
"keywords": [
@@ -19,7 +19,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/react"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
-7
View File
@@ -1,12 +1,5 @@
# @json-render/redux
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/redux",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "Redux adapter for json-render StateStore",
"keywords": [
@@ -14,7 +14,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/redux"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
-7
View File
@@ -1,12 +1,5 @@
# @json-render/remotion
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/remotion",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "Remotion renderer for @json-render/core. JSON becomes video compositions.",
"keywords": [
@@ -19,7 +19,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/remotion"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
-8
View File
@@ -1,13 +1,5 @@
# @json-render/shadcn
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
- @json-render/react@0.12.1
## 0.12.0
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/shadcn",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "shadcn/ui component library for @json-render/core. JSON becomes beautiful Tailwind-styled React components.",
"keywords": [
@@ -22,7 +22,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/shadcn"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
-7
View File
@@ -1,12 +1,5 @@
# @json-render/svelte
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Minor Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/svelte",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "Svelte 5 renderer for @json-render/core. JSON becomes Svelte components.",
"keywords": [
@@ -21,7 +21,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/svelte"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
-7
View File
@@ -1,12 +1,5 @@
# @json-render/vue
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/vue",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "Vue renderer for @json-render/core. JSON becomes Vue components.",
"keywords": [
@@ -19,7 +19,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/vue"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
-7
View File
@@ -1,12 +1,5 @@
# @json-render/xstate
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/xstate",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "XState Store adapter for json-render StateStore",
"keywords": [
@@ -15,7 +15,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/xstate"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
-7
View File
@@ -1,12 +1,5 @@
# @json-render/zustand
## 0.12.1
### Patch Changes
- Updated dependencies [54a1ecf]
- @json-render/core@0.12.1
## 0.12.0
### Patch Changes
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/zustand",
"version": "0.12.1",
"version": "0.12.0",
"license": "Apache-2.0",
"description": "Zustand adapter for json-render StateStore",
"keywords": [
@@ -14,7 +14,7 @@
"url": "git+https://github.com/vercel-labs/json-render.git",
"directory": "packages/zustand"
},
"homepage": "https://json-render.dev",
"homepage": "https://github.com/vercel-labs/json-render#readme",
"bugs": {
"url": "https://github.com/vercel-labs/json-render/issues"
},
+48 -9
View File
@@ -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.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
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)
'@modelcontextprotocol/sdk':
specifier: ^1.27.1
version: 1.27.1(zod@4.3.6)
react:
specifier: ^19.0.0
version: 19.2.4
specifier: 19.2.3
version: 19.2.3
react-dom:
specifier: ^19.0.0
version: 19.2.4(react@19.2.4)
specifier: 19.2.3
version: 19.2.3(react@19.2.3)
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(@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)
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)
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(@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)
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)
react:
specifier: ^19.1.0
version: 19.2.4
@@ -15019,6 +15019,14 @@ 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)
@@ -17933,7 +17941,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@8.57.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@9.39.2(jiti@2.6.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)
@@ -18459,7 +18467,7 @@ snapshots:
'@types/node': 22.19.6
optional: true
'@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/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)':
dependencies:
'@eslint-community/regexpp': 4.12.2
'@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@4.9.5)
@@ -23796,6 +23804,32 @@ 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
@@ -25870,6 +25904,11 @@ 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