OpenUI

openui/
├── packages/
│   ├── react-lang/      # コアランタイム（パーサー・レンダラー・プロンプト生成）
│   ├── react-headless/  # ヘッドレスチャット状態 & ストリーミングアダプター
│   ├── react-ui/        # 組み込みチャットレイアウト & コンポーネントライブラリ
│   └── openui-cli/      # スキャフォールド & プロンプト生成 CLI
├── skills/
│   └── openui/          # AI コーディングアシスタント向け Agent Skill
├── examples/
│   └── openui-chat/     # 動作サンプル（Next.js）
├── docs/                # openui.com ドキュメントサイト
└── benchmarks/          # トークン効率ベンチマーク

npx @openuidev/cli@latest create --name genui-chat-app
cd genui-chat-app
echo "OPENAI_API_KEY=sk-your-key-here" > .env
npm run dev

import { FullScreen } from "@openuidev/react-ui";
import "@openuidev/react-ui/components.css";

function App() {
  return (
    <FullScreen
      apiUrl="/api/chat"
      threadApiUrl="/api/threads"
    />
  );
}

import { defineComponent } from "@openuidev/react-lang";
import { z } from "zod";

const Greeting = defineComponent({
  name: "Greeting",
  description: "挨拶メッセージを表示",
  props: z.object({
    name: z.string().describe("対象の名前"),
    mood: z.enum(["happy", "excited"]).optional(),
  }),
  component: ({ name, mood }) => (
    <div className={mood === "excited" ? "text-xl font-bold" : ""}>
      こんにちは、{name}！
    </div>
  ),
});

import { createLibrary } from "@openuidev/react-lang";

const library = createLibrary({ components: [Greeting, Card, Table] });

// モデルへ渡すシステムプロンプト
const systemPrompt = library.prompt({
  preamble: "あなたは親切なアシスタントです。",
  examples: ["<Greeting name='Alice' mood='happy' />"],
});

import { Renderer } from "@openuidev/react-lang";

function AssistantMessage({ response, isStreaming }) {
  return (
    <Renderer
      response={response}
      library={library}
      isStreaming={isStreaming}
      onAction={(event) => console.log("Action:", event)}
    />
  );
}

import { ChatProvider } from "@openuidev/react-headless";
import { openAIAdapter } from "@openuidev/react-headless";

function App() {
  return (
    <ChatProvider
      apiUrl="/api/chat"
      streamProtocol={openAIAdapter}  // OpenAI SDK のストリームに対応
    >
      <YourChatUI />
    </ChatProvider>
  );
}

// チャット状態の参照
import { useThread } from "@openuidev/react-headless";

function ChatMessages() {
  const { messages, isRunning, processMessage } = useThread();
  // ...
}

# システムプロンプトを標準出力へ
npx @openuidev/cli generate ./src/library.ts

# JSON Schema をファイルへ書き出し
npx @openuidev/cli generate ./src/library.ts --json-schema --out ./artifacts/schema.json