Claude代理模板
 
用于构建AI代理的Next.js模板 Vercel AI SDK, Claude代理SDK,以及自定义MCP工具。
概述
该模板为构建由Claude Haiku 4.5支持的AI代理提供了完整的基础。它演示了如何创建自定义工具、与外部服务集成以及构建具有实时流的交互式聊天界面。
基于:
- Vercel AI SDK推理入门 -基础Next.js+AI SDK设置
- Claude代理SDK -多回合代理工作流程和MCP工具
特性
- 多轮代理工作流 -基于Claude Agent SDK构建,用于执行复杂任务
- 自定义MCP工具 -易于扩展的工具系统,具有类型安全性
- 实时流媒体 -服务器发送事件以获得响应式用户体验
- 现代堆栈 -Next.js 15、React 19、顺风CSS、TypeScript
- 内置工具 -文件操作、bash命令、web搜索等
快速开始
先决条件
- Node.js 18+
- pnpm(或npm/yarn)
- 以下之一用于身份验证:
- 无烟煤API密钥(在这里买一个),或 - 克劳德代码CLI(安装导轨)
设置
- 克隆并安装依赖项
git clone
cd claude-agent-template
pnpm install- 身份验证设置(选择一个)
选项A:使用API密钥(建议用于生产)
复制 .env.example 到 .env 并添加您的API密钥:
cp .env.example .env
# Edit .env and add: ANTHROPIC_API_KEY=your_api_key_here选项B:使用Claude代码CLI
如果您安装了Claude Code CLI并进行了身份验证:
claude auth login
# No .env file needed - SDK will use CLI authentication- 运行开发服务器
pnpm dev打开http://localhost:3000在您的浏览器中。
建筑
系统概述
代理系统基于三个核心组件构建:
- 代理API (
app/api/agent/route.ts)-处理请求、管理对话状态和流式传输响应 - MCP工具 (
lib/mcp-tools/)-扩展代理功能的自定义工具 - 聊天界面 (
components/agent-chat.tsx)-具有实时流媒体的交互式界面
消息流
User Input
↓
POST /api/agent → query({ prompt, options })
↓
Agent executes tools across multiple turns
↓
Server-Sent Events stream to client
↓
UI displays tool usage and results代理配置
- 模型:克劳德·海库4.5(
claude-haiku-4-5) - 内置工具:读、写、Bash、Grep、Glob、WebSearch
- 自定义工具:通过MCP(模型上下文协议)定义
- 最大转弯数:每次对话10次
- 流媒体:是(服务器发送事件)
开发工作流程
此模板旨在与无缝协作 克劳德代码,利用自定义斜线命令和专用子代理来简化您的开发过程。
Git工作树管理
包括 wt 该脚本简化了为要素分支创建独立工作树的过程,允许您在不切换上下文的情况下同时处理多个要素:
./wt feature/new-feature # Create worktree for new branch
./wt feature/existing-branch # Create worktree for existing branch脚本会自动执行以下操作:
- 在中创建新的git工作树
../feature/new-feature - 副本
.env文件到新工作台 - 安装依赖项
pnpm install
工作流程示例:
# Working on main branch
./wt feature/add-auth # Create worktree for auth feature
cd ../feature/add-auth # Switch to new worktree
pnpm dev # Start dev server for this branch使用子代理进行GitHub问题管理
此模板包括 自定义斜线命令 (/solve-github-issue)这展示了Claude Code强大的子代理架构:
子代理:
- github问题规划器 -分析GitHub问题并制定全面的实施计划
- github问题管理器 -管理问题生命周期(更新、测试结果、关闭)
使用克劳德代码:
/solve-github-issue 42 # Analyze and plan implementation for issue #42自动化工作流程:
- 计划子代理 分析问题和相关背景
- 创建包含文件位置和步骤的详细实施计划
- 您审查并实施解决方案
- 经理分代理人 自动用测试结果更新问题并将其关闭
此工作流程展示了如何使用Claude Code的自定义斜线命令和专用子代理构建智能开发自动化。
看 .claude/commands/solve-github-issue.md 和 .claude/agents/ 了解实施细节。
文档
资源
贡献
捐款指南:
- 保持工具专注和简单
- 文件参数清晰
- 处理所有错误情况
- 编写描述性系统提示
- 使用各种输入进行测试
许可证
麻省理工学院
