AI导哈

UI组件获取与图像生成MCP服务

SupaUI MCP Server 是一个模型上下文协议服务，使AI代理能够通过自然语言从 buouui.com 获取和浏览UI组件，并生成或编辑图像以返回图片URL。

  • by buoooou
  • TypeScript
  • 本地部署
  • 7 星标
  • 更新于
在 GitHub 查看 buoooou/mcp-ui-gen

使用说明

SupaUI MCP Server

A Model Context Protocol (MCP) server for SupaUI that enables AI agents to fetch and browse UI components from buouui.com and to generate images through natural language interactions.

Features

  • Fetch UI Components: Search buouui.com and get a component's source code together with the npm packages and other components it needs
  • List UI Components: Browse the available components, optionally filtered by keyword
  • Create Images: Generate or edit an image and get its URL
  • TypeScript Support: Built with TypeScript for better type safety and developer experience

Prerequisites

Smithery

use Smithery to install supaui-mcp in Claude：

npx -y @smithery/cli install @buoooou/supaui-mcp --client claude

munal

  1. clone repo：
git clone [your-repository-url]
cd mcp-ui-gen
  • Node.js (Latest LTS version)
  • BUOU_API_KEY from buouui.com

Installation

# Install dependencies
pnpm install

# Build the project
pnpm build

Configuration

  1. Set your BUOU_API_KEY in the environment:
export BUOU_API_KEY=your_api_key_here
  1. Or create a configuration file based on smithery.yaml requirements.

Usage

Starting the Server

pnpm start

Available Commands

The server supports the following commands:

  1. Fetch UI Component:
/ui fetch modern login form
  1. List UI Components:
/buou list cards
  1. Create Image:
/image a minimal logo for a coffee shop

API Tools

FetchUiTool (fetch-ui)

  • Input: searchQuery
  • Returns the best matching component: its files, the npm packages to install, the @/components/ui components it imports, and other close matches
  • Endpoint: /api/fetch

ListUiTool (list-ui)

  • Input: searchQuery (optional)
  • Lists component names, filtered by the keyword when one is given
  • Endpoint: /api/list

CreateImageTool (create-image)

  • Input: message, image
  • Returns the URL of the generated image
  • Endpoint: /api/image

Development

# Build in watch mode
pnpm exec tsc -w

Environment Variables

  • BUOU_API_KEY: Your API key from buouui.com (Required)
  • BUOU_API_URL: Base URL of the API, defaults to https://buouui.com. Point it to http://localhost:3000 to develop against a local site

Contributing

  1. Fork the repository
  2. Create your feature branch
  3. Commit your changes
  4. Push to the branch
  5. Create a Pull Request

License

ISC

Support

For support, please visit:

相关 MCP