AceternityUI MCP Server

Aceternity UI MCP 服务器

一个模型上下文协议（MCP）服务器，提供对Aceternity UI组件库文档和工具的访问。

概述

这个MCP服务器允许AI助手：

• 浏览 Aceternity UI 组件
• 搜索特定组件
• 获取详细的组件信息
• 访问组件文档和使用示例

安装

选项1：从npm安装（推荐）

npm install -g aceternity-ui-mcp-server

选项2：从源代码安装

git clone https://github.com/yeshsurya/AceternityUI_MCP_Server.git
cd AceternityUI_MCP_Server
npm install
npm run build

使用方法

运行服务器

如果通过npm全局安装：

aceternity-ui-mcp-server

如果从源代码安装：

npm start

或者直接：

node build/index.js

命令行选项

aceternity-ui-mcp-server --help     # Show help
aceternity-ui-mcp-server --version  # Show version

环境变量

• LOG_LEVEL设置日志级别（调试、信息、警告、错误）。默认值： info

示例：

LOG_LEVEL=debug npm start

与Claude Desktop的配置

在您的Claude桌面配置文件中添加：

macOS/Linux

~/Library/Application Support/Claude/claude_desktop_config.json

Windows

%APPDATA%\Claude\claude_desktop_config.json

如果通过npm安装（推荐）：

{
  "mcpServers": {
    "aceternity-ui": {
      "command": "aceternity-ui-mcp-server"
    }
  }
}

如果从源代码安装：

{
  "mcpServers": {
    "aceternity-ui": {
      "command": "node",
      "args": ["C:\\gitRepos\\aceternity_ui_mcp\\build\\index.js"]
    }
  }
}

注：在 macOS/Linux 上，路径中使用正斜杠；在 Windows 上，使用双反斜杠。

使用 GitHub Copilot CLI 进行配置

GitHub Copilot CLI 现在支持 MCP 服务器！您可以将此服务器添加到您的 Copilot CLI 配置中。

配置文件位置

MCP配置文件位于：

• macOS/Linux： ~/.config/mcp-config.json
• Windows： %USERPROFILE%\.config\mcp-config.json

你可以通过设置来更改这个位置 XDG_CONFIG_HOME 环境变量。

方法1：交互式配置（推荐）

1. 全局安装服务器：

   npm install -g aceternity-ui-mcp-server

1. 打开 GitHub Copilot CLI 并交互式地添加服务器：

   gh copilot

1. 使用交互式用户界面添加新的MCP服务器：

- 按下相应的键以添加服务器 - 填写服务器详细信息： - 名字： aceternity-ui - 命令： aceternity-ui-mcp-server - 类型: stdio - 新闻界；媒体 Ctrl+S 保存

方法2：手动配置

编辑你的 mcp-config.json 手动文件：

{
  "mcpServers": {
    "aceternity-ui": {
      "command": "aceternity-ui-mcp-server",
      "type": "stdio"
    }
  }
}

或者如果从源代码安装：

{
  "mcpServers": {
    "aceternity-ui": {
      "command": "node",
      "args": ["/path/to/aceternity_ui_mcp/build/index.js"],
      "type": "stdio"
    }
  }
}

验证配置

配置完成后，重启GitHub Copilot CLI。现在，Aceternity UI MCP服务器应该已经可用，您可以向Copilot提出问题，例如：

• “列出所有 Aceternity UI 背景组件”
• “给我看看背景光束组件”
• “在 Aceternity UI 中搜索动画组件”

使用 VS Code 进行配置

如果你正在使用配备 GitHub Copilot 的 VS Code，你也可以配置 MCP 服务器：

1. 打开 VS Code 设置（JSON）
2. 添加MCP服务器配置：

{
  "github.copilot.chat.mcp.servers": {
    "aceternity-ui": {
      "command": "aceternity-ui-mcp-server",
      "type": "stdio"
    }
  }
}

1. 重启 VS Code 或重新加载窗口

示例配置文件

此存储库中提供了示例配置文件：

• claude_desktop_config.example.json - Claude 桌面配置
• copilot_cli_config.example.json - GitHub Copilot CLI 配置

你可以复制这些文件并进行修改，以匹配你的安装路径。

可用工具

1. get_component

获取特定 Aceternity UI 组件的详细信息。

参数：

• componentName (字符串，必填)：组件的别名或名称

示例：

{
  "componentName": "background-beams"
}

2. list_components

列出所有可用的 Aceternity UI 组件，可按类别进行筛选（可选）。

参数：

• category （字符串，可选）：按类别过滤（例如，“背景”、“3D”、“覆盖层”）

示例：

{
  "category": "backgrounds"
}

3. search_components

通过名称、描述或标签搜索组件。

参数：

• query （字符串，必填）：搜索查询

示例：

{
  "query": "animation"
}

可用资源

• resource:aceternity_components - 所有可用组件的列表
• resource:aceternity_categories - 组件类别

可用提示

1. component_usage

获取如何使用特定组件的指导。

参数：

• componentName （必填）：组件名称或别名

2. animation_guide

获取动画组件的推荐。

参数：

• useCase （必填）：您想要实现的效果

3. background_selector

寻求帮助，选择合适的背景组件。

参数：

• style （可选）：风格或氛围（例如，“简约”，“戏剧性”）

组件类别

• 背景背景效果和动画
• 3d3D组件和效果
• 覆盖层；叠加层模态框、工具提示和覆盖层
• 旋转木马轮播图和滑块
• 布局布局组件和网格
• 可视化数据可视化组件

建筑学

aceternity_ui_mcp/
├── src/
│   ├── index.ts              # Entry point and server initialization
│   ├── handler.ts            # Request handlers
│   ├── resources.ts          # Static resources
│   ├── prompts.ts            # Prompt definitions
│   ├── data/
│   │   └── components.ts     # Component data structure
│   ├── tools/
│   │   ├── index.ts          # Tool registry
│   │   └── components/       # Component-related tools
│   └── utils/
│       ├── logger.ts         # Logging utilities
│       ├── cache.ts          # Caching layer
│       ├── circuit-breaker.ts # Circuit breaker pattern
│       ├── validation.ts     # Input validation
│       └── axios.ts          # HTTP client
├── build/                    # Compiled JavaScript
├── package.json
└── tsconfig.json

特点/特性

• 综合部件数据库所有Aceternity UI组件，附带描述和元数据
• 智能搜索按名称、描述或标签搜索
• 类别过滤按类别浏览组件
• 缓存内存缓存以提升性能
• 断路器对外部调用的弹性模式
• 输入验证基于Zod的模式验证
• 结构化日志记录基于Winston的日志记录，支持可配置的日志级别

发展

构建

npm run build

开发模式

npm run dev

干净构建

npm run clean
npm run build

要求

• Node.js 18 或更高版本
• npm 或 yarn

依赖项

• @modelcontextprotocol/sdkMCP协议实现
• axiosHTTP 客户端
• cheerioHTML解析
• zod运行时类型验证
• winston日志记录
• joi验证
• uuidID生成

许可证

麻省理工学院（MIT）

相关链接

• Aceternity UI（注：此名称可能为特定项目或库的名称，直接翻译为“永恒醋味用户界面”并不符合中文表达习惯，但在此保留原样以尊重原名）
• Aceternity UI 组件
• 模型上下文协议

贡献

欢迎贡献！请随时提交问题或拉取请求。

支持

对于问题或疑问：

1. 查阅 Aceternity UI 的文档：https://ui.aceternity.com
2. 查看MCP规范：https://modelcontextprotocol.io
3. 在这个仓库中打开一个问题（或：提交一个问题）