使用说明

项目简介

headless-editor-mcp 是一个基于 Model Context Protocol (MCP) 构建的 headless 代码编辑器服务器。它利用 Language Server Protocol (LSP) 提供强大的代码智能功能,并旨在为 AI 提供代码操作和上下文信息的后端服务。目前,该服务器主要支持 TypeScript 和 JavaScript 语言,并具备 React 组件检测和操作能力。

主要功能点

  • LSP 代码智能集成: 支持代码补全、语法检查、定义跳转等丰富的代码编辑功能。
  • 安全的文件系统操作: 通过严格的访问控制,保障文件系统操作的安全性。
  • 会话式编辑: 支持基于会话的编辑模式,管理编辑状态。
  • TypeScript/JavaScript 语言支持: 提供深入的 TypeScript 和 JavaScript 代码分析能力。
  • React 组件检测与操作: 能够检测和操作 React 组件。
  • 保留格式的编辑操作: 在编辑代码时尽量保留原有的代码格式。
  • 全面的日志记录和错误跟踪: 方便问题排查和系统监控。

安装步骤

  1. 安装依赖:
    npm install
  2. 构建项目:
    npm run build

服务器配置

MCP 客户端需要配置以下信息以连接到 headless-editor-mcp 服务器。以下是一个 JSON 格式的配置示例,请根据实际情况修改 'command' 和 'args' 字段。

{
  "serverName": "headless-editor-mcp",
  "command": "node",
  "args": [
    "./build/index.js",
    "/path/to/workspace"
  ],
  "comment": "command 为服务器启动命令,args 为启动参数,/path/to/workspace 需要替换为允许服务器访问的工作区目录。"
}

参数说明:

  • 'command': 启动服务器的命令,这里是 'node',表示使用 Node.js 运行。
  • 'args': 传递给服务器的参数数组。
    • './build/index.js': 服务器入口文件路径。
    • '/path/to/workspace': 重要: 需要替换为实际的工作区目录路径。服务器将只允许访问该目录及其子目录下的文件。可以指定多个允许访问的目录。

基本使用方法

  1. 启动服务器: 根据上面 服务器配置 中的 'command' 和 'args' 信息,在终端中执行相应的命令即可启动 headless-editor-mcp 服务器。例如,如果配置的工作区目录为 '/projects/my-code',则启动命令可能为:
    node build/index.js /projects/my-code
  2. 使用 MCP 客户端连接服务器: 配置 MCP 客户端连接到启动的 headless-editor-mcp 服务器。客户端需要使用 JSON-RPC 协议与服务器通信,并发送 MCP 请求。
  3. 调用 MCP 工具: 客户端可以通过 'tools/call' 方法调用服务器提供的工具,例如:
    • 'start_session': 开始一个新的编辑会话,需要提供文件路径和语言 ID。
    • 'edit_code': 对代码进行编辑操作,例如插入、删除、替换等,需要提供会话 ID 和编辑操作详情。
    • 'validate_code': 验证当前代码状态,返回诊断信息,需要提供会话 ID。
    • 'close_session': 关闭并清理编辑会话,需要提供会话 ID。

具体工具的参数和使用方法可以参考仓库的 'README.md' 文件和 'src/server.ts' 中的工具定义。

信息

分类

开发者工具