Generative UI のためのフレームワーク OpenUI

npx @openuidev/cli@latest create --name my-openui-app

echo "OPENAI_API_KEY=sk-your-key-here" > .env

npm run dev

src
├── app
│   ├── api
│   │   └── chat
│   │       └── route.ts # OpenAI API を呼び出すバックエンドエンドポイント
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx # チャット UI の実装
└── library.ts # コンポーネントライブラリ

"use client";
import "@openuidev/react-ui/components.css";
import "@openuidev/react-ui/styles/index.css";
import {
  openAIMessageFormat,
  openAIReadableStreamAdapter,
} from "@openuidev/react-headless";
import { FullScreen } from "@openuidev/react-ui";
// あらかじめ定義されたコンポーネントライブラリとシステムプロンプト
import {
  openuiLibrary,
  openuiPromptOptions,
} from "@openuidev/react-ui/genui-lib";
 
// コンポーネントライブラリからシステムプロンプトを生成
const systemPrompt = openuiLibrary.prompt(openuiPromptOptions);
 
export default function Home() {
  return (
    <div className="h-screen w-screen overflow-hidden">
      <FullScreen
        // ユーザーの入力に応じてチャットの応答を生成するための関数
        // ここではバックエンドの `/api/chat` エンドポイントを呼び出している
        processMessage={async ({ messages, abortController }) => {
          return fetch("/api/chat", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              systemPrompt,
              messages: openAIMessageFormat.toApi(messages),
            }),
            signal: abortController.signal,
          });
        }}
        // OpenAI API からのストリーミングレスポンスを処理するためのアダプター
        streamProtocol={openAIReadableStreamAdapter()}
        // レンダラにコンポーネントライブラリを渡す
        componentLibrary={openuiLibrary}
        agentName="OpenUI Chat"
      />
    </div>
  );
}

あなたは openui-lang を使用して応答する AI アシスタントです。あなたの応答全体は、有効な openui-lang コードでなければなりません。Markdown、説明文、その他の形式は一切使用せず、openui-lang のみを出力してください。
 
## 構文ルール
 
1. 各文は 1 行ごとに記述します: `identifier = Expression`
2. `root` はエントリーポイントです — すべてのプログラムで `root = Stack(...)` を定義する必要があります
3. Expression として使用できるのは、文字列 (`"..."`)、数値、真偽値 (`true` / `false`)、`null`、配列 (`[...]`)、オブジェクト (`{...}`)、またはコンポーネント呼び出し `TypeName(arg1, arg2, ...)` です
4. 可読性のために参照を使用してください: まず `name = ...` を定義し、その後で `name` を参照します
5. `root` を除くすべての変数は、少なくとも 1 つ以上の他の変数から参照されていなければなりません。参照されていない変数は自動的に削除され、表示されません。定義した変数は必ず親の `children` や `items` 配列に含めてください
6. 引数は位置指定です（名前ではなく順序が重要です）。`Stack([children], "row", "l")` のように記述してください。`Stack([children], direction: "row", gap: "l")` のようなコロン構文はサポートされておらず、正しく動作しません
7. オプション引数は末尾から省略できます
 
* 文字列はダブルクォーテーションを使用し、必要に応じてバックスラッシュでエスケープしてください

### Tables
Table(columns: Col[]) — Data table — column-oriented. Each Col holds its own data array.
Col(label: string, data: any, type?: "string" | "number" | "action") — Column definition — holds label + data array
- Table is COLUMN-oriented: Table([Col("Label", dataArray), Col("Count", countArray, "number")]). Use array pluck for data: data.rows.fieldName
- Col data can be component arrays for styled cells: Col("Status", @Each(data.rows, "item", Tag(item.status, null, "sm", item.status == "open" ? "success" : "danger")))
- Row actions: Col("Actions", @Each(data.rows, "t", Button("Edit", Action([@Set($showEdit, true), @Set($editId, t.id)]))))
- Sortable: sorted = @Sort(data.rows, $sortField, "desc"). Bind $sortField to Select. Use sorted.fieldName for Col data
- Searchable: filtered = @Filter(data.rows, "title", "contains", $search). Bind $search to Input
- Chain sort + filter: filtered = @Filter(...) then sorted = @Sort(filtered, ...) — use sorted for both Table and Charts
- Empty state: @Count(data.rows) > 0 ? Table([...]) : TextContent("No data yet")

