What is Mcp Ui Gen

mcp-ui-gen is a Model Context Protocol (MCP) server designed for SupaUI, enabling AI agents to generate, fetch, and manage UI components through natural language interactions.

Use cases

Use cases include generating a basic button, fetching a modern login form, and listing available UI components for quick access and integration into applications.

How to use

To use mcp-ui-gen, install the dependencies using ‘pnpm install’, set your BUOU_API_KEY, and start the server with ‘pnpm start’. You can then create, fetch, or list UI components using specific commands.

Key features

Key features include the ability to create UI components from natural language descriptions, fetch existing components from buouui.com, list available components with previews, and TypeScript support for enhanced type safety.

Where to use

mcp-ui-gen can be used in web development projects where UI components need to be dynamically generated or managed through natural language, making it suitable for developers and designers.

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

2. 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

2. Fetch UI Component:

/ui fetch modern login form

3. 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:

• buouui.com
• Email: [email protected]