chatgpt-app-builder

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

ChatGPT App Builder

ChatGPT 应用构建工具

Build ChatGPT apps with interactive widgets using mcp-use. Zero-config widget development with automatic registration and built-in React hooks.

The app is consumed by two users at once: the human and the ChatGPT LLM. They collaborate through the widget -- the human interacts with it, the LLM sees its state. The widget is your shared surface.

使用 mcp-use 构建带有交互组件的 ChatGPT 应用。零配置组件开发，支持自动注册和内置 React Hooks。

该应用同时服务于两类用户：人类用户和ChatGPT LLM。他们通过组件协作——人类用户与组件交互，LLM 可查看组件状态。组件是双方的共享交互界面。

Before You Code

编码前准备

Clarify what to build → discover.md: when starting a new app, validating an idea, or scoping features
Design tools and widgets → architecture.md: when deciding what needs UI vs tools-only, designing UX flows

明确构建目标 → discover.md：适用于启动新应用、验证想法或规划功能范围时
设计工具与组件 → architecture.md：适用于决定哪些功能需要 UI、哪些仅需工具，以及设计 UX 流程时

Setup

环境设置

Scaffold and run → setup.md: when creating a new project, starting dev server, connecting to ChatGPT/Claude

项目初始化与运行 → setup.md：适用于创建新项目、启动开发服务器、连接 ChatGPT/Claude 时

Implementation

开发实现

Server handlers + widget creation → server-and-widgets.md: when writing server.tool() with widgets, widget() helper, React widget files
Widget state and LLM context → state-and-context.md: when persisting state, triggering LLM from widget, managing ephemeral vs persistent data
Display modes, theme, layout → ui-guidelines.md: when adapting to inline/fullscreen/PiP, handling theme, device, locale
Component API → components-api.md: when using McpUseProvider, Image, ErrorBoundary, useWidget
CSP and metadata → csp-and-metadata.md: when configuring external domains, dual-protocol metadata
Advanced patterns → widget-patterns.md: when building complex widgets with tool calls, state, theming

服务器处理器 + 组件创建 → 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：适用于构建包含工具调用、状态管理、主题定制的复杂组件时

Quick Reference

快速参考

typescript

// Server
import { MCPServer, widget, text, object } from "mcp-use/server";
server.tool({ name: "...", schema: z.object({...}), widget: { name: "widget-name" } },
  async (input) => widget({ props: {...}, output: text("...") })
);

// Widget (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>Loading...</div></McpUseProvider>;
  return <McpUseProvider autoSize><div>{/* UI */}</div></McpUseProvider>;
}

typescript

// Server
import { MCPServer, widget, text, object } from "mcp-use/server";
server.tool({ name: "...", schema: z.object({...}), widget: { name: "widget-name" } },
  async (input) => widget({ props: {...}, output: text("...") })
);

// Widget (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>Loading...</div></McpUseProvider>;
  return <McpUseProvider autoSize><div>{/* UI */}</div></McpUseProvider>;
}