OpenAI Responses Starter App扩展开发：如何添加新的AI工具和功能

【免费下载链接】openai-responses-starter-appStarter app to build with the OpenAI Responses API项目地址: https://gitcode.com/gh_mirrors/op/openai-responses-starter-app

OpenAI Responses Starter App是一个基于NextJS的AI助手开发框架，它提供了完整的对话界面和工具调用系统。这个强大的AI工具扩展框架让开发者能够轻松地为AI助手添加自定义功能。本文将为您详细介绍如何在这个AI助手开发平台中添加新的AI工具和功能，让您的智能助手更加强大。

🚀 快速入门：理解项目架构

在开始扩展开发之前，让我们先了解OpenAI Responses Starter App的核心架构。这个项目采用模块化设计，主要包含以下几个关键部分：

• 前端界面组件：components/ 目录包含所有UI组件
• API路由处理：app/api/ 目录处理所有后端逻辑
• 工具配置管理：config/ 目录定义可用工具列表
• 工具处理逻辑：lib/tools/ 目录处理工具调用

🔧 添加新AI工具的完整指南

第一步：定义工具配置

首先，您需要在工具配置文件中定义新的AI工具。打开 config/tools-list.ts 文件，这里定义了所有可用的工具列表：

export const toolsList = [ // 现有工具... { name: "get_stock_price", description: "获取指定股票的实时价格", parameters: { symbol: { type: "string", description: "股票代码（如：AAPL、GOOGL）" } } } ];

第二步：创建函数映射

接下来，在 config/functions.ts 文件中添加对应的函数映射：

export const get_stock_price = async ({ symbol }: { symbol: string }) => { const res = await fetch( `/api/functions/get_stock_price?symbol=${symbol}` ).then((res) => res.json()); return res; }; export const functionsMap = { get_weather: get_weather, get_joke: get_joke, get_stock_price: get_stock_price, // 新增映射 };

第三步：实现API端点

创建新的API路由文件 app/api/functions/get_stock_price/route.ts：

export async function GET(request: Request) { try { const { searchParams } = new URL(request.url); const symbol = searchParams.get("symbol"); // 调用股票API获取实时数据 const stockRes = await fetch( `https://api.example.com/stocks/${symbol}` ); if (!stockRes.ok) { throw new Error("Failed to fetch stock data"); } const stockData = await stockRes.json(); return new Response( JSON.stringify({ price: stockData.price, change: stockData.change, symbol: symbol }), { status: 200 } ); } catch (error) { console.error("Error getting stock price:", error); return new Response( JSON.stringify({ error: "获取股票价格失败" }), { status: 500 } ); } }

🎯 工具调用处理机制

核心处理逻辑

工具调用的核心处理逻辑位于 lib/tools/tools-handling.ts 文件中。这个文件负责将AI助手的工具调用请求映射到对应的函数：

import { functionsMap } from "../../config/functions"; type ToolName = keyof typeof functionsMap; export const handleTool = async (toolName: ToolName, parameters: any) => { if (functionsMap[toolName]) { return await functionsMaptoolName; } else { throw new Error(`未知工具: ${toolName}`); } };

工具调用流程

1. 用户输入→ AI助手分析需求
2. 工具选择→ 根据配置选择合适工具
3. 参数提取→ 从对话中提取必要参数
4. 函数调用→ 执行对应的API函数
5. 结果返回→ 将结果返回给AI助手
6. 响应生成→ AI助手生成最终回复

📊 功能面板集成

工具显示配置

在 components/functions-view.tsx 组件中，所有已配置的工具都会自动显示在功能面板中：

export default function FunctionsView() { return ( <div className="flex flex-col space-y-4"> {toolsList.map((tool) => ( <div key={tool.name} className="flex items-start gap-2"> <div className="bg-blue-100 text-blue-500 rounded-md p-1"> <Code size={16} /> </div> <div className="text-zinc-800 font-mono text-sm mt-0.5"> {tool.name}( {tool.parameters && Object.keys(tool.parameters).length > 0 ? getToolArgs(tool.parameters) : ""} ) </div> </div> ))} </div> ); }

面板配置管理

工具面板的配置管理位于 components/tools-panel.tsx，您可以在这里控制各个工具的启用状态：

export default function ContextPanel() { const { fileSearchEnabled, setFileSearchEnabled, webSearchEnabled, setWebSearchEnabled, functionsEnabled, setFunctionsEnabled, // ... 其他工具状态 } = useToolsStore(); return ( <div className="h-full p-8 w-full bg-[#f9f9f9]"> {/* 工具配置面板 */} </div> ); }

🛠️ 高级功能扩展技巧

1. 异步工具处理

对于需要长时间运行的AI工具，建议实现异步处理机制：

export const process_document = async ({ file_id }: { file_id: string }) => { // 启动异步处理 const processRes = await fetch("/api/functions/start_processing", { method: "POST", body: JSON.stringify({ file_id }) }); // 返回处理ID供后续查询 return { process_id: processRes.process_id, status: "processing" }; };

2. 错误处理与重试

在工具实现中添加完善的错误处理机制：

export const get_external_data = async ({ endpoint }: { endpoint: string }) => { try { const response = await fetch(endpoint, { timeout: 10000, // 10秒超时 retry: 3, // 重试3次 }); if (!response.ok) { throw new Error(`API请求失败: ${response.status}`); } return await response.json(); } catch (error) { console.error("获取外部数据失败:", error); return { error: "服务暂时不可用，请稍后重试" }; } };

3. 参数验证与转换

在API端点中添加参数验证逻辑：

export async function GET(request: Request) { const { searchParams } = new URL(request.url); const city = searchParams.get("city"); // 参数验证 if (!city || city.trim().length === 0) { return new Response( JSON.stringify({ error: "城市参数不能为空" }), { status: 400 } ); } // 参数清理 const cleanCity = city.trim().toLowerCase(); // 继续处理... }

🔌 集成第三方服务

Google集成示例

项目已经内置了Google Calendar和Gmail的集成示例，您可以参考 app/api/google/ 目录中的实现：

// 参考现有的Google集成模式 export async function GET(request: Request) { // OAuth认证处理 // API调用封装 // 数据处理和返回 }

文件搜索功能

向量存储和文件搜索功能位于 app/api/vector_stores/ 目录，提供了完整的文件上传和搜索解决方案：

// 创建向量存储 export async function POST(request: Request) { // 处理文件上传 // 创建向量存储索引 // 返回存储ID }

📈 最佳实践建议

1. 工具命名规范

• 使用小写字母和下划线命名工具（如：get_weather、calculate_tax）
• 名称应清晰描述功能，避免歧义
• 保持一致性，遵循现有命名模式

2. 参数设计原则

• 必需参数：核心功能必需的参数
• 可选参数：增强功能的可选参数
• 枚举值：有限选项使用enum定义
• 描述清晰：每个参数都要有明确的描述

3. 性能优化

• 缓存策略：对频繁访问的数据实现缓存
• 批量处理：支持批量操作提高效率
• 异步处理：耗时操作使用异步模式
• 错误降级：主服务失败时提供备用方案

4. 安全考虑

• 输入验证：严格验证所有输入参数
• API密钥管理：安全存储和使用第三方API密钥
• 权限控制：根据用户角色限制工具访问
• 日志记录：记录重要操作和错误信息

🎨 用户界面优化

工具状态显示

在 components/tool-call.tsx 中优化工具调用状态的显示：

export default function ToolCall({ toolCall }: { toolCall: ToolCall }) { return ( <div className="flex flex-col space-y-2"> <div className="flex items-center space-x-2"> <Code size={16} className="text-blue-500" /> <span className="font-mono text-sm">{toolCall.name}</span> </div> {/* 参数和状态显示 */} </div> ); }

响应消息格式化

在 components/message.tsx 中优化AI助手响应的显示格式：

export default function Message({ message }: { message: Message }) { return ( <div className={`message ${message.role}`}> {/* 消息内容格式化 */} {/* 工具调用结果展示 */} </div> ); }

🔍 调试与测试

开发环境配置

1. 环境变量设置：参考 .env.example 配置开发环境
2. 本地开发服务器：使用npm run dev启动开发环境
3. API调试工具：使用浏览器开发者工具监控API调用

工具测试流程

1. 单元测试：为每个工具函数编写测试用例
2. 集成测试：测试工具与AI助手的完整交互
3. 端到端测试：模拟用户完整操作流程

日志与监控

// 在工具处理中添加详细日志 export const handleTool = async (toolName: ToolName, parameters: any) => { console.log(`工具调用开始: ${toolName}`, parameters); try { const result = await functionsMaptoolName; console.log(`工具调用成功: ${toolName}`, result); return result; } catch (error) { console.error(`工具调用失败: ${toolName}`, error); throw error; } };

🚀 部署与维护

生产环境配置

1. 环境变量管理：使用安全的密钥管理服务
2. 性能监控：集成应用性能监控(APM)工具
3. 错误跟踪：设置错误跟踪和告警系统

版本升级策略

1. 向后兼容：确保新版本不影响现有功能
2. 渐进式发布：使用功能开关控制新功能发布
3. 回滚计划：准备快速回滚方案

文档与支持

1. API文档：为每个工具编写详细的API文档
2. 使用示例：提供完整的使用示例和代码片段
3. 故障排除：编写常见问题解决指南

💡 创意工具扩展示例

示例1：智能日历管理

{ name: "schedule_meeting", description: "安排会议并发送邀请", parameters: { title: { type: "string", description: "会议标题" }, participants: { type: "array", description: "参会人员邮箱列表" }, start_time: { type: "string", description: "开始时间" }, duration: { type: "number", description: "会议时长（分钟）" } } }

示例2：数据分析工具

{ name: "analyze_data", description: "分析数据集并生成报告", parameters: { dataset_id: { type: "string", description: "数据集ID" }, analysis_type: { type: "string", enum: ["statistical", "trend", "correlation"], description: "分析类型" }, timeframe: { type: "string", description: "时间范围" } } }

示例3：自动化工作流

{ name: "automate_workflow", description: "执行自动化工作流程", parameters: { workflow_id: { type: "string", description: "工作流ID" }, inputs: { type: "object", description: "输入参数" }, trigger_type: { type: "string", enum: ["manual", "scheduled", "event"], description: "触发类型" } } }

通过本文的指南，您已经掌握了在OpenAI Responses Starter App中添加新AI工具和功能的完整流程。这个灵活的AI工具扩展框架让您能够快速构建功能丰富的智能助手应用。无论是简单的工具调用还是复杂的功能集成，这个平台都提供了完善的解决方案。现在就开始扩展您的AI助手，创造更智能的对话体验吧！ 🚀

【免费下载链接】openai-responses-starter-appStarter app to build with the OpenAI Responses API项目地址: https://gitcode.com/gh_mirrors/op/openai-responses-starter-app