使用说明

项目简介

Magic UI MCP 服务端是一个基于 Model Context Protocol (MCP) 构建的后端应用。它旨在为大模型(LLM)客户端提供访问 Magic UI 组件库的能力,允许 LLM 获取组件列表、详细信息、安装指南和使用示例,从而帮助用户在与大模型交互时更方便地了解和使用 Magic UI 组件。

主要功能点

  • 获取组件列表: 提供所有 Magic UI 组件的完整列表。
  • 按类别查询组件: 允许大模型客户端按照预定义的类别(如布局、媒体、动效、按钮等)获取相关组件的信息。
  • 获取组件详情: 为特定组件提供详细信息,包括其代码实现(仅供参考)、安装方法和相关的示例代码。
  • 提供使用示例: 为每个组件提供可运行的使用示例及其代码,帮助理解如何在实际项目中使用组件。

安装步骤

本服务端的安装通常通过下载发布的版本进行:

  1. 访问项目的 Releases 页面 下载最新版本的压缩包。
  2. 将下载的压缩包解压到您选择的目录。
  3. 运行解压目录中的安装脚本(具体文件名可能因版本而异,请查看解压后的文件)。
  4. 按照屏幕提示完成服务器环境的配置。

服务器配置

MCP 服务器需要由一个 MCP 客户端(通常是大模型应用)启动和管理。客户端需要知道如何运行该服务器。您需要将以下配置信息提供给您的 MCP 客户端:

{
  "name": "Magic UI MCP",
  "command": "npm",
  "args": ["start"],
  "description": "Magic UI MCP 服务端,提供 Magic UI 组件的上下文和工具。"
}
  • 'name': 服务器的名称,客户端用来标识该服务器。
  • 'command': 启动服务器的主命令,这里是 'npm'。
  • 'args': 传递给 'command' 的参数,'["start"]' 会执行项目 'package.json' 中定义的 'start' 脚本,通常会运行 'node src/server.ts'。
  • 'description': 服务器的简要描述。

请将这些信息配置到您的 MCP 客户端中。客户端会根据这些信息启动服务器并建立连接。

基本使用方法

安装并配置完成后,您的大模型应用(作为 MCP 客户端)即可通过 MCP 协议与 Magic UI MCP 服务端进行通信。客户端可以向服务器发起请求,例如:

  1. 查询所有可用组件: 客户端可以请求获取服务器提供的所有工具列表,发现如 "getUIComponents"、"getLayout"、"getButtons" 等工具。
  2. 获取特定信息: 客户端可以调用相应的工具,例如调用 "getButtons" 工具来获取所有按钮组件的详细信息和示例。
  3. 解析响应: 服务器会返回包含组件数据(如名称、描述、安装方法、代码片段、示例等)的 JSON 响应,供大模型客户端处理和呈现给用户。

用户可以通过大模型应用以自然语言方式与服务器提供的能力进行交互(例如,“我想找一些按钮组件”,“给我看看 Bento Grid 组件的详细信息”),而大模型应用则将用户的意图转化为 MCP 请求发送给服务器。

信息

分类

AI与计算