AI代理开发模板

一个基于Next.js的模板,用于构建具有多轮工作流、自定义工具和实时流式传输功能的AI代理。

  • by Koomook
  • TypeScript
  • 本地部署
  • 24 星标
  • 更新于
在 GitHub 查看 Koomook/claude-agent-template

使用说明

Claude代理模板

用于构建AI代理的Next.js模板 Vercel AI SDK, Claude代理SDK,以及自定义MCP工具。

概述

该模板为构建由Claude Haiku 4.5支持的AI代理提供了完整的基础。它演示了如何创建自定义工具、与外部服务集成以及构建具有实时流的交互式聊天界面。

基于:

特性

  • 多轮代理工作流 -基于Claude Agent SDK构建,用于执行复杂任务
  • 自定义MCP工具 -易于扩展的工具系统,具有类型安全性
  • 实时流媒体 -服务器发送事件以获得响应式用户体验
  • 现代堆栈 -Next.js 15、React 19、顺风CSS、TypeScript
  • 内置工具 -文件操作、bash命令、web搜索等

快速开始

先决条件

设置

  1. 克隆并安装依赖项

    git clone <your-repo-url>
    cd claude-agent-template
    pnpm install
    
  2. 身份验证设置(选择一个)

    选项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
    
  3. 运行开发服务器

    pnpm dev
    

    打开http://localhost:3000在您的浏览器中。

建筑

系统概述

代理系统基于三个核心组件构建:

  1. 代理API (app/api/agent/route.ts)-处理请求、管理对话状态和流式传输响应
  2. MCP工具 (lib/mcp-tools/)-扩展代理功能的自定义工具
  3. 聊天界面 (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强大的子代理架构:

子代理:

  1. github问题规划器 -分析GitHub问题并制定全面的实施计划
  2. github问题管理器 -管理问题生命周期(更新、测试结果、关闭)

使用克劳德代码:

/solve-github-issue 42              # Analyze and plan implementation for issue #42

自动化工作流程:

  1. 计划子代理 分析问题和相关背景
  2. 创建包含文件位置和步骤的详细实施计划
  3. 您审查并实施解决方案
  4. 经理分代理人 自动用测试结果更新问题并将其关闭

此工作流程展示了如何使用Claude Code的自定义斜线命令和专用子代理构建智能开发自动化。

看 .claude/commands/solve-github-issue.md 和 .claude/agents/ 了解实施细节。

文档

  • TOOLS.md -创建自定义MCP工具的完整指南
  • 故障排除.md -常见问题和解决方案
  • CLAUDE.md -开发环境设置和工作流程(包括项目结构)

资源

贡献

捐款指南:

  • 保持工具专注和简单
  • 文件参数清晰
  • 处理所有错误情况
  • 编写描述性系统提示
  • 使用各种输入进行测试

许可证

麻省理工学院