openui-forge-openai

OpenUI generative UI with OpenAI SDK backend. Streaming chat completions with gpt-5.5 (or any current OpenAI-compatible model).

インストールへ移動

リポジトリ: OthmanAdi/openui-forge
ソースの最終更新活動: 2026年6月20日 02:24
検出された SKILL.md の言語: 英語
スター: 22
フォーク: 0

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

検索に戻るインストールに戻る

OPENAI_MODEL

OPENAI_BASE_URL

OPENAI_API_BASE

Provider	`OPENAI_BASE_URL`	Example `OPENAI_MODEL`
Gemini	`https://generativelanguage.googleapis.com/v1beta/openai/`	`gemini-3.5-flash`
OpenRouter	`https://openrouter.ai/api/v1`	`anthropic/claude-opus-4.7`
xAI (Grok)	`https://api.x.ai/v1`	`grok-4.3`
DeepSeek	`https://api.deepseek.com`	`deepseek-v4-pro`
Groq	`https://api.groq.com/openai/v1`	`llama-3.3-70b-versatile`
Mistral	`https://api.mistral.ai/v1`	`mistral-large-latest`
Together	`https://api.together.ai/v1`	`openai/gpt-oss-20b`
Fireworks	`https://api.fireworks.ai/inference/v1`	`accounts/fireworks/models/glm-5`
Ollama (local)	`http://localhost:11434/v1/`	`llama3.3` (any placeholder API key)
LM Studio (local)	`http://localhost:1234/v1`	loaded model id (any placeholder API key)

npm install @openuidev/react-ui @openuidev/react-headless @openuidev/react-lang lucide-react zod openai

import "@openuidev/react-ui/components.css";

import { 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" },
  });
}

"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>
  ),
});

npx @openuidev/cli generate ./src/lib/library.ts --out src/generated/system-prompt.txt

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