The SupaUI MCP Server enables interaction with UI components through natural language.
Generate React Components: Create UI components using natural language descriptions
Fetch UI Components: Retrieve existing components from buouui.com
Browse Components: List available components with previews and metadata
Image Handling: Generate or edit images based on user requests and return URLs
TypeScript Integration: Built with TypeScript for enhanced type safety
Runs on Node.js, allowing deployment of the UI generation capabilities as a service accessible via API endpoints.
Uses pnpm for package management, providing an efficient way to install and manage dependencies for the UI component server.
Enables the generation of React components based on natural language descriptions, supporting the creation of UI elements for React applications.
Built with TypeScript for better type safety, providing well-typed component generation and API interactions for UI development.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@SupaUI MCP Server create a responsive navigation bar with dark mode toggle"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
A Model Context Protocol (MCP) server for SupaUI that enables AI agents to generate, fetch, and manage UI components through natural language interactions.
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
Related MCP server: MCP Magic UI
use Smithery to install supaui-mcp in Claude：
npx -y @smithery/cli install @buoooou/supaui-mcp --client claudeclone repo：
git clone [your-repository-url]
cd mcp-ui-gen=======
Node.js (Latest LTS version)
BUOU_API_KEY from buouui.com
# Install dependencies
pnpm install
# Build the project
pnpm buildSet your BUOU_API_KEY in the environment:
export BUOU_API_KEY=your_api_key_hereOr create a configuration file based on smithery.yaml requirements.
pnpm startThe server supports the following commands:
Create UI Component:
/ui create a basic buttonFetch UI Component:
/ui fetch modern login formList UI Components:
/buou list cardsGenerates new UI components based on natural language descriptions
Endpoint: /api/create
Retrieves existing components from buouui.com
Endpoint: /api/fetch
Lists available components with previews
Endpoint: /api/list
# Build in watch mode
tsc -w
# Run tests
pnpm testBUOU_API_KEY: Your API key from buouui.com (Required)
Fork the repository
Create your feature branch
Commit your changes
Push to the branch
Create a Pull Request
ISC
For support, please visit:
Email: support@buouui.com
"Use this tool when the user requests a new image, mentions /buou /image or asks for a image. If the customer provides the picture editing operation of the attachment, please send it to the corresponding tool. This tool ONLY returns the url of the image. After calling this tool, Please show the image returned by this tool and provide it for download.
| Name | Required | Description | Default |
|---|---|---|---|
| message | Yes | Translate into English and explain the content of the customer's image. | |
| image | Yes | If the customer provides the picture editing operation of the attachment,please send it to the corresponding tool,otherwise, pass an empty string |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions the tool only returns a URL and that the image should be shown and provided for download after calling, which adds some context. However, it lacks critical details like whether this is a generative AI tool, an upload tool, potential rate limits, authentication needs, or error handling, making it insufficient for a mutation-like operation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is relatively concise with four sentences, but it's not optimally structured. It mixes usage guidelines, parameter hints, and post-call instructions without clear separation. Some sentences could be more direct, and the repetition about the 'image' parameter from the schema reduces efficiency, though it avoids excessive verbosity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no annotations, no output schema, and a tool that likely creates images (a mutation operation), the description is incomplete. It lacks details on what the tool actually does (e.g., generates images via AI, uploads files), expected inputs beyond schema basics, error cases, and output handling. The post-call instruction to show and provide the image for download is helpful but doesn't compensate for missing core behavioral context.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents both parameters ('message' and 'image') with descriptions. The description adds minimal value by reiterating the 'image' parameter's condition but doesn't provide additional meaning beyond what's in the schema, such as format examples or usage nuances. Baseline 3 is appropriate as the schema handles most documentation.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states the tool is for creating images when users request them, but it's vague about what 'create' actually means (generation, upload, etc.). It doesn't clearly distinguish from sibling tools like 'fetch-ui' or 'list-ui' which might handle image retrieval. The purpose is somewhat indicated but lacks specificity about the actual creation mechanism.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides some usage context: use when users request a new image, mention '/buou /image', or ask for an image. It also gives an exclusion rule: if the customer provides picture editing operations, use another tool. However, it doesn't specify what the 'corresponding tool' is or offer alternatives for different scenarios, leaving gaps in guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
"Use this tool when the user wants to see component, get inspiration, or /buou or /ui fetch data and previews from buouui.com. This tool ONLY returns the text snippet for that UI component. After calling this tool, you must edit or add files to integrate the snippet into the codebase."
| Name | Required | Description | Default |
|---|---|---|---|
| message | Yes | Full users message | |
| searchQuery | Yes | Search query for buouui.com(library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool 'ONLY returns the text snippet' and that after calling, 'you must edit or add files to integrate the snippet into the codebase', which provides some behavioral context about the output and required follow-up actions. However, it doesn't cover important aspects like whether this is a read-only operation, potential rate limits, authentication needs, or error conditions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is appropriately sized with three sentences that each serve a purpose: when to use the tool, what it returns, and what to do after calling it. It's front-loaded with the primary use case. There's minimal waste, though the phrasing could be slightly more polished.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given 2 parameters with 100% schema coverage but no annotations and no output schema, the description provides adequate but incomplete context. It explains the tool's purpose and post-call requirements but doesn't describe the return format (beyond 'text snippet'), error handling, or how the tool interacts with the buouui.com API. For a tool with no output schema, more detail about the return value would be helpful.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents both parameters thoroughly. The description doesn't add any additional meaning about the parameters beyond what's in the schema - it doesn't explain how 'message' and 'searchQuery' relate to each other or provide usage examples. This meets the baseline of 3 when schema coverage is high.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states the tool fetches UI component text snippets from buouui.com, which is a clear purpose. However, it doesn't distinguish this from sibling tools like 'list-ui' or 'create-image' - it mentions 'get inspiration' which could overlap with 'list-ui', and 'previews' which might relate to 'create-image', but no explicit differentiation is provided.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explicitly states 'Use this tool when the user wants to see component, get inspiration, or /buou or /ui fetch data and previews from buouui.com', providing clear context for when to use it. However, it doesn't mention when NOT to use it or explicitly compare it to alternatives like 'list-ui' or 'create-image'.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
"Use this tool when the user wants to see buouui.com component, or /buou fetch data and previews from buouui.com. This tool returns the JSON data of matching components without generating new code. This tool ONLY returns the text snippet for that UI component. After calling this tool, you need to display the data in the UI, and finally you need to show the website page of the buouui.com."
| Name | Required | Description | Default |
|---|---|---|---|
| message | Yes | Full users message | |
| searchQuery | Yes | Search query for buouui.com(library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden but lacks critical behavioral details. It mentions the tool returns JSON data without generating code and requires displaying data and a website page afterward, but it doesn't cover permissions, rate limits, error handling, or what 'matching components' entails. The post-call instructions ('display the data in the UI, show the website page') are unclear and not typical tool behavior disclosure.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is poorly structured with run-on sentences and redundancy (e.g., repeating 'buouui.com'). It includes extraneous instructions about post-call actions ('display the data in the UI, show the website page') that don't belong in a tool description. While brief, it's not front-loaded or efficiently written, reducing clarity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no annotations, no output schema, and a tool with two parameters, the description is incomplete. It fails to explain the return format (beyond 'JSON data'), error cases, or how results are matched. The mention of sibling tools without differentiation further reduces completeness, leaving gaps in understanding the tool's role and behavior.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the baseline is 3. The description doesn't add any meaningful parameter semantics beyond what's in the schema (e.g., it doesn't explain how 'message' and 'searchQuery' interact or provide examples). However, it doesn't contradict the schema, so it meets the minimum viable standard.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states the tool retrieves UI components from buouui.com and returns JSON data, which clarifies the basic purpose. However, it doesn't clearly distinguish this tool from sibling 'fetch-ui' (both seem to fetch UI data), and the phrasing 'see buouui.com component, or /buou fetch data and previews' is somewhat vague and redundant.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides minimal guidance with 'Use this tool when the user wants to see buouui.com component', but it doesn't explain when to choose this over sibling tools like 'fetch-ui' or 'create-image'. No explicit alternatives, exclusions, or contextual prerequisites are mentioned, leaving usage unclear relative to other tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
The tools have unclear boundaries and overlapping purposes. 'fetch-ui' and 'list-ui' both handle UI components from buouui.com with similar triggers ('/buou'), making them easily confused. 'create-image' is more distinct but still shares the '/buou' trigger, adding to the ambiguity. The descriptions don't clearly differentiate when to use one over the other.
The naming follows a mixed convention: 'create-image' uses a verb_noun pattern with hyphenation, while 'fetch-ui' and 'list-ui' use verb_noun with underscores. This inconsistency in delimiter usage (hyphens vs. underscores) reduces predictability, though the verb_noun structure is mostly maintained across tools.
With only 3 tools, the count feels thin for a server named 'SupaUI MCP Server', which suggests a broader UI-related scope. While it covers image creation and UI component fetching/listing, the limited number might not support comprehensive UI workflows, such as editing or managing components beyond basic retrieval.
The tool set is significantly incomplete for a UI-focused server. It lacks essential operations like updating or deleting UI components, managing image edits, or handling user interactions beyond fetching. The overlap between 'fetch-ui' and 'list-ui' further complicates coverage, leaving obvious gaps in CRUD/lifecycle management for the domain.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
A Model Context Protocol server for Wix AI tools
MCP server for building and testing AI agents with multi-model experimentation and insights.
The Mercado Pago MCP Server implements the Model Context Protocol to provide AI agents and LLMs with access to Mercado Pago's APIs and tools within compatible development environments. It acts as an intermediary that translates Mercado Pago resources into executable functions (tools) that AI applications can invoke to perform actions and automate flows. The server simplifies integration, enables using documentation to implement or improve code, and optimizes operations through natural language interactions without manual implementations.
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/buoooou/mcp-ui-gen'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
