Mcp Ui Gen

Generates, fetches, and manages UI components using natural language commands. Integrates with Claude and Windsurf AI assistants for efficient UI development.

Author

Mcp Ui Gen logo

buoooou

No License

Quick Info

GitHub GitHub Stars 6
NPM Weekly Downloads 0
Tools 1
Last Updated 7/9/2025

Tags

ui creation ai mcp ui ui gen buoooou mcp

SupaUI MCP Server

A Model Context Protocol (MCP) server for SupaUI that enables AI agents to generate, fetch, and manage UI components through natural language interactions.

Features

  • Create UI Components: Generate React components based on natural language descriptions
  • Fetch UI Components: Search and retrieve components from buouui.com
  • List UI Components: Browse available components with detailed previews
  • 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. Create UI Component:
/ui create a basic button
  1. Fetch UI Component:
/ui fetch modern login form
  1. List UI Components:
/buou list cards

API Tools

CreateUiTool

  • Generates new UI components based on natural language descriptions
  • Endpoint: /api/create

FetchUiTool

  • Retrieves existing components from buouui.com
  • Endpoint: /api/fetch

ListUiTool

  • Lists available components with previews
  • Endpoint: /api/list

Development

# Build in watch mode
tsc -w

# Run tests
pnpm test

Environment Variables

  • BUOU_API_KEY: Your API key from buouui.com (Required)

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: