Typescript MCP Demo

一個全棧應用，集成了模型上下文協議(MCP)與Anthropic的Claude LLM，提供交互式聊天界面並利用MCP工具。

人工智能聊天機器人開發者工具 #聊天應用 #MCP集成 #Claude交互 #工具調用 .TypeScript

rating : 2.5 points

downloads : 17

update time : 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)  │
                  │             │
                  └───────────────┘