Token导航 LogoToken导航TokenDH.com
Claude Agent Template logo
AI代理未说明官方级别未说明来源级核验

Claude Agent Template

MCP Server

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

工具数

0

提示词数

0

GitHub Stars

21

资源数

0
AI代理TypeScriptClaudeClaude

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

作者 / 组织

Koomook

提供方

Koomook

最后核验

2026/5/17 20:21

快速接入

先看主来源和安装命令,再打开仓库或文档;下面只保留这个条目的关键接入事实。

详细介绍

Claude代理模板

![English](./README.md) ![한국어](./README.ko.md)

用于构建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搜索等

快速开始

先决条件

  • Node.js 18+
  • pnpm(或npm/yarn)
  • 以下之一用于身份验证:

- 无烟煤API密钥(在这里买一个),或 - 克劳德代码CLI(安装导轨)

设置

  1. 克隆并安装依赖项
   git clone 
   cd claude-agent-template
   pnpm install
  1. 身份验证设置(选择一个)

选项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
  1. 运行开发服务器
   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 -开发环境设置和工作流程(包括项目结构)

资源

贡献

捐款指南:

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

许可证

麻省理工学院

目录标签

目录标签

AI代理TypeScriptClaude本地部署Next.js模板实时流式传输自定义工具多轮工作流

支持客户端

Claude

接入字段

传输方式(transport,传输协议)

未说明

鉴权方式(authType,认证方式)

session

工具数量(toolCount,工具数)

0

资源数量(resourceCount,资源数)

0

提示词数量(promptCount,提示词数)

0

权限和风险

未说明session部署方式未说明

接入前请确认传输方式、认证方式和部署位置,并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限;先核对安装命令和配置内容。

仍需确认:installCommand

来源信息

继续浏览同类 MCP