How to install yaml
npx skills add https://github.com/vercel-labs/json-render --skill yamlFull instructions (SKILL.md)
Source of truth, from vercel-labs/json-render.
name: yaml description: YAML wire format for json-render with streaming parser, prompt generation, and AI SDK transform. Use when working with @json-render/yaml, YAML-based spec streaming, yaml-spec/yaml-edit fences, or YAML prompt generation.
@json-render/yaml
YAML wire format for @json-render/core. Progressive rendering and surgical edits via streaming YAML.
Key Concepts
- YAML wire format: Alternative to JSONL that uses code fences (
yaml-spec,yaml-edit,yaml-patch,diff) - Streaming parser: Incrementally parses YAML, emits JSON Patch operations via diffing
- Edit modes: Patch (RFC 6902), merge (RFC 7396), and unified diff
- AI SDK transform:
TransformStreamthat converts YAML fences into json-render patches
Generating YAML Prompts
import { yamlPrompt } from "@json-render/yaml";
import { catalog } from "./catalog";
// Standalone mode (LLM outputs only YAML)
const systemPrompt = yamlPrompt(catalog, {
mode: "standalone",
editModes: ["merge"],
customRules: ["Always use dark theme"],
});
// Inline mode (LLM responds conversationally, wraps YAML in fences)
const chatPrompt = yamlPrompt(catalog, { mode: "inline" });
Options:
system(string) — Custom system message intromode("standalone" | "inline") — Output mode, default "standalone"customRules(string[]) — Additional rules appended to prompteditModes(EditMode[]) — Edit modes to document, default ["merge"]
AI SDK Transform
Use pipeYamlRender as a drop-in replacement for pipeJsonRender:
import { pipeYamlRender } from "@json-render/yaml";
import { createUIMessageStream, createUIMessageStreamResponse } from "ai";
const stream = createUIMessageStream({
execute: async ({ writer }) => {
writer.merge(pipeYamlRender(result.toUIMessageStream()));
},
});
return createUIMessageStreamResponse({ stream });
For multi-turn edits, pass the previous spec:
pipeYamlRender(result.toUIMessageStream(), {
previousSpec: currentSpec,
});
The transform recognizes four fence types:
yaml-spec— Full spec, parsed progressively line-by-lineyaml-edit— Partial YAML deep-merged with current spec (RFC 7396)yaml-patch— RFC 6902 JSON Patch linesdiff— Unified diff applied to serialized spec
Streaming Parser (Low-Level)
import { createYamlStreamCompiler } from "@json-render/yaml";
const compiler = createYamlStreamCompiler<Spec>();
// Feed chunks as they arrive from any source
const { result, newPatches } = compiler.push("root: main\n");
compiler.push("elements:\n main:\n type: Card\n");
// Flush remaining data at end of stream
const { result: final } = compiler.flush();
// Reset for next stream (optionally with initial state)
compiler.reset({ root: "main", elements: {} });
Methods: push(chunk), flush(), getResult(), getPatches(), reset(initial?)
Edit Modes (from @json-render/core)
The YAML package uses the universal edit mode system from core:
import { buildEditInstructions, buildEditUserPrompt } from "@json-render/core";
import type { EditMode } from "@json-render/core";
// Generate edit instructions for YAML format
const instructions = buildEditInstructions({ modes: ["merge", "patch"] }, "yaml");
// Build user prompt with current spec context
const userPrompt = buildEditUserPrompt({
prompt: "Change the title to Dashboard",
currentSpec: spec,
config: { modes: ["merge"] },
format: "yaml",
serializer: (s) => yamlStringify(s, { indent: 2 }).trimEnd(),
});
Fence Constants
For custom parsing, use the exported constants:
import {
YAML_SPEC_FENCE, // "```yaml-spec"
YAML_EDIT_FENCE, // "```yaml-edit"
YAML_PATCH_FENCE, // "```yaml-patch"
DIFF_FENCE, // "```diff"
FENCE_CLOSE, // "```"
} from "@json-render/yaml";
Key Exports
| Export | Description |
|---|---|
yamlPrompt | Generate YAML system prompt from catalog |
createYamlTransform | AI SDK TransformStream for YAML fences |
pipeYamlRender | Convenience pipe wrapper (replaces pipeJsonRender) |
createYamlStreamCompiler | Streaming YAML parser with patch emission |
YAML_SPEC_FENCE | Fence constant for yaml-spec |
YAML_EDIT_FENCE | Fence constant for yaml-edit |
YAML_PATCH_FENCE | Fence constant for yaml-patch |
DIFF_FENCE | Fence constant for diff |
FENCE_CLOSE | Fence close constant |
diffToPatches | Re-export: object diff to JSON Patch |
deepMergeSpec | Re-export: RFC 7396 deep merge |
Related skills
More from vercel-labs/json-render and the wider catalog.

zustand
Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.

codegen
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.

core
Core schema, catalog, and AI prompt generation for json-render specs.

devtools
Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include "add devtools", "debug json-render", "inspect the spec", "why is this element not rendering", "see the state at runtime", or requests to tap streams / capture action logs for `@json-render/devtools`.

next-browser
CLI that exposes Next.js component trees, props, hooks, PPR shells, and network data as shell commands for agents.

opensrc
Fetch dependency source code to give AI agents deeper implementation context. Use when the agent needs to understand how a library works internally, read source code for a package, fetch implementation details for a dependency, or explore how an npm/PyPI/crates.io package is built. Triggers include "fetch source for", "read the source of", "how does X work internally", "get the implementation of", "opensrc path", or any task requiring access to dependency source code beyond types and docs.