Typescript MCP Demo

一个全栈应用，集成了模型上下文协议(MCP)与Anthropic的Claude LLM，提供交互式聊天界面并利用MCP工具。

人工智能聊天机器人开发者工具 #聊天应用 #MCP集成 #Claude交互 #工具调用 .TypeScript

评分 : 2.5分

下载量 : 14

更新时间 : 2025-04-28

什么是MCP Chat with Claude?

这是一个结合了先进AI聊天能力和扩展工具集的全栈应用。通过Model Context Protocol (MCP)服务器提供各种实用工具，Claude AI可以在对话中智能调用这些工具来增强回答能力。

如何使用MCP Chat with Claude?

只需在浏览器中打开聊天界面，像普通聊天一样与Claude交流。当AI需要工具辅助时，会自动调用MCP服务器上的工具并将结果整合到对话中。

适用场景

适用于需要AI结合外部工具完成任务的场景，如信息查询、计划管理、数据分析等。特别适合开发者体验工具增强型AI对话。

主要功能

交互式聊天与Claude AI进行自然语言对话，AI可以理解复杂问题并给出详细回答

工具集成AI可以调用MCP服务器上的各种工具来增强回答能力，如获取待办事项、查询计划等

实时反馈双面板界面同时显示对话内容和工具执行详情，操作透明可见

动态工具发现系统自动发现MCP服务器上可用的工具，无需手动配置

优势与局限性

优势

无缝集成了AI对话能力和实用工具

界面直观，操作简单，无需技术背景

工具调用过程透明，用户可以查看详细执行情况

支持动态添加新工具，扩展性强

局限性

目前内置工具数量有限

需要Anthropic API密钥才能使用

工具调用可能增加响应时间

如何使用

启动MCP服务器

在server目录下运行npm start命令启动MCP工具服务器

启动Web应用

在client目录下运行npm run server启动聊天界面服务器

打开聊天界面

在浏览器中访问http://localhost:3000开始与Claude对话

使用工具增强对话

当AI需要工具辅助时，会自动调用相应工具并将结果整合到对话中

使用案例

查询工作任务询问AI你今天的工作任务，AI会自动调用get-todo工具获取相关信息

规划家庭活动让AI帮你规划家庭活动，AI会结合get-plan工具提供建议

常见问题

我需要付费使用这个应用吗?

如何添加新的工具?

为什么AI有时不调用工具?

工具调用安全吗?

🚀 MCP 与Claude 的聊天应用

本项目是一个全栈应用程序，展示了模型上下文协议（MCP）与Anthropic的Claude大语言模型（LLM）的集成。它提供了一个交互式聊天界面，还能利用MCP工具进行功能扩展，为用户带来更丰富的交互体验。

🚀 快速开始

先决条件

Node.js（版本14或更高）
npm（版本6或更高）
Anthropic API密钥

安装步骤

下载项目

在终端中运行以下命令克隆仓库：

git clone [仓库地址]
cd mcp-chat-with-claude

安装依赖

进入client目录安装客户端依赖：

cd client
npm install

进入server目录安装服务端依赖：

cd ../server
npm install

配置环境变量

创建一个.env文件并添加以下内容：

ANTHROPIC_API_KEY=your_api_key_here
PORT=3000

设置与运行

启动MCP服务器：

cd server
node mcp-server.ts

启动宿主应用：

cd ../client
npm start

✨ 主要特性

提供与Claude AI的交互式聊天界面，方便用户与AI进行交流。
采用双面板UI，可同时显示对话和工具执行详情，让用户清晰了解交互过程。
能够动态发现MCP服务器提供的工具，为用户提供更多功能选择。
支持多种具有不同参数的工具，满足多样化的使用需求。
通过MCP正确处理Claude的工具调用，确保功能的稳定运行。

📦 安装指南

下载项目

在终端中运行以下命令克隆仓库：

git clone [仓库地址]
cd mcp-chat-with-claude

安装依赖

进入client目录安装客户端依赖：

cd client
npm install

进入server目录安装服务端依赖：

cd ../server
npm install

配置环境变量

创建一个.env文件并添加以下内容：

ANTHROPIC_API_KEY=your_api_key_here
PORT=3000

💻 使用示例

基础用法

聊天界面

用户可以通过输入文本并按回车键发送消息。Claude会根据上下文生成响应。

工具调用

MCP服务器提供多种工具供Claude调用，包括但不限于：

文本分析工具
网络请求工具
数据处理工具

这些工具的名称和功能会在聊天过程中动态显示。

📚 详细文档

项目概述

该项目包含两个主要组件：

MCP服务器：使用Node.js实现的Model Context Protocol服务器，提供多种工具供LLM调用。
宿主应用：作为聊天界面的应用程序，充当用户、Claude AI与MCP服务器之间的桥梁。

项目结构

├── client/                 # 客户端及宿主应用  
│   ├── dist/               # 编译后的TypeScript文件  
│   ├── host-app.ts         # 宿主应用程序服务器  
│   ├── chat.js             # 聊天界面逻辑  
│   ├── index.html          # 主网页界面  
│   ├── styles.css          # ⾯样式  
│   ├── package.json        # 客户端依赖  
│   └── mcp-client-example.ts # 示例MCP客户端（用于测试）  
│
├── server/                 # MCP服务器  
│   ├── dist/               # 编译后的TypeScript文件  
│   ├── mcp-server.ts       # MCP服务器实现  
│   └── package.json        # 服务端依赖  
└── .env                    # 环境变量配置文件

项目架构

                ┌───────────────┐
                │               │
                │   MCP服务器   │
                │               │
                └──────┬───────┘
                        │
                        ▼
                 ┌───────────────┐
                 │               │
                 │  宿主应用     │
                 │               │
                 └──────┬───────┘
                         │
                         ▼
                  ┌──────▼──────┐
                  │             │
                  │   Claude API   │
                  │   (Anthropic)  │
                  │             │
                  └───────────────┘