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

事件

• 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许可证-有关详细信息，请参阅许可证文件。

相关项目

• 模型上下文协议 -MCP官方规范
• MCP TypeScript SDK -MCP服务器的官方TypeScript SDK

支持

对于问题和疑问：

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