## Examples
 
Example 1 — Table (column-oriented):
 
root = Stack([title, tbl])
title = TextContent("Top Languages", "large-heavy")
tbl = Table([Col("Language", langs), Col("Users (M)", users), Col("Year", years)])
langs = ["Python", "JavaScript", "Java", "TypeScript", "Go"]
users = [15.7, 14.2, 12.1, 8.5, 5.2]
years = [1991, 1995, 1995, 2012, 2009]
 
Example 2 — Bar chart:
 
root = Stack([title, chart])
title = TextContent("Q4 Revenue", "large-heavy")
chart = BarChart(labels, [s1, s2], "grouped")
labels = ["Oct", "Nov", "Dec"]
s1 = Series("Product A", [120, 150, 180])
s2 = Series("Product B", [90, 110, 140])

## 最終検証
 
完了前に、出力を確認して次の点を検証してください。
 
1. 最適なストリーミングのため、`root = Stack(...)` が最初の行になっていること。
2. 参照されているすべての名前が定義されていること。`root` 以外で定義されているすべての名前が、`root` から到達可能であること。
 
* グリッド状のレイアウトには、`direction` を `"row"`、`wrap` を `true` にした `Stack` を使用してください。大きな余白を意図的に作りたい場合を除き、`justify="between"` は避けてください。
* フォームでは、各フィールドにつき 1 つの `FormControl` 参照を定義し、コントロールが段階的にストリーミングされるようにしてください。
* フォームでは、必ず 2 番目の `Form` 引数として `Buttons(...)` アクションを指定してください: `Form(name, buttons, fields)`。
* `Form` の中に `Form` をネストしないでください。
* フォーム送信後にデフォルト値へ戻す場合は、`@Set($var, "")` ではなく、`@Reset($var1, $var2)` を使用してください。
* 複数クエリの更新: `Action([@Run(mutation), @Run(query1), @Run(query2), @Reset(...)])`
* `$variables` はリアクティブです。`Select` や `@Set` で変更すると、それを参照しているすべての `Queries` と式が再評価されます。
* 三項演算子による表示 / 非表示パターンを独自に作る前に、既存のコンポーネント（`Tabs`、`Accordion`、`Modal`）を使用してください。

<FullScreen
  processMessage={async ({ messages, abortController }) => {
    return fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        systemPrompt,
        messages: openAIMessageFormat.toApi(messages),
      }),
      signal: abortController.signal,
    });
  }}
  streamProtocol={openAIReadableStreamAdapter()}
  componentLibrary={openuiLibrary}
  agentName="OpenUI Chat"
/>

import { NextRequest } from "next/server";
import OpenAI from "openai";
 
const client = new OpenAI();
 
export async function POST(req: NextRequest) {
  try {
    const { messages, systemPrompt } = await req.json();
 
    const response = await client.chat.completions.create({
      model: "gpt-5.2",
      messages: [{ role: "system", content: systemPrompt }, ...messages],
      stream: true,
    });
 
    return new Response(response.toReadableStream(), {
      headers: {
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache, no-transform",
        Connection: "keep-alive",
      },
    });
  } catch (err) {
    console.error(err);
    const message = err instanceof Error ? err.message : "Unknown error";
    return new Response(JSON.stringify({ error: message }), {
      status: 500,
      headers: { "Content-Type": "application/json" },
    });
  }
}

root = Stack([headerCard, listCard, actionsCard], "column", "l")
headerCard = Card([header])
header = CardHeader("Todoリスト", "今日やることを整理しましょう")
 
