当AI成为日常工作流程的核心，ChatGPT已成为数十亿用户的自然工具。然而直到现在，ChatGPT的重点主要是"对话"，而不是"交互"。
如果你能在ChatGPT内直接与应用互动——比如预订酒店、设计演示文稿——全部在同一个界面中完成，会怎样？
这正是ChatGPT Apps带来的能力。
引言
借助全新的Apps SDK，开发者现在可以构建运行在ChatGPT内部的交互式、具备上下文能力的应用。
ChatGPT (MCP client) Our app (MCP server) =ChatGPT5 >
Dooi Shop find me woo jackets made from an Italian wool and cashmere blend. 步骤1:ChatGPT 触发我们的应用 步骤2:我们的 MCP 工具返回小部件+数据 u Dooi Shop Searched the best jackets “isonrpc : “2.0” “method”: “returnProduct”, “params”:{ ame: “Doljacket, “material”: “Cashmere”, “price”:190 } “id”:1
★★★ Cashmere - wool jacket Fabulous - 2,493 reviews Outer Mens Cashmere( Italian ★★★ 步骤3:内容将返回给ChatGPT
在本指南中，你将学习如何构建属于你的ChatGPT应用。我将带你走过每一步代码，并解释其工作原理。
完成后，你将拥有一个可在ChatGPT环境中动态展示组件（widgets）的可运行应用。
第0步：ChatGPT应用如何工作？
一个ChatGPT应用，本质上就是一个提供widget的MCP服务器。
ChatGPT应用的工作流程
如上图所示，流程从ChatGPT根据用户消息触发应用开始。用户的消息会被发送到应用。
应用随后会选择最匹配用户意图的MCP工具。例如，当用户提出"我想买衣服”，应用可能会选择名为ShowClothes的工具。
工具会返回widget与数据：
- widget：显示在ChatGPT内的组件
- data：ChatGPT可使用的结构化响应
第1步：安装FastApps
了解ChatGPT应用如何工作后，我们将开始实践。
我们会使用FastApps —— 一个开源框架，用于构建ChatGPT应用。
首先使用uv安装FastApps：
uv tool install fastapps
uv tool install --upgrade fastapps # 更新到最新版本
第2步：初始化新应用
安装后，运行以下命令快速开始：
fastapps init my-app
cd my-app
fastapps dev
你会看到一个通过Cloudflare Tunnel自动生成的公共URL。
你的MCP服务器将暴露在/mcp路径下。
示例：
https://your-public-url.trycloudflare.com/mcp
第3步：测试你的应用
方案A：使用MCPJam Inspector测试
连接并测试你的服务器：
npx @mcpjam/inspector@latest
然后输入你的公共URL + /mcp。
方案B：在ChatGPT内测试
- 打开ChatGPT → 设置 → Connectors
- 添加公共URL +
/mcp - 选择「No authentication」
第4步：创建更多Widgets
你可以随时新增组件：
fastapps create additional-widget
第5步：编辑你的Widget
你只需要修改两个目录：
1️⃣ server/tools/ — MCP工具
定义应用的逻辑与交互结构。
示例：
# server/tools/my_widget_tool.py
from fastapps import BaseWidget, Field, ConfigDict
from pydantic import BaseModel
from typing import Dict, Any
class MyWidgetInput(BaseModel):
model_config = ConfigDict(populate_by_name=True)
name: str = Field(default="World")
class MyWidgetTool(BaseWidget):
identifier = "my-widget"
title = "My Widget"
input_schema = MyWidgetInput
invoking = "Processing..."
invoked = "Done!"
widget_csp = {
"connect_domains": [],
"resource_domains": []
}
async def execute(self, input_data: MyWidgetInput) -> Dict[str, Any]:
return {
"name": input_data.name,
"message": f"Hello, {input_data.name}!"
}
每个MCP工具都包含定义其特性的属性。可通过下方表格了解其含义。如需更多细节，请参考FastApps文档。
必需类属性
| 属性 | 类型 | 描述 | 示例 |
|---|---|---|---|
| identifier | str | 唯一widget标识，必须与widgets/目录下文件夹同名 | "greeting" |
| title | str | 在ChatGPT界面展示的人类可读名称 | "Show Greeting Widget" |
| input_schema | Type[BaseModel] | 输入参数定义，ChatGPT通过JSON schema判断如何调用工具 | GreetingInput |
| invoking | str | 调用执行时显示的提示 | "Preparing your greeting…" |
| invoked | str | 执行结束时显示的提示 | "Greeting ready!" |
可选属性
| 属性 | 类型 | 描述 | 示例 |
|---|---|---|---|
| description | str | 说明工具用途，便于模型判断何时调用 | "Display a personalized greeting widget" |
| widget_accessible | bool | 组件是否可从前端触发工具 | True |
2️⃣ widgets/ — 前端UI（React）
该目录包含在ChatGPT显示的UI组件。
示例：
// widgets/my-widget/index.jsx
import React from 'react';
import { useWidgetProps } from 'fastapps';
export default function MyWidget() {
const props = useWidgetProps();
return (
<div style={{
padding: '40px',
textAlign: 'center',
background: '#4A90E2',
color: 'white',
borderRadius: '12px'
}}>
<h1>{props.message}</h1>
<p>Welcome, {props.name}!</p>
</div>
);
}
Widgets是React组件，并可通过特殊hooks与ChatGPT交互。如需更多细节，请参考FastApps文档。
第6步：部署你的ChatGPT应用
你可以直接通过CLI部署：
fastapps cloud deploy
按照CLI指引逐步操作即可。
结语
在本教程中，你学习了如何使用FastApps框架创建ChatGPT应用。
你已搭建了应用核心——MCP服务器，创建了widgets和工具，并通过CLI将其部署公开。
如果你想进一步了解从零开始构建应用的流程，可以参考这篇构建指南[Build Your First ChatGPT App](构建指南 Build Your First ChatGPT App)，其中包含从Apps SDK到部署的完整步骤示例。
这一结构非常简单却功能强大。
只需少量代码，你就能构建一个可供所有人使用的完整ChatGPT应用。
