Skip to main content
Glama
Sign In
Rakit UI AI

Rakit UI AI

by madebyaris
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Remote

Rakit UI AI - MCP Design Selection Tool

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.

Features

  • 🤖 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

Related MCP server: webappmcp

Quick Start

# 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

Setup

Cursor IDE

  1. Open Settings (Cmd+, or Ctrl+,)

  2. Navigate to MCP settings

  3. Add new server:

    • Name: rakitui-ai

    • Command: rakitui-ai

    • Environment Variables: MINIMAX_API_KEY (optional)

Or edit settings.json:

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

  1. Restart Cursor

Claude Desktop

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

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

Usage

AI-Powered Generation

Simply describe what you need:

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
});

Manual Design Input

Provide your own designs:

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>`
});

Response

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

Parameters

AI Generation Parameters

Parameter

Type

Description

prompt

string

Natural language description of the UI component

style_preference

string

Style guidance (e.g., "modern", "minimalist")

framework

string

CSS framework (tailwind, bootstrap, bulma, etc.)

component_type

string

Component type (button, card, form, navigation, etc.)

auto_search_reference

boolean

Enable automatic reference search

purpose_include

string[]

Elements that must be included

purpose_exclude

string[]

Elements to avoid

purpose_notes

string

Additional requirements

view_mode

string

Preview mode: "mobile", "desktop", or "responsive"

Manual Input Parameters

Parameter

Type

Description

design_name_1/2/3

string

Name of each design

design_html_1/2/3

string

HTML content of each design

Supported Frameworks

  • Tailwind CSS

  • Bootstrap

  • Bulma

  • Foundation

  • Semantic UI

  • Plain CSS

Supported Components

  • 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)

Keyboard Shortcuts

  • 1, 2, 3 - Quick select design

  • Escape - Close zoom view

  • Click design - Zoom in for detailed view

Troubleshooting

Command not found:

  • Ensure npm global bin is in your PATH

  • Or use full path: /usr/local/bin/rakitui-ai (Mac)

Tool not appearing:

  • Restart your IDE completely

  • Check MCP server status indicator

MiniMax API not working:

  • Verify MINIMAX_API_KEY is set correctly

  • Check your MiniMax account has credits

Development

# Clone and install
git clone https://github.com/madebyaris/rakitui-ai.git
cd rakitui-ai
npm install

# Build
npm run build

# Start
npm start

License

MIT License - see LICENSE file for details.

Links

Available Tools

1 tool
mcp_rakit-ui-ai_designselectionB

Compare and select between 3 UI component designs with intelligent layout adaptation. Supports all CSS frameworks (Tailwind, Bootstrap, Bulma, etc.) and automatically chooses the best viewing mode based on component complexity. Perfect for design systems, component libraries, and UI pattern selection. NEW: Can generate designs from natural language prompts using MiniMax-M2.1 API - just provide a prompt and the tool will create 3 distinct designs for you to choose from.

Inputs: prompt (required), style_preference (required), framework (required), component_type (required), +6 more.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    TDQS

    B3.1/5.0

    Scored across 1 tool

    Disambiguation5/5

    With only one tool, there is no possibility of ambiguity or overlap between tools. The tool has a single, well-defined purpose focused on UI design selection and generation.

    Naming Consistency5/5

    Since there is only one tool, naming consistency is inherently perfect. The tool name follows a clear pattern (mcp_rakit-ui-ai_designselection) that would be consistent if more tools existed.

    Tool Count2/5

    A single tool is too few for a server named 'Rakit UI AI', which suggests a broader UI/design domain. The tool covers design selection and generation, but lacks complementary operations like editing, saving, or managing designs, making the scope feel incomplete.

    Completeness2/5

    The tool provides design selection and generation, but there are significant gaps for a UI AI server. Missing operations include editing designs, saving/loading designs, integrating with design systems, or handling user feedback, which limits agent workflows.

    Maintenance

    ActivityInactive
    ResponsivenessNo recent community issues

    Resources

    Related MCP Connectors

    Related MCP Servers

    • webappmcp

      cgaspard
      A
      license
      Not graded
      quality
      D
      maintenance
      Enables AI assistants to interact with web applications through DOM inspection, user interaction simulation, and application state management.
      MIT

    • ui-architect-mcp

      foduucom
      A
      license
      A
      quality
      D
      maintenance
      Enables AI assistants to generate production-ready, professional UI design systems and components from simple descriptions, with real images, animated components, and automated quality checks.
      16
      MIT
    • artisign

      artisignofficial

      artisign
      A
      license
      Not graded
      quality
      B
      maintenance
      Enables AI agents to create and manage consistent multi-screen UI designs through a token-efficient MCP interface, with design system tokens, components, flows, and visual review.
      118 npm
      2
      AGPL 3.0

    Appeared in Searches