Typescript MCP Demo

🚀 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調用，包括但不限於：

• 文本分析工具
• 網絡請求工具
• 數據處理工具

這些工具的名稱和功能會在聊天過程中動態顯示。

📚 詳細文檔

項目概述

該項目包含兩個主要組件：

1. MCP服務器：使用Node.js實現的Model Context Protocol服務器，提供多種工具供LLM調用。
2. 宿主應用：作為聊天界面的應用程序，充當用戶、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)  │
                  │             │
                  └───────────────┘

常見問題

1. 連接問題：確保MCP服務器和宿主應用都在運行，並查看控制檯的錯誤信息。
2. 工具未找到：確認MCP服務器已啟動且工具名稱完全匹配。
3. API密鑰錯誤：檢查.env文件中的Anthropic API密鑰是否正確設置。
4. 工具調用錯誤：在響應面板中查找詳細錯誤信息。

📄 許可證

MIT

致謝

• 模型上下文協議
• Anthropic Claude API