ChatGPTアプリビルダー は何をしますか？
mcp-useを使用してインタラクティブなウィジェットを持つChatGPTアプリを構築します。ゼロ設定でのウィジェット開発、自動登録、組み込みのReactフックを提供します。
このアプリは2人のユーザーが同時に利用します：人間とChatGPT LLMです。彼らはウィジェットを通じて協調作業します。人間はウィジェットを操作し、LLMはその状態を参照します。ウィジェットは共有インターフェースです。
コーディング前の準備
- 何を構築するか明確にする → discover.md：新しいアプリを開始するとき、アイデアを検証するとき、機能のスコープを決めるとき
- ツールとウィジェットの設計 → architecture.md：UIが必要なものとツールのみでよいものを判断するとき、UXフローを設計するとき
セットアップ
- スキャフォールドと実行 → setup.md：新しいプロジェクトを作成するとき、開発サーバーを起動するとき、ChatGPT/Claudeに接続するとき
実装
- サーバーハンドラーとウィジェット作成 → server-and-widgets.md：server.tool()にウィジェットを追加するとき、widget()ヘルパーを使用するとき、Reactウィジェットファイルを作成するとき
- ウィジェットの状態とLLMコンテキスト → state-and-context.md：状態を永続化するとき、ウィジェットからLLMをトリガーするとき、エフェメラルデータと永続データを管理するとき
- 表示モード、テーマ、レイアウト → ui-guidelines.md：インライン/全画面/PiPに適応するとき、テーマ、デバイス、ロケールを処理するとき
- コンポーネントAPI → components-api.md：McpUseProvider、Image、ErrorBoundary、useWidgetを使用するとき
- CSPとメタデータ → csp-and-metadata.md：外部ドメインを設定するとき、デュアルプロトコルメタデータを管理するとき
- 高度なパターン → widget-patterns.md：ツール呼び出し、状態、テーマ設定を伴う複雑なウィジェットを構築するとき
クイックリファレンス
// サーバー
import { MCPServer, widget, text, object } from "mcp-use/server";
server.tool({ name: "...", schema: z.object({...}), widget: { name: "ウィジェット名" } },
async (input) => widget({ props: {...}, output: text("...") })
);
// ウィジェット (resources/widget-name.tsx)
import { McpUseProvider, useWidget, type WidgetMetadata } from "mcp-use/react";
export const widgetMetadata: WidgetMetadata = { description: "...", props: z.object({...}) };
export default function MyWidget() {
const { props, isPending, callTool, sendFollowUpMessage, state, setState, theme } = useWidget();
if (isPending) return <McpUseProvider autoSize><div>読み込み中...</div></McpUseProvider>;
return <McpUseProvider autoSize><div>{/* UI */}</div></McpUseProvider>;
}