ChatGPT应用构建器：零配置小组件开发，支持React Hooks，快速构建AI协作应用

chatgpt-app-builder by mcp-use/mcp-use

6,300 周安装量

9,500 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/mcp-use/mcp-use --skill chatgpt-app-builder

AI/机器学习开发生产力

🇨🇳中文介绍

ChatGPT 应用构建器

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

该应用由两位用户同时使用：人类用户和ChatGPT 大语言模型。他们通过小组件进行协作——人类用户与之交互，大语言模型则能看到其状态。小组件是你们的共享界面。

开始编码前

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

设置

脚手架搭建与运行 → setup.md：适用于创建新项目、启动开发服务器、连接到 ChatGPT/Claude 时

实现

服务器处理器与小组件创建 → server-and-widgets.md：适用于编写带小组件的 server.tool()、widget() 辅助函数、React 小组件文件时
小组件状态与大语言模型上下文 → state-and-context.md：适用于持久化状态、从小组件触发大语言模型、管理临时数据与持久数据时
显示模式、主题、布局 → ui-guidelines.md：适用于适配内联/全屏/画中画模式、处理主题、设备和区域设置时

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

685,800 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

240,900 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

193,000 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

125,300 周安装

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

// 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>;
}

🇺🇸English

ChatGPT App Builder

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.

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

Setup

Scaffold and run → setup.md: when creating a new project, starting dev server, connecting to 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

Quick Reference

// 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>;
}

Weekly Installs

6.3K

Repository

mcp-use/mcp-use

GitHub Stars

9.5K

First Seen

Feb 2, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex6.3K

cursor6.3K

claude-code6.3K

gemini-cli154

opencode154

github-copilot151