System Prompts

The system prompt tells the LLM how to output valid OpenUI Lang. Generate a serialized library spec at build time, then pass that spec to generateSystemPrompt in your backend.

1. CLI (recommended for most setups)

openui generate emits two artifacts from the same library: a prebuilt prompt and a serialized library spec. Use the spec with generateSystemPrompt; retain the prompt only for static or legacy integrations.

pnpx @openuidev/cli@latest generate ./src/library.ts

Write to a file:

pnpx @openuidev/cli@latest generate ./src/library.ts --out system-prompt.txt

This writes the prompt to system-prompt.txt and the spec to system-prompt.spec.json. The .spec.json file is the input to generateSystemPrompt; --json-schema produces a JSON Schema for other tooling, not the library spec used to build the prompt.

The CLI auto-detects exported PromptOptions (examples, rules) alongside your library. Use --prompt-options <name> to pick a specific export.

2. generateSystemPrompt (recommended backend integration)

For backends that need dynamic prompts — different tools, preambles, or feature flags per request — use generateSystemPrompt from @openuidev/lang-core. It has no React dependency, so it works in any Node, Edge, or serverless backend. Import the spec emitted by the command above and build the prompt at runtime:

import { generateSystemPrompt, type LibrarySpec } from "@openuidev/lang-core";
import librarySpec from "./generated/system-prompt.spec.json";

const systemPrompt = generateSystemPrompt({
  library: librarySpec as LibrarySpec,

  promptOptions: {
    // Tool descriptions — so the LLM knows what tools exist
    tools: myToolSpecs,

    // Examples showing how to use your tools with Query/Mutation
    toolExamples: [`tickets = Query("list_tickets", {}, {rows: []})\n...`],

    // Feature flags
    toolCalls: true, // Enable Query(), Mutation(), @Run (default: true if tools provided)
    bindings: true, // Enable $variables, @Set, @Reset (default: true if toolCalls)
    editMode: true, // Enable incremental editing (LLM outputs patches, not full regen)
    inlineMode: true, // Enable text + code responses (LLM can answer questions without code)

    // Custom instructions
    preamble: "You build dashboards using openui-lang.",
    additionalRules: ['Use @Reset after form submit, not @Set($var, "")'],
  },
});

Built-in functions (@Count, @Filter, @Sort, @Each, etc.) are automatically included when either toolCalls or bindings is enabled. For static UI libraries without data fetching, they are omitted to keep the prompt concise.

library.prompt() (frontend shorthand)

If you're generating prompts client-side or in a Next.js route that already imports your library:

import { openuiLibrary, openuiPromptOptions } from "@openuidev/react-ui";

const systemPrompt = openuiLibrary.prompt(openuiPromptOptions);

This is convenient but imports React components. Prefer the generated spec plus generateSystemPrompt for backend routes.

What gets generated

The generated prompt includes:

• Syntax rules and expression types
• Component signatures (from your registered components)
• Built-in function reference (@Count, @Filter, @Sort, etc.) — only when toolCalls or bindings enabled
• Query/Mutation/Action workflow (if toolCalls enabled)
• $variable and reactive binding rules (if bindings enabled)
• Tool descriptions and tool examples (if tools provided)
• Edit mode instructions (if editMode enabled)
• Inline mode instructions (if inlineMode enabled)
• Hoisting/streaming rules
• Your optional examples and rules

Backend usage example

import OpenAI from "openai";
import { generateSystemPrompt, type LibrarySpec } from "@openuidev/lang-core";
import librarySpec from "./generated/system-prompt.spec.json";

const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const systemPrompt = generateSystemPrompt({
  library: librarySpec as LibrarySpec,
  promptOptions: { preamble: "You are a helpful assistant." },
});

export async function POST(req: Request) {
  const { messages } = await req.json();

  const completion = await client.chat.completions.create({
    model: "gpt-5.4-mini",
    stream: true,
    messages: [{ role: "system", content: systemPrompt }, ...messages],
  });

  return new Response(completion.toReadableStream(), {
    headers: { "Content-Type": "text/event-stream" },
  });
}