yaml

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…

INSTALLATION
npx skills add https://github.com/vercel-labs/json-render --skill yaml
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$27

// 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 intro

- `mode` ("standalone" | "inline") — Output mode, default "standalone"

- `customRules` (string[]) — Additional rules appended to prompt

- `editModes` (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-line

- `yaml-edit` — Partial YAML deep-merged with current spec (RFC 7396)

- `yaml-patch` — RFC 6902 JSON Patch lines

- `diff` — 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";

BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card