listCard = Card([listHeader, todoTable])
listHeader = CardHeader("一覧", "優先度・期限・状態を確認できます")
todoTable = Table([colTitle, colPriority, colDue, colStatus])
colTitle = Col("タスク", todoTitles, "string")
colPriority = Col("優先度", todoPriorities, "string")
colDue = Col("期限", todoDues, "string")
colStatus = Col("状態", todoStatuses, "string")
 
actionsCard = Card([actionsHeader, actionsButtons])
actionsHeader = CardHeader("操作", "追加や完了処理をしたい場合は指示してください")
actionsButtons = Buttons([btnAdd, btnDone, btnShowOnlyOpen], "row")
btnAdd = Button("Todoを追加", Action([@ToAssistant("Todoを追加したいです。内容・期限・優先度（低/中/高）を聞いて。")]), "primary")
btnDone = Button("完了にする", Action([@ToAssistant("完了にしたいTodoの番号（またはタスク名）を聞いて。")]), "secondary")
btnShowOnlyOpen = Button("未完了だけ表示", Action([@ToAssistant("未完了のTodoだけに絞り込んで表示して。")]), "tertiary")
 
todoTitles = ["買い物：牛乳・卵", "メール返信：A社見積", "運動：30分ウォーキング", "資料作成：週次レポート", "部屋の片付け：デスク周り"]
todoPriorities = ["中", "高", "低", "高", "中"]
todoDues = ["今日", "今日 17:00", "今週中", "明日 10:00", "今週末"]
todoStatuses = ["未完了", "未完了", "未完了", "未完了", "完了"]

root = Stack([headerCard, listCard, actionsCard], "column", "l")

headerCard = Card([header])
header = CardHeader("Todoリスト", "今日やることを整理しましょう")

listCard = Card([listHeader, todoTable])
listHeader = CardHeader("一覧", "優先度・期限・状態を確認できます")
todoTable = Table([colTitle, colPriority, colDue, colStatus])
colTitle = Col("タスク", todoTitles, "string")
colPriority = Col("優先度", todoPriorities, "string")
colDue = Col("期限", todoDues, "string")
colStatus = Col("状態", todoStatuses, "string")

todoTitles = ["買い物：牛乳・卵", "メール返信：A社見積", "運動：30分ウォーキング", "資料作成：週次レポート", "部屋の片付け：デスク周り"]
todoPriorities = ["中", "高", "低", "高", "中"]
todoDues = ["今日", "今日 17:00", "今週中", "明日 10:00", "今週末"]
todoStatuses = ["未完了", "未完了", "未完了", "未完了", "完了"]

actionsCard = Card([actionsHeader, actionsButtons])
actionsHeader = CardHeader("操作", "追加や完了処理をしたい場合は指示してください")
actionsButtons = Buttons([btnAdd, btnDone, btnShowOnlyOpen], "row")
btnAdd = Button("Todoを追加", Action([@ToAssistant("Todoを追加したいです。内容・期限・優先度（低/中/高）を聞いて。")]), "primary")
btnDone = Button("完了にする", Action([@ToAssistant("完了にしたいTodoの番号（またはタスク名）を聞いて。")]), "secondary")
btnShowOnlyOpen = Button("未完了だけ表示", Action([@ToAssistant("未完了のTodoだけに絞り込んで表示して。")]), "tertiary")

$search = ""
searchInput = Input("検索", $search)

import { defineComponent, createLibrary } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
const Alert = defineComponent({
  name: "Alert",
  description: "ユーザーに重要な情報を伝えるアラートコンポーネント",
  props: z.object({
    message: z.string().describe("アラートのメッセージ"),
    type: z.enum(["success", "error", "warning"]).describe("アラートの種類"),
  }),
  // 型安全に Props を受け取る
  component: ({ props }) => {
    const { message, type } = props;
    const bgColor =
      type === "success"
        ? "bg-green-100"
        : type === "error"
          ? "bg-red-100"
          : "bg-yellow-100";
    const textColor =
      type === "success"
        ? "text-green-800"
        : type === "error"
          ? "text-red-800"
          : "text-yellow-800";
    return (
      <div className={`${bgColor} ${textColor} p-4 rounded`}>{message}</div>
    );
  },
});

