Rakit UI AI is an intelligent UI component design selection tool that generates and compares UI designs through AI-powered generation or manual evaluation.

Core Capabilities:

• AI-Powered Generation: Create 3 distinct UI component designs from natural language prompts using the MiniMax-M2.1 API, with customizable style_preference, target CSS framework, and component_type

• Manual Comparison: Evaluate up to 3 custom HTML designs (design_html_1/2/3) side-by-side for selection

• Multi-Framework Support: Works with Tailwind CSS, Bootstrap, Bulma, Foundation, Semantic UI, and plain CSS

• Component Specialization: Optimized for buttons, cards, forms, navigation, modals, and tables

• Design Requirements: Define elements to purpose_include or purpose_exclude, add purpose_notes, and enable auto_search_reference for AI generation

• Interactive Preview: Visual comparison interface with multiple view_mode options (mobile, desktop, responsive), zoom controls, and keyboard shortcuts (1/2/3 for quick selection)

• Smart Output: Returns JSON response with selectedDesign (name and HTML), alternative options, and selection_context

Ideal for design systems, component libraries, and UI pattern selection workflows.

Generates and displays UI component designs using Bootstrap framework, allowing users to visually compare and select from multiple design variations

Generates and displays UI component designs using Bulma framework, allowing users to visually compare and select from multiple design variations

Generates and displays UI component designs using plain CSS or inline styles, allowing users to visually compare and select from multiple design variations

Generates and displays UI component designs using Semantic UI framework, allowing users to visually compare and select from multiple design variations

Generates and displays UI component designs using Tailwind CSS framework, allowing users to visually compare and select from multiple design variations

1. Click on "Install Server".

2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.

3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Rakit UI AI create 3 modern navbar designs for my e-commerce site"

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.