Skip to main content
Glama
madebyaris

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: mcp-popup-ui

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
promptYesNatural language description of the UI component to generate (e.g., 'Create 3 modern button designs for a SaaS dashboard'). When provided, the tool will use MiniMax-M2.1 to generate designs automatically. If provided, design_name_1/design_html_1 are not required.
style_preferenceYesOptional style guidance for design generation (e.g., 'modern and clean', 'playful and colorful', 'minimalist and professional').
frameworkYesTarget CSS framework for design generation (tailwind, bootstrap, bulma, foundation, semantic ui, or plain css). Defaults to 'tailwind'.
component_typeYesType of component to generate (button, card, form, navigation, modal, table). Helps optimize the prompt for better results.
design_name_1Yes[Optional] Name/title for the first design option. Only required if not using prompt-based generation.
design_html_1Yes[Optional] Complete HTML code for the first design. Only required if not using prompt-based generation.
design_name_2Yes[Optional] Name/title for the second design option
design_html_2Yes[Optional] Complete HTML code for the second design
design_name_3Yes[Optional] Name/title for the third design option
design_html_3Yes[Optional] Complete HTML code for the third design

TDQS

B3/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden for behavioral disclosure. It mentions 'intelligent layout adaptation', 'automatically chooses the best viewing mode', and API integration (MiniMax-M2.1), but fails to describe critical behavioral aspects: what 'compare and select' actually means operationally, whether designs are persisted or temporary, authentication requirements for the API, rate limits, error handling, or what the output looks like. The description provides some context but leaves significant gaps for a tool with 10 parameters.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness3/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is appropriately sized (4 sentences) but not optimally structured. It front-loads the core functionality but mixes multiple concepts (comparison/selection, layout adaptation, framework support, prompt generation) without clear separation. The 'NEW:' section feels tacked on rather than integrated. Some sentences could be more focused.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (10 parameters, no annotations, no output schema), the description is incomplete. It doesn't explain what 'compare and select' means in practice, what the output format is, how the 'intelligent layout adaptation' works, or what happens after selection. For a tool with this many parameters and no structured output documentation, the description should provide more operational context.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

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 all 10 parameters thoroughly. The description adds marginal value by mentioning the prompt-based generation feature and CSS framework support, but doesn't provide additional parameter semantics beyond what's in the schema descriptions. The baseline of 3 is appropriate when the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: 'Compare and select between 3 UI component designs with intelligent layout adaptation' and 'generate designs from natural language prompts'. It specifies the verb (compare/select/generate) and resource (UI component designs). However, without sibling tools, it cannot demonstrate differentiation from alternatives, preventing a perfect score.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage contexts ('Perfect for design systems, component libraries, and UI pattern selection') and mentions the new prompt-based generation feature, but lacks explicit guidance on when to use this tool versus other design tools or alternatives. No when-not-to-use scenarios or prerequisite conditions are provided.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

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

  1. 1 tool updatev1.0.0
    • First observedmcp_rakit-ui-ai_designselection
Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

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 issues

Resources

Related MCP Connectors

Related MCP Servers

Appeared in Searches