import { defineComponent, createLibrary } from "@openuidev/react-lang";
import { openuiLibrary } from "@openuidev/react-ui/genui-lib";
 
export const myLibrary = createLibrary({
  root: openuiLibrary.root ?? "Stack",
  componentGroups: openuiLibrary.componentGroups,
  components: [...Object.values(openuiLibrary.components), Alert],
});

npx @openuidev/cli@latest generate ./src/library.tsx --out system-prompt.txt

...
 
### Other
Alert(message: string, type: "success" | "error" | "warning") — ユーザーに重要な情報を伝えるアラートコンポーネント

export const myLibrary = createLibrary({
  root: "Stack",
  componentGroups: [
    {
      name: "Forms",
      components: ["Form", "FormControl", "Input", "TextArea", "Select"],
      notes: [
        "- Define EACH FormControl as its own reference for progressive streaming.",
        "- NEVER nest Form inside Form.",
        "- Form requires explicit buttons: Form(name, buttons, fields).",
      ],
    },
  ],
  components: [...Object.values(openuiLibrary.components), Alert],
});

import fs from "fs/promises";
 
export async function POST(req: NextRequest) {
  try {
    const { messages } = await req.json();
    const systemPrompt = await fs.readFile("system-prompt.txt", "utf-8");
    const response = await client.chat.completions.create({
      model: "gpt-5.2",
      messages: [{ role: "system", content: systemPrompt }, ...messages],
      stream: true,
    });
// ...
  } catch (err) {
    // ...
  }
}

import { myLibrary } from "../library";
 
<FullScreen
  // ...
  componentLibrary={myLibrary}
  // ...
/>

root = Stack([alertCard], "column", "m")
alertCard = Card([alertHeader, alertBody], "card")
alertHeader = CardHeader("注意", "操作を続ける前にご確認ください")
alertBody = Stack([alertMessage], "column", "s")
alertMessage = Alert("重要な変更を行う前に、入力内容と対象データを再確認してください。問題がなければそのまま進めてください。", "warning")

"use client";
import "@openuidev/react-ui/styles/index.css";
import {
  ChatProvider,
  openAIMessageFormat,
  openAIReadableStreamAdapter,
  useThread,
} from "@openuidev/react-headless";
import { Renderer } from "@openuidev/react-lang";
import { myLibrary } from "@/library";
import { useState, useRef, useEffect } from "react";
 
