Mcp-manager NPM

mcp-manager

mcp-manager 是一个用于管理多个服务实例的工具，支持 Web 和桌面环境。它提供了动态存储适配器、服务生命周期管理以及工具、资源和提示的同步功能。

功能特性

支持 Web 和桌面环境的存储适配器（BrowserStorage 和 FileSystemStorage）。
动态选择传输层（WebSocket 或 Stdio）。
服务的创建、启用、禁用和重启功能。
工具、资源和提示的同步与管理。
OpenAI 集成，支持生成 OpenAI 工具格式。

安装依赖

bun add mcp-manager

使用说明

创建服务 使用 createService 方法创建新的服务实例，并指定传输类型（websocket 或 stdio）。
管理服务 使用 enableService 和 disableService 方法启用或禁用服务。
存储适配器 根据运行环境自动选择 BrowserStorage（Web 环境）或 FileSystemStorage（桌面环境）。
OpenAI 工具 调用 getAllEnabledServicesOpenAITools 方法获取所有启用服务的 OpenAI 工具。

前端示例

以下是一些使用 mcp-manager 在 React 应用中的示例，展示了如何结合 React 的状态管理来动态管理服务和存储。

示例 1：React 中的服务管理

import React, { useEffect, useState } from "react";
import { createService, ServiceManager, BrowserStorage } from "mcp-manager";

const serviceManager = new ServiceManager(new BrowserStorage());

export function ServiceDashboard() {
  const [services, setServices] = useState<string[]>([]);
  const [enabledServices, setEnabledServices] = useState<string[]>([]);

  useEffect(() => {
    // 初始化服务管理器
    serviceManager.createService("WebSocketService", "websocket", {
      url: "ws://localhost:8080",
    });

    // 监听服务事件
    const handleServiceConnected = (serviceName: string) => {
      setServices((prev) => [...prev, serviceName]);
    };

    const handleServiceEnabled = (serviceName: string) => {
      setEnabledServices((prev) => [...prev, serviceName]);
    };

    serviceManager.on("serviceConnected", handleServiceConnected);
    serviceManager.on("serviceEnabled", handleServiceEnabled);

    return () => {
      serviceManager.off("serviceConnected", handleServiceConnected);
      serviceManager.off("serviceEnabled", handleServiceEnabled);
    };
  }, []);

  const handleEnableService = (serviceName: string) => {
    serviceManager.enableService(serviceName);
  };

  return (
    <div>
      <h2>服务列表</h2>
      <ul>
        {services.map((serviceName) => (
          <li key={serviceName}>
            {serviceName}{" "}
            <button onClick={() => handleEnableService(serviceName)}>
              启用
            </button>
          </li>
        ))}
      </ul>

      <h2>已启用服务</h2>
      <ul>
        {enabledServices.map((serviceName) => (
          <li key={serviceName}>{serviceName}</li>
        ))}
      </ul>
    </div>
  );
}

示例 2：React 中的 OpenAI 工具集成

import React, { useEffect, useState } from "react";
import { ServiceManager, BrowserStorage } from "mcp-manager";

const serviceManager = new ServiceManager(new BrowserStorage());

export function OpenAITools() {
  const [tools, setTools] = useState<any[]>([]);

  useEffect(() => {
    // 创建并启用服务
    serviceManager.createService("WebSocketService", "websocket", {
      url: "ws://localhost:8080",
    });
    serviceManager.enableService("WebSocketService");

    // 获取所有启用服务的 OpenAI 工具
    const openAITools = serviceManager.getAllEnabledServicesOpenAITools();
    setTools(openAITools);
  }, []);

  return (
    <div>
      <h2>OpenAI 工具列表</h2>
      <ul>
        {tools.map((tool, index) => (
          <li key={index}>
            <strong>{tool.function.name}</strong>: {tool.function.description}
          </li>
        ))}
      </ul>
    </div>
  );
}

示例 3：React 状态与存储适配器结合

import React, { useEffect, useState } from "react";
import { ServiceManager, BrowserStorage } from "mcp-manager";

const storage = new BrowserStorage();
const serviceManager = new ServiceManager(storage);

export function StorageExample() {
  const [data, setData] = useState<string | null>(null);

  useEffect(() => {
    // 加载存储的数据
    const loadData = async () => {
      const savedData = await storage.load("exampleKey");
      setData(savedData || "无数据");
    };

    loadData();
  }, []);

  const handleSaveData = async () => {
    const newData = `保存时间: ${new Date().toISOString()}`;
    await storage.save("exampleKey", newData);
    setData(newData);
  };

  return (
    <div>
      <h2>存储示例</h2>
      <p>当前数据: {data}</p>
      <button onClick={handleSaveData}>保存新数据</button>
    </div>
  );
}