AI导哈

MCP客户端管理库

一个无痕的TypeScript库，用于在Web应用程序中管理模型上下文协议（MCP）客户端，支持实时通信和自动重连。

  • by antpass79
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 antpass79/mcp-on-web

使用说明

MCP客户经理

一个用于管理web应用程序中的模型上下文协议（MCP）客户端的零占用TypeScript库。

特性

  • 🚀 零足迹：具有最小依赖性的轻量级库
  • 🔗 WebSocket支持：与MCP服务器实时通信
  • 🔄 自动重新连接：具有指数回退的自动重新连接
  • 📝 TypeScript：完全支持TypeScript，具有全面的类型定义
  • 🎯 事件驱动：基于事件的干净架构
  • 🌐 网络就绪：专为web应用程序设计

安装

npm install mcp-client-manager

快速开始

import { MCPClient, ConnectionState } from 'mcp-client-manager';

// Create a new MCP client
const client = new MCPClient({
  serverUrl: 'ws://localhost:8080',
  timeout: 30000,
  autoReconnect: true,
  retryAttempts: 3
});

// Set up event listeners
client.on('connected', () => {
  console.log('Connected to MCP server!');
});

client.on('disconnected', (code, reason) => {
  console.log(`Disconnected: ${code} ${reason}`);
});

client.on('error', (error) => {
  console.error('MCP Client Error:', error);
});

// Connect to the server
async function connect() {
  try {
    await client.connect();
    
    // Initialize the session
    await client.initialize({
      name: 'My Web App',
      version: '1.0.0'
    });
    
    // List available tools
    const tools = await client.listTools();
    console.log('Available tools:', tools);
    
    // Call a tool
    const result = await client.callTool('calculator', {
      expression: '2 + 2'
    });
    console.log('Tool result:', result);
    
  } catch (error) {
    console.error('Connection failed:', error);
  }
}

connect();

API 参考

MCP客户端

用于连接到MCP服务器的主客户端类。

构造函数

new MCPClient(config: MCPClientConfig)

配置选项

interface MCPClientConfig {
  serverUrl: string;        // WebSocket URL of the MCP server
  timeout?: number;         // Request timeout in milliseconds (default: 30000)
  retryAttempts?: number;   // Number of retry attempts (default: 3)
  retryDelay?: number;      // Initial retry delay in milliseconds (default: 1000)
  autoReconnect?: boolean;  // Enable auto-reconnection (default: true)
  protocols?: string[];     // WebSocket subprotocols
}

方法

  • connect(): Promise<void> -连接到MCP服务器
  • disconnect(): void -断开与MCP服务器的连接
  • getState(): ConnectionState -获取当前连接状态
  • initialize(clientInfo): Promise<any> -初始化MCP会话
  • request(method, params): Promise<any> -向服务器发送请求
  • notify(method, params): void -向服务器发送通知
  • listTools(): Promise<MCPTool[]> -列出可用工具
  • callTool(name, arguments): Promise<any> -调用工具
  • listResources(): Promise<MCPResource[]> -列出可用资源
  • readResource(uri): Promise<any> -阅读资源

事件

  • connected -连接建立时触发
  • disconnected -连接丢失时触发
  • error -发生错误时触发
  • message -收到任何消息时触发
  • response -收到响应时触发
  • notification -收到通知时触发

连接状态

enum ConnectionState {
  DISCONNECTED = 'disconnected',
  CONNECTING = 'connecting',
  CONNECTED = 'connected',
  RECONNECTING = 'reconnecting',
  ERROR = 'error'
}

Web应用程序示例

看 examples/web-app 一个完整的web应用程序示例的目录，演示：

  • 连接到MCP服务器
  • 列出和调用工具
  • 列出和阅读资源
  • 实时事件记录
  • 连接管理UI

要运行该示例，请执行以下操作：

cd examples/web-app
npm install
npm run dev

浏览器兼容性

该库使用WebSockets和现代JavaScript功能。它支持：

  • Chrome 16+
  • 火狐11+
  • Safari 7+
  • 边缘12+

发展

建筑

npm run build

测试

npm test

发展模式

npm run dev

贡献

  1. 分叉存储库
  2. 创建要素分支
  3. 进行更改
  4. 添加新功能的测试
  5. 提交拉取请求

许可证

MIT许可证-有关详细信息，请参阅许可证文件。

相关项目

支持

对于问题和疑问：

  • 在GitHub上创建问题
  • 检查MCP规范文件
  • 查看示例应用程序

相关 MCP