function ChatUI() {
  // useThread フックを使用してチャットの状態を管理
  const { messages, processMessage, cancelMessage, isRunning } = useThread();
  const [input, setInput] = useState("");
  const bottomRef = useRef<HTMLDivElement>(null);
 
  // メッセージが更新されるたびにスクロールするためのエフェクト
  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);
 
  // フォームが送信されたときの処理
  // processMessage 関数を呼び出して、ユーザーの入力をバックエンドに送信する
  const handleSend = () => {
    const text = input.trim();
    if (!text || isRunning) return;
    setInput("");
    processMessage({ role: "user", content: text });
  };
 
  return (
    <div className="flex flex-col h-screen bg-slate-50">
      <header className="flex items-center justify-between bg-white border-b border-slate-200 px-6 py-3 shadow-sm shrink-0">
        Generative UI
      </header>
 
      {/* メッセージの配列にチャット履歴が含まれているため、これをマッピングして UI をレンダリングする */}
      <div className="flex-1 overflow-y-auto px-4 py-8">
        {messages.length === 0 && (
          <div className="flex flex-col items-center justify-center h-full gap-3 pb-16">
            <p className="text-slate-400 text-sm">
              メッセージを送って会話を始めましょう
            </p>
          </div>
        )}
 
        <div className="max-w-3xl mx-auto space-y-5">
          {/* ユーザーのメッセージならそのままテキストを表示する */}
          {messages.map((message) => {
            if (message.role === "user") {
              const text =
                typeof message.content === "string"
                  ? message.content
                  : message.content
                      .filter(
                        (c): c is { type: "text"; text: string } =>
                          c.type === "text",
                      )
                      .map((c) => c.text)
                      .join("");
              return (
                <div key={message.id} className="flex justify-end">
                  <div className="bg-indigo-600 text-white rounded-2xl rounded-br-md px-4 py-2.5 max-w-[72%] text-sm leading-relaxed shadow-sm whitespace-pre-wrap">
                    {text}
                  </div>
                </div>
              );
            }
 
            // AI のメッセージなら <Renderer> コンポーネントを使用して OpenUI 言語をレンダリングする
            if (message.role === "assistant") {
              return (
                <div key={message.id} className="flex gap-2.5 items-start">
                  <div className="w-7 h-7 rounded-lg bg-indigo-600 flex items-center justify-center text-white text-xs font-bold shrink-0 mt-0.5 select-none">
                    AI
                  </div>
                  <div className="bg-white border border-slate-200 rounded-2xl rounded-tl-md px-4 py-3 max-w-[85%] shadow-sm text-sm text-slate-700 leading-relaxed">
                    <Renderer
                      response={message.content ?? null}
                      library={myLibrary}
                      isStreaming={isRunning}
                    />
                  </div>
                </div>
              );
            }
 
            return null;
          })}
        </div>
 
        <div ref={bottomRef} />
      </div>
 
      {/* 入力フォーム */}
      <div className="bg-white border-t border-slate-200 px-4 py-3 shrink-0">
        <div className="flex gap-2 items-end max-w-3xl mx-auto">
          <textarea
            className="flex-1 border border-slate-200 rounded-xl px-4 py-2.5 text-sm text-slate-800 placeholder:text-slate-400 resize-none focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 min-h-11 max-h-32 transition-shadow disabled:bg-slate-50 disabled:text-slate-400"
            rows={1}
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                handleSend();
              }
            }}
            placeholder="メッセージを入力… (Shift+Enter で改行)"
            disabled={isRunning}
          />
          {/* isRunning は AI の応答が進行中かどうかを表すブール値で、これに応じて送信ボタンを停止ボタンに切り替える */}
          {isRunning ? (
            <button
              onClick={cancelMessage}
              className="shrink-0 border border-red-200 bg-red-50 hover:bg-red-100 text-red-600 rounded-xl px-4 py-2.5 text-sm font-medium transition-colors"
            >
              停止
            </button>
          ) : (
            <button
              onClick={handleSend}
              disabled={!input.trim()}
              className="shrink-0 bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-200 disabled:text-slate-400 text-white rounded-xl px-4 py-2.5 text-sm font-semibold transition-colors"
            >
              送信
            </button>
          )}
        </div>
      </div>
    </div>
  );
}
 
export default function Home() {
  // <ChatProvider> コンポーネントを使用してチャットの状態管理とバックエンドとのやり取りを提供する
  return (
    <ChatProvider
      processMessage={async ({ messages, abortController }) => {
        return fetch("/api/chat", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            messages: openAIMessageFormat.toApi(messages),
          }),
          signal: abortController.signal,
        });
      }}
      // OpenAI のストリーミングレスポンスを OpenUI が処理できる形式に変換するアダプターを指定する
      streamProtocol={openAIReadableStreamAdapter()}
    >
      <ChatUI />
    </ChatProvider>
  );
}

<Renderer
  // ...
  onAction={(action) => {
    // continue_conversation は @ToAssistant アクションが実行されたときのアクションタイプで、ユーザーの入力を AI に送るために使用される
    if (action.type === "continue_conversation") {
      // @ToAssistant アクションが実行されたときの処理
      const userMessage = action.message;
      processMessage({ role: "user", content: userMessage });
    }
    // その他のアクション...
  }}
/>

btnAdd = Button("Todoを追加", Action([@ToAssistant("Todoを追加したいです。内容・期限・優先度（低/中/高）を聞いて。")]), "primary")

