Help us improve
Share bugs, ideas, or general feedback.
From openui-forge
Builds generative UI apps with OpenUI and the OpenAI SDK. Provides streaming chat completions via an OpenAI-compatible backend, with adapter code for Next.js App Router.
npx claudepluginhub othmanadi/openui-forgeHow this skill is triggered — by the user, by Claude, or both
Slash command
/openui-forge:openui-forge-openaiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build generative UI apps with OpenUI + OpenAI SDK. One backend, one adapter, streaming out of the box.
Applies 10 pre-set color/font themes or generates custom ones for slides, documents, reports, and HTML landing pages.
Share bugs, ideas, or general feedback.
Build generative UI apps with OpenUI + OpenAI SDK. One backend, one adapter, streaming out of the box.
OPENAI_API_KEY environment variable setOPENAI_BASE_URL to route via an OpenAI-compatible provider (Gemini, OpenRouter, xAI, DeepSeek, etc.) without code changesOPENAI_MODEL to pin a specific model (defaults to gpt-5.5)npm install @openuidev/react-ui @openuidev/react-headless @openuidev/react-lang lucide-react zod openai
app/layout.tsx:import "@openuidev/react-ui/components.css";
npm run dev and testapp/api/chat/route.tsimport { openuiChatLibrary } from "@openuidev/react-ui/genui-lib";
import OpenAI from "openai";
const client = new OpenAI();
export async function POST(req: Request) {
const { messages } = await req.json();
const systemPrompt = openuiChatLibrary.prompt({
preamble: "You are a helpful assistant that generates interactive UIs.",
additionalRules: ["Always use Stack as root when combining multiple components."],
});
const response = await client.chat.completions.create({
model: process.env.OPENAI_MODEL ?? "gpt-5.5",
stream: true,
messages: [{ role: "system", content: systemPrompt }, ...messages],
});
// response.toReadableStream() produces NDJSON (one JSON object per line, no SSE `data:` prefix).
// Pair with openAIReadableStreamAdapter() on the frontend.
return new Response(response.toReadableStream(), {
headers: { "Content-Type": "application/x-ndjson" },
});
}
app/chat/page.tsx"use client";
import { FullScreen } from "@openuidev/react-ui";
import { openuiChatLibrary } from "@openuidev/react-ui/genui-lib";
import {
openAIReadableStreamAdapter,
openAIMessageFormat,
} from "@openuidev/react-headless";
export default function ChatPage() {
return (
<FullScreen
componentLibrary={openuiChatLibrary}
streamProtocol={openAIReadableStreamAdapter()}
messageFormat={openAIMessageFormat}
apiUrl="/api/chat"
/>
);
}
import { defineComponent } from "@openuidev/react-lang";
import { z } from "zod";
export const MyCard = defineComponent({
name: "MyCard",
description: "A card displaying a title and body text",
props: z.object({
title: z.string().describe("The card heading"),
body: z.string().describe("The card body content"),
}),
component: ({ props }) => (
<div style={{ border: "1px solid #ddd", borderRadius: 8, padding: 16 }}>
<h3>{props.title}</h3>
<p>{props.body}</p>
</div>
),
});
Add to a custom library with createLibrary([MyCard, ...others]) or use the built-in openuiLibrary.
For runtime generation (used in the route above), call library.prompt(). For a static file:
npx @openuidev/cli generate ./src/lib/library.ts --out src/generated/system-prompt.txt
OPENAI_API_KEY is set in .env.localresponse.toReadableStream() with application/x-ndjson content typestreamProtocol={openAIReadableStreamAdapter()} and openAIMessageFormatcomponentLibrary={openuiChatLibrary} prop passed to FullScreen^18.3.1 || ^19.0.0)| Error | Cause | Fix |
|---|---|---|
| 401 from OpenAI | Missing or invalid API key | Set OPENAI_API_KEY in .env.local |
| Stream hangs | Missing toReadableStream() call | Ensure stream: true and return response.toReadableStream() |
| Components render as text | Library not passed to FullScreen | Add componentLibrary={openuiChatLibrary} prop |
| Blank screen | CSS not imported | Add @openuidev/react-ui/components.css to root layout |
| Nothing renders, no error | Wrong prop name (adapter is silently ignored) | Rename to streamProtocol and call the adapter as a function: streamProtocol={openAIReadableStreamAdapter()} |
| Partial render then stop | Model finished mid-output | Check token limits, increase max_tokens if needed |