openai/openai-responses-starter-app

# Responses 入门应用 [](LICENSE)   本代码库包含一个基于 [Responses API](https://platform.openai.com/docs/api-reference/responses) 构建的 NextJS 入门应用。 它利用了内置工具（[web search](https://platform.openai.com/docs/guides/tools-web-search?api-mode=responses) 和 [file search](https://platform.openai.com/docs/guides/tools-file-search)）并实现了一个支持多轮对话处理的聊天界面。 功能： - 多轮对话处理 - 流式响应与工具调用 - Function calling - 显示注解 - Web search 工具配置 - 为 file search 工具创建 Vector store 并上传文件 - MCP server 配置 - 通过第一方 connector 集成 Google Calendar 和 Gmail 此应用旨在作为一个起点，用于构建可根据您的需求进行自定义的对话助手。 ## 如何使用 1. **设置 OpenAI API：** - 如果您是 OpenAI API 的新手，请[注册一个账号](https://platform.openai.com/signup)。 - 按照[快速入门](https://platform.openai.com/docs/quickstart)指南获取您的 API key。 2. **设置 OpenAI API key：** 有两种选项： - [在系统中全局](https://platform.openai.com/docs/libraries#create-and-export-an-api-key)设置 `OPENAI_API_KEY` 环境变量 - 在项目中设置 `OPENAI_API_KEY` 环境变量：在项目根目录下创建一个 `.env` 文件并添加以下行（参考 `.env.example`）： OPENAI_API_KEY= 3. **克隆代码库：** git clone https://github.com/openai/openai-responses-starter-app.git 4. **安装依赖：** 在项目根目录下运行： npm install 5. **运行应用：** npm run dev 应用将在 [`http://localhost:3000`](http://localhost:3000) 上可用。 ## 工具 此入门应用展示了如何使用内置工具、MCP server 和第一方 connector 与 Responses API 进行交互。 您可以直接从 UI 中配置这些工具，但某些工具需要额外的设置（例如 Google OAuth）。 ### 内置工具 我们有几个开箱即用的工具可与 Responses API 一起使用。此演示应用实现并允许您直接从 UI 配置以下工具： - File search，允许模型访问 vector store 中的文件 - Web search，允许模型搜索网络 - Code interpreter，允许模型运行 Python 代码来解决问题 其他内置工具（如 computer use 或图像生成）未在此演示应用中实现。 ### MCP server UI 允许您配置一个公共的 MCP server 以便与 Responses API 一起使用。如果您想使用需要身份验证的 MCP server，请随时更新 `lib/tools/tools.ts` 来添加您自己的逻辑。您可以将 Google connector 集成作为如何使用 access token 的示例。 ### 自定义函数 此演示应用附带了示例函数 `get_weather` 和 `get_joke`。您可以将自己的函数添加到 `config/functions.ts` 文件中。 ### Google 集成 此应用展示了如何使用 OpenAI 的 1P connector 与 Google 集成，并让助手读取您的日历和电子邮件收件箱。该应用会在您的浏览器中执行安全的 OAuth 流程，按 session 存储 token，并使用您的 access token 将 Google connector 附加到 Responses API 工具列表中。 要测试此说明，请阅读以下说明以设置 Google OAuth 2.0 客户端并启用 Google Calendar 和 Gmail API。 在[我们的文档](https://platform.openai.com/docs/guides/tools-connectors-mcp#connectors)中了解更多关于可用的 1P connector 的信息。 #### 设置（Google OAuth） 1. 在您的 Google Cloud 项目中为 Web 应用程序创建一个 OAuth 2.0 客户端（有关使用 OAuth 2.0 访问 Google API 的信息，请参阅[文档](https://developers.google.com/identity/protocols/oauth2)）。 - 在 Google Cloud 中，转到 APIs & Services > Google Auth platform > Clients > Create client > **Web**。 - 添加您的 redirect URI：`http://localhost:3000/api/google/callback`。 - 复制 client ID。创建并复制一个 client secret。 2. 在同一个项目中启用 API： - Google Calendar API - Gmail API 3. 在 Google Auth Platform 中配置数据访问 scope，以满足您的需求。此演示使用： - `openid` - `email` - `profile` - `https://www.googleapis.com/auth/calendar.events` - `https://www.googleapis.com/auth/gmail.modify` 4. 在项目根目录下创建 `.env.local`（您可以复制 `.env.example`）并添加： GOOGLE_CLIENT_ID="your-google-client-id" GOOGLE_CLIENT_SECRET="your-google-client-secret" GOOGLE_REDIRECT_URI="http://localhost:3000/api/google/callback" ## 演示流程 ### 尝试 Web search + Code interpreter 在 UI 中启用 Web search 和 Code interpreter 后，询问模型： 模型应该使用 Web search 工具获取温度，然后使用 Code interpreter 工具生成图表并显示在 UI 中。 ### 尝试 File search - 保存 PDF 文件，例如博客文章（您可以使用[这篇](https://openai.com/index/new-tools-and-features-in-the-responses-api/)，然后打印页面并选择“保存为 PDF”选项） - 创建一个新的 Vector store 并上传 PDF 文件 - 启用 File search 并向模型提出一个可以通过 PDF 文件回答的问题，例如： - 模型应使用 File search 工具在 PDF 文件中查找相关信息，然后显示响应 ### 尝试 Google 集成 - 在 UI 中点击“Connect Google Integration”并完成 OAuth 流程；您将被重定向回来并附带 `connected=1`。 - 要求助手执行任务——例如，“Show my next five calendar events,”或“Summarize the most recent wirecutter emails”。 - 该应用将使用您的 access token 将 Google Calendar 和 Gmail connector（通过 MCP）附加到工具列表中，并将结果流式传输回 UI。 - 要使 OAuth session 失效，请清除应用 cookie（Chrome DevTools > Application > Storage > Cookies）。如果您只清除 `gc_access_token`，应用将使用 `gc_refresh_token` 进行刷新，而无需重新进行身份验证。 ## 贡献 欢迎您打开 issue 或提交 PR 来改进此应用，但请注意，我们可能不会审查所有建议。 ## 许可证 此项目基于 MIT License 授权。有关详细信息，请参阅 LICENSE 文件。

标签：AI应用, MCP, OpenAI API, Petitpotam, 对话机器人, 自动化攻击, 项目模板