data = Query("list_todos", {}, {items: []})

addTodo = Mutation("add_todo", {title: $title})
submitButton = Button("Todo を追加", Action([@Run(addTodo), @Run(todos), @Reset($title)]), "primary")

<Renderer
  // ...
  toolProvider={{
    list_todos: async () => {
      const response = await fetch("/api/todos");
      const data = await response.json();
      return data;
    },
    add_todo: async ({ title }) => {
      await fetch("/api/todos", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ title }),
      });
    },
  }}
/>

import { myLibrary } from "./library";
import { openuiPromptOptions } from "@openuidev/react-ui/genui-lib";
 
export const systemPrompt = myLibrary.prompt({
  ...openuiPromptOptions,
  tools: [
    {
      name: "list_todos",
      description: "現在の Todo リストを取得するツール",
      inputSchema: {},
      outputSchema: {
        items: {
          type: "array",
          description: "Todo アイテムのリスト",
          items: {
            type: "object",
            properties: {
              id: { type: "number", description: "Todo の ID" },
              title: { type: "string", description: "Todo のタイトル" },
              completed: { type: "boolean", description: "Todo の完了状態" },
              createdAt: { type: "string", description: "Todo の作成日時" },
            },
          },
        },
      },
      annotations: {
        readOnlyHint: true,
      },
    },
    {
      name: "add_todo",
      description: "Todo リストに新しい項目を追加するツール",
      inputSchema: {
        title: {
          type: "string",
          description: "Todo のタイトル",
        },
      },
      outputSchema: {},
    },
  ],
  toolExamples: [
    "todos = Query('list_todos', {}, {items: []})",
    "addTodo = Mutation('add_todo', {title: $title})",
  ],
  toolCalls: true,
});
 

"use client";
import { systemPrompt } from "../system-prompt";
 
// ...
 
export default function Home() {
  return (
    <ChatProvider
      processMessage={async ({ messages, abortController }) => {
        return fetch("/api/chat", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            messages: openAIMessageFormat.toApi(messages),
            // API ボディにシステムプロンプトを追加
            systemPrompt: systemPrompt,
          }),
          signal: abortController.signal,
        });
      }}
      streamProtocol={openAIReadableStreamAdapter()}
    >
      <ChatUI />
    </ChatProvider>
  );
}

import { NextRequest, NextResponse } from "next/server";
 
type Todo = {
  id: number;
  title: string;
  completed: boolean;
  createdAt: string;
};
 
const todos: Todo[] = [
  {
    id: 1,
    title: "牛乳を買う",
    completed: false,
    createdAt: "2026-05-16T09:00:00.000Z",
  },
  {
    id: 2,
    title: "レポートを提出する",
    completed: true,
    createdAt: "2026-05-16T09:05:00.000Z",
  },
  {
    id: 3,
    title: "歯医者の予約を入れる",
    completed: false,
    createdAt: "2026-05-16T09:10:00.000Z",
  },
];
let nextId = 4;
 
export function GET() {
  console.log("[GET /api/todos] Returning todos:", todos);
  return NextResponse.json({ items: todos });
}
 
export async function POST(req: NextRequest) {
  console.log("[POST /api/todos] Received request");
  const body = await req.json().catch(() => null);
 
  if (!body || typeof body.title !== "string" || !body.title.trim()) {
    return NextResponse.json(
      { error: "title は必須の文字列です" },
      { status: 400 },
    );
  }
 
  const todo: Todo = {
    id: nextId++,
    title: body.title.trim(),
    completed: false,
    createdAt: new Date().toISOString(),
  };
 
  todos.push(todo);
  return NextResponse.json(todo, { status: 201 });
}

root = Stack([headerCard, contentRow, addStatus], "column", "l")
 
$title = ""
todos = Query("list_todos", {}, {items: []})
addTodo = Mutation("add_todo", {title: $title})
 
headerCard = Card([headerTitle, headerDescription], "clear")
headerTitle = TextContent("TODO リスト", "large-heavy")
headerDescription = TextContent("現在のTODOを確認し、新しい項目を追加できます。")
 
contentRow = Stack([listCard, formCard], "row", "l", "stretch", "start", true)
listCard = Card([listHeader, summaryRow, todoTable])
listHeader = CardHeader("現在のTODO", "登録済みのタスク一覧")
summaryRow = Stack([totalCard, doneCard, remainingCard], "row", "m", "stretch", "start", true)
totalCard = Card([totalLabel, totalValue], "sunk")
totalLabel = TextContent("合計", "small")
totalValue = TextContent("" + @Count(todos.items), "large-heavy")
 
doneCard = Card([doneLabel, doneValue], "sunk")
doneLabel = TextContent("完了", "small")
doneValue = TextContent("" + @Count(@Filter(todos.items, "completed", "==", true)), "large-heavy")
remainingCard = Card([remainingLabel, remainingValue], "sunk")
remainingLabel = TextContent("未完了", "small")
remainingValue = TextContent("" + (@Count(todos.items) - @Count(@Filter(todos.items, "completed", "==", true))), "large-heavy")
 
todoTable = @Count(todos.items) > 0 ? Table([todoTitleCol, todoStatusCol]) : emptyTodos
todoTitleCol = Col("TODO", todos.items.title)
todoStatusCol = Col("状態", @Each(todos.items, "todo", Tag(todo.completed == true ? "完了" : "未完了", null, "sm", todo.completed == true ? "success" : "warning")))
emptyTodos = TextContent("TODO はまだありません。フォームから追加してください。")
 
formCard = Card([formHeader, addForm])
formHeader = CardHeader("TODOを追加", "新しいタスクを入力してください")
addForm = Form("addTodo", formButtons, [titleField])
titleField = FormControl("タイトル", Input("title", "例: 明日の資料を準備する", "text", {required: true, minLength: 1, maxLength: 120}, $title), "1〜120文字で入力してください。")
formButtons = Buttons([addButton])
addButton = Button("追加", Action([@Run(addTodo), @Run(todos), @Reset($title)]), "primary")
 
addStatus = addTodo.status == "loading" ? Callout("info", "追加中", "TODOを追加しています。") : addTodo.status == "success" ? Callout("success", "追加しました", "TODOリストを更新しました。") : addTodo.status == "error" ? Callout("error", "追加に失敗しました", addTodo.error) : null

$title = ""
todos = Query("list_todos", {}, {items: []})
addTodo = Mutation("add_todo", {title: $title})

totalCard = Card([totalLabel, totalValue], "sunk")
totalLabel = TextContent("合計", "small")
totalValue = TextContent("" + @Count(todos.items), "large-heavy")

doneCard = Card([doneLabel, doneValue], "sunk")
doneLabel = TextContent("完了", "small")
doneValue = TextContent("" + @Count(@Filter(todos.items, "completed", "==", true)), "large-heavy")

todoTable = @Count(todos.items) > 0 ? Table([todoTitleCol, todoStatusCol]) : emptyTodos
todoTitleCol = Col("TODO", todos.items.title)
todoStatusCol = Col("状態", @Each(todos.items, "todo", Tag(todo.completed == true ? "完了" : "未完了", null, "sm", todo.completed == true ? "success" : "warning")))
emptyTodos = TextContent("TODO はまだありません。フォームから追加してください。")

titleField = FormControl("タイトル", Input("title", "例: 明日の資料を準備する", "text", {required: true, minLength: 1, maxLength: 120}, $title), "1〜120文字で入力してください。")
formButtons = Buttons([addButton])
addButton = Button("追加", Action([@Run(addTodo), @Run(todos), @Reset($title)]), "primary")

addStatus = addTodo.status == "loading" ? Callout("info", "追加中", "TODOを追加しています。") : addTodo.status == "success" ? Callout("success", "追加しました", "TODOリストを更新しました。") : addTodo.status == "error" ? Callout("error", "追加に失敗しました", addTodo.error) : null