Rakit UI AI

An intelligent UI component design selection tool built on the Model Context Protocol (MCP). Generate and compare UI designs using AI, or provide your own designs for selection.

- 🤖AI-Powered Generation- Generate designs from natural language using MiniMax-M2.1
- 🎨Visual Comparison- Side-by-side design comparison in a modern browser interface
- 📱Responsive Preview- Mobile, desktop, and responsive view modes
- 🔍HTML Reference Analysis- Automatically checks design completeness
- 🎯Purpose-Driven- Specify what to include/exclude in designs
- ⚡Real-time Selection- WebSocket support for instant feedback

# Install globally npm install -g rakitui-ai # Set MiniMax API key (for AI generation) export MINIMAX_API_KEY="your-api-key-here" # Run the MCP server rakitui-ai

- Open Settings (Cmd+,orCtrl+,)
- Navigate toMCPsettings
- Add new server:

- Name:rakitui-ai
- Command:rakitui-ai
- Environment Variables:MINIMAX_API_KEY(optional)

{ "mcpServers": { "rakitui-ai": { "command": "rakitui-ai", "env": { "MINIMAX_API_KEY": "your-api-key-here" } } } }

Edit~/Library/Application Support/Claude/claude_desktop_config.json:

{ "mcpServers": { "rakitui-ai": { "command": "rakitui-ai" } } }

const result = await tool.execute({ prompt: "Create 3 modern button designs for a SaaS dashboard", style_preference: "clean and professional", framework: "tailwind", component_type: "button", auto_search_reference: true, // Get design references purpose_include: ["hover state", "focus state"], // Must include purpose_exclude: ["animations"], // Must avoid view_mode: "responsive" // mobile | desktop | responsive });

const result = await tool.execute({ design_name_1: "Modern Button", design_html_1: <button class="bg-blue-500 text-white px-4 py-2 rounded">Click me</button>, design_name_2: "Classic Button", design_html_2: <button class="btn btn-primary">Click me</button>, design_name_3: "Minimal Button", design_html_3: <button class="px-4 py-2 border rounded">Click me</button> });

{ "success": true, "selectedDesign": "Modern Button", "selectedDesignHtml": "<button>...</button>", "design_options": [...], "selection_context": { "purpose": {...}, "references": [...], "view_mode": "responsive" } }

- Tailwind CSS
- Bootstrap
- Bulma
- Foundation
- Semantic UI
- Plain CSS

- Buttons (primary, secondary, outlined, with icons)
- Cards (content, featured, compact)
- Forms (inputs, validation, layouts)
- Navigation (bars, menus, responsive)
- Modals (dialogs, confirmations)
- Tables (data, striped, responsive)

- 1,2,3- Quick select design
- Escape- Close zoom view
- Click design - Zoom in for detailed view

- Ensure npm global bin is in your PATH
- Or use full path:/usr/local/bin/rakitui-ai(Mac)

- Restart your IDE completely
- Check MCP server status indicator

- VerifyMINIMAX_API_KEYis set correctly
- Check your MiniMax account has credits

# Clone and install git clone https://github.com/madebyaris/rakitui-ai.git cd rakitui-ai npm install # Build npm run build # Start npm start

MIT License - seeLICENSEfile for details.

- Repository:github.com/madebyaris/rakitui-ai
- Issues:GitHub Issues
- MiniMax API:platform.minimax.io

Provides instant access to Apple's Human Interface Guidelines, with content auto-updated periodically.