FindMCP Logo FindMCP.info
MCP Chat with Claude

MCP Chat with Claude

site icon
2025.04.12 2
TypeScript交互式聊天界面MCP 工具集成开发效率交流协作
typescript-mcp-demo 是一个全栈应用程序，展示了如何将 Model Context Protocol (MCP) 与 Anthropic 的 Claude LLM 集成，提供一个交互式聊天界面，利用 MCP 工具。该项目包含两个主要组件：MCP 服务器和主机应用程序。MCP 服务器是一个 Node.js 服务器，实现了 Model Context Protocol，为 LLM 提供各种工具。主机应用程序是一个 Web 应用程序，作为聊天界面，充当用户、Claude AI 和 MCP 服务器之间的中介。
View on GitHub

Overview

基本能力

产品定位

typescript-mcp-demo 是一个展示 MCP 与 Claude LLM 集成的全栈应用程序，旨在提供一个交互式聊天界面，利用 MCP 工具进行高效的对话和任务处理。

核心功能

  • 交互式聊天界面与 Claude AI
  • 双面板 UI 显示对话和工具执行详情
  • 动态从 MCP 服务器发现工具
  • 支持多种工具及其参数
  • 通过 MCP 正确处理 Claude 的工具使用

适用场景

  • 开发人员希望了解如何将 MCP 与 Claude LLM 集成
  • 需要构建交互式聊天界面的项目
  • 需要动态工具发现和管理的应用

工具列表

  1. get-todo: 获取特定类别的待办事项

  2. 参数:

    • category: 字符串（例如 "life", "work", "family", "friends"）

  3. get-plan: 获取整体计划

  4. 参数: 无

常见问题解答

  1. 连接问题: 确保两个服务器都在运行，并检查控制台中的错误消息。
  2. 工具未找到: 确保 MCP 服务器正在运行，并且工具名称完全匹配。
  3. API 密钥错误: 验证您的 Anthropic API 密钥是否正确设置在 .env 文件中。
  4. 工具使用错误: 检查响应面板以获取详细的错误信息。

使用教程

使用依赖

  • Node.js 17 或更高版本
  • npm 或 yarn
  • Anthropic API 密钥

安装教程

  1. 克隆仓库: git clone https://github.com/yourusername/mcp-chat-with-claude.git cd mcp-chat-with-claude

  2. 为客户端和服务器安装依赖: cd server npm install cd ../client npm install

  3. 在客户端目录中创建 .env 文件，包含您的 Anthropic API 密钥: ANTHROPIC_API_KEY=your-api-key-here MCP_SERVER_HOST=localhost MCP_SERVER_PORT=8000 MCP_SERVER_PATH=/sse

调试方式

  1. 启动 MCP 服务器: bash cd server npm run build npm start

  2. 启动主机应用程序 (Web 服务器): bash cd client npm run build npm start

  3. 访问聊天界面: http://localhost:3000

  4. 运行独立的 MCP 客户端示例: bash cd client npm run client

许可证

该项目遵循 MIT 开源许可条款。