使用说明

项目简介

本项目 'mcp_server' 是一个基于 Model Context Protocol (MCP) 的服务器实现，专注于提供可定制的UI组件模板资源。它允许LLM客户端通过标准的MCP协议请求和获取预定义的UI组件（例如登录界面），并根据组件类型和配置返回相应的HTML、CSS、JavaScript以及可选的后端代码。

主要功能点

资源托管与管理: 托管和管理UI组件模板资源，例如 'login' 和 'login-modern' 组件。
标准化数据访问: 通过 MCP 协议和资源 URI (例如 'appointy://ui/login') 提供对UI组件资源的访问能力。
组件内容获取: 返回UI组件的完整内容，包括 HTML 结构、CSS 样式、JavaScript 脚本，以及可选的后端 JavaScript 代码。
元数据支持: 为每个UI组件提供元数据，例如组件名称、类型、特性和描述，方便客户端理解和使用。
错误处理: 当请求的组件不存在或加载失败时，返回包含错误信息的响应。

安装步骤

安装 Node.js 和 npm: 确保你的环境中已安装 Node.js 和 npm (Node Package Manager)。
安装 MCP SDK (如果尚未安装): 由于代码使用了 '@modelcontextprotocol/sdk'，你需要确保已安装该 SDK。如果你的项目中还没有 'package.json' 文件，请先创建一个并安装依赖：
```
npm install @modelcontextprotocol/sdk
```

服务器配置

MCP客户端需要配置以下信息才能连接到此服务器。请注意，以下配置信息为 JSON 格式，MCP客户端会读取这些配置来启动和连接服务器。

{
  "serverName": "UITemplateServer",
  "command": "node",
  "args": ["index.js"]
}

配置参数说明:

'serverName': 服务器名称，这里设置为 'UITemplateServer'，与代码中 'McpServer' 实例化的 'name' 属性一致。
'command': 启动服务器的命令，这里使用 'node' 命令来运行 JavaScript 文件。
'args': 命令参数，这里指定了服务器入口文件为 'index.js'。

重要提示: MCP客户端需要能够执行 'node index.js' 命令来启动此服务器。请确保 'index.js' 文件位于客户端可以访问到的位置，或者在 'args' 中提供正确的相对或绝对路径。

基本使用方法

启动 MCP 服务器: MCP客户端会根据上述配置启动 'mcp_server'。
客户端发起资源请求: MCP客户端可以使用 MCP 协议发送请求到服务器，以获取 UI 组件资源。例如，要获取 'login' 组件，客户端可以请求资源 URI 'appointy://ui/login'。
服务器返回资源: 服务器会处理客户端的请求，根据 URI 中的组件名称加载相应的组件资源，并将包含 HTML、CSS、JavaScript 内容和元数据的 JSON-RPC 响应返回给客户端。
客户端使用资源: MCP客户端接收到服务器的响应后，可以解析响应内容，并根据需要使用返回的 UI 组件资源。

例如，客户端可能会发送一个类似以下的 MCP 请求（简化示例，实际请求会遵循 JSON-RPC 格式和 MCP 协议）：

{
  "method": "mcp.resource.read",
  "params": {
    "uri": "appointy://ui/login"
  }
}

服务器会返回类似以下的 JSON-RPC 响应：

{
  "jsonrpc": "2.0",
  "id": "请求ID",
  "result": {
    "contents": [
      { "uri": "appointy://ui/login/index.html", "type": "text/html", "text": "<html>...</html>" },
      { "uri": "appointy://ui/login/style.css", "type": "text/css", "text": "/* ... */" },
      { "uri": "appointy://ui/login/script.js", "type": "text/javascript", "text": "// ..." }
    ],
    "metadata": {
      "name": "login",
      "type": "login",
      "features": ["basic-login", "signup-toggle"],
      "description": "A simple and clean login/signup toggle interface"
    }
  }
}

客户端可以从 'result.contents' 中获取组件的文件内容，从 'result.metadata' 中获取组件的描述信息。

关键词