Live CSS Editor MCP Bridge

关键词

AI Copilot bridgeJSON-RPCResources and ToolsPrompts renderingCopilot integration

使用说明内容（Markdown格式）

  • 项目简介
    • Live CSS Editor 的 MCP 服务器实现（桥接服务器），提供标准化的上下文服务，包括资源托管、工具注册与执行、以及可定制的提示模板渲染，供 LLM 客户端通过 JSON-RPC 与之交互。
  • 主要功能点
    • 资源管理：托管与访问编辑器中的资源（样式表、模板等）。
    • 工具注册与执行：暴露外部功能接口，LLM 客户端可通过 RPC 调用实现数据读取、搜索、变更等操作。
    • 提示模板（Prompts）渲染：提供可定制的 prompt 模板供 LLM 使用，便于统一交互模式。
    • JSON-RPC 通信：统一的请求/响应格式，便于客户端在各传输通道（如 stdin/stdout、服务器推送）上使用。
    • 会话与能力声明：服务器端维护会话状态，并声明服务器能力与可用性。
    • 传输协议支持：设计目标是支持多种传输方式，方便在不同应用场景中接入。
  • 安装步骤
    • 确保环境：需要 Node.js v18+（用于 MCP 服务器）、以及项目中已有的 Node 依赖。
    • 安装依赖：进入 vscode-bridge/server 目录，安装依赖（npm install）。
    • 启动服务器：运行 MCP 服务器脚本（例如 node mcp-server.js），服务将启动并监听客户端连接。
    • 与客户端对接：在 MCP 客户端（如 OpenAI Copilot 集成）中配置服务器信息，使客户端能够通过配置的命令与参数连接到 MCP 服务器。
  • 服务器配置（MCP 客户端所需的启动信息，JSON 格式） { "server_name": "Live CSS Editor MCP Bridge", "command": "node", "args": ["vscode-bridge/server/mcp-server.js"], "description": "Live CSS Editor 的 MCP 服务端桥接，提供资源、工具和 prompts。" } 注解：该配置用于 MCP 客户端在启动阶段知道如何启动 MCP 服务器，包括要执行的命令和替代参数。实际客户端在不同实现中可能有不同字段名称，以上 json 仅作为参考示例，具体对接请按客户端需求填写。
  • 基本使用方法
    • 启动 MCP 服务器后，确保客户端能够连接到服务器地址与端口（如通过 WebSocket/HTTP-RPC 或标准输入输出通道实现的 JSON-RPC）。
    • 客户端通过 JSON-RPC 调用服务器暴露的资源、工具、以及提示模板等能力。
    • 服务端应支持会话管理、能力声明以及跨不同传输协议的通讯能力，以便 LLM 客户端稳定获取上下文信息和功能。

服务器信息

访问项目