Mokkoi

AI-native mobile design tool. The first MCP server where AI coding agents generate, preview, and export production-ready React Native screens.

What is Mokkoi?

Mokkoi connects to Claude Code, Cursor, or any MCP-compatible AI agent and gives it the ability to generate beautiful, production-ready React Native screens from natural language descriptions.

Instead of writing boilerplate screen code by hand, describe what you want:

"Create a signup screen with name, email, password fields and a terms checkbox"

Mokkoi generates a complete, styled, accessible React Native component — ready to drop into your project.

Why Mokkoi?

• 29 production-ready templates covering auth, e-commerce, social, fintech, fitness, and more
• Design token system for consistent theming across every screen
• Built-in rules engine that validates WCAG contrast, touch targets, spacing grids, and more
• Full lifecycle management — create, update, export, and delete screens through 9 MCP tools

Quick Start

Claude Code

claude mcp add mokkoi -- npx mokkoi-mcp-server

Cursor / Other MCP Clients

Add to your MCP configuration:

{
  "mcpServers": {
    "mokkoi": {
      "command": "npx",
      "args": ["mokkoi-mcp-server"]
    }
  }
}

That's it. Your AI agent now has access to all 9 Mokkoi tools.

Features

| Feature | Details | |---|---| | Screen Templates | 29 production-ready React Native screens | | Design Rules | 8 validation rules (WCAG contrast, touch targets, spacing grid, etc.) | | Design Tokens | 9-color token system with dark theme defaults | | MCP Tools | 9 tools for full screen lifecycle management | | Accessibility | Every template includes accessibilityRole, accessibilityLabel, and accessibilityState | | Zero Config | Works out of the box — no setup, no API keys |

Available Tools

| Tool | Description | |---|---| | mokkoi_create_screen | Generate a new screen from name, category, and description. Runs design rules automatically. | | mokkoi_get_screen | Retrieve a screen by ID with its full generated code | | mokkoi_update_screen | Update screen properties and optionally regenerate code | | mokkoi_delete_screen | Delete a screen by ID | | mokkoi_list_screens | List all screens, optionally filtered by category | | mokkoi_export_screen | Export screen code as "component" or "full-file" format | | mokkoi_get_tokens | Get the current design token palette | | mokkoi_update_tokens | Update design tokens (hex colors). Changes apply to new screens. | | mokkoi_project_info | Get project overview: screen count, tokens, metadata |

Screen Templates

Auth (2)

| Template | Key Features | |---|---| | Login | Email/password inputs, forgot password, loading state | | Signup | Name, email, password, confirm password, terms checkbox, validation |

Dashboard (4)

| Template | Key Features | |---|---| | Dashboard | Metrics grid with change indicators | | Home | Time-aware greeting, quick actions grid, recent activity list | | Wallet | Card display, balance, send/receive/pay actions, recent transactions | | Activity Rings | Circular progress indicators, daily goals, weekly streak |

Social (2)

| Template | Key Features | |---|---| | User Feed | Post cards with avatar, image, like/comment/share actions | | Social Profile | Avatar, bio, follower counts, follow/message buttons, posts/media/likes tabs |

E-commerce (3)

| Template | Key Features | |---|---| | Product Listing | Product card grid, sort chips, price tags, sale/new badges, ratings | | Product Detail | Image carousel, pricing, quantity control, reviews, add to cart | | Cart | Item list, quantity controls, subtotal/shipping/total, checkout button |

Fintech (2)

| Template | Key Features | |---|---| | Transaction History | SectionList with date groups, category icons, amounts, filter tabs | | Wallet/Balance | Credit card display, balance, action buttons, recent transactions |

Fitness (2)

| Template | Key Features | |---|---| | Workout Tracker | Exercise list, sets/reps/weight table, timer, start/pause button | | Activity Rings | Ring progress visualization, weekly streak dots, goal progress bars |

General (9)

| Template | Key Features | |---|---| | Settings | Section-based layout, toggles, navigation items, sign out | | Profile | Avatar, name, stats row, edit profile button | | List | FlatList with icons, titles, subtitles, chevron indicators | | Form | Text, email, phone inputs, dropdown, date, toggle, textarea | | Tab Navigator | Bottom tab bar with 5 tabs, active/inactive states, create button | | Modal/Bottom Sheet | Drag handle, option list, backdrop, cancel button | | Error | Error illustration, message, retry and go back buttons | | Success | Animated checkmark area, sparkle decorations, continue button | | Splash/Loading | Logo, app name, tagline, ActivityIndicator |

Content (5)

| Template | Key Features | |---|---| | Chat | Message bubbles, typing indicator, input bar with send button | | Search | Search bar with focus state, recent searches, trending, results grid | | Notifications | Read/unread states, filter tabs, mark all read, timestamps | | Onboarding | Horizontal pager, illustrations, pagination dots, skip/next | | Detail | Hero image, bookmark toggle, stats row, sticky action bar | | Empty State | Decorative illustration, title, subtitle, CTA button |

Design Tokens

Every generated screen uses a 9-color design token system. Default dark theme:

background    #0F172A   ████  Deep navy
surface       #1E293B   ████  Card backgrounds
primary       #3B82F6   ████  Interactive elements
accent        #2DD4BF   ████  Secondary actions
text          #F8FAFC   ████  Primary text
textSecondary #94A3B8   ████  Captions, labels
border        #334155   ████  Dividers, outlines
error         #EF4444   ████  Error states
success       #22C55E   ████  Success states

Update tokens at any time — changes apply to all newly created screens:

"Update the primary color to #8B5CF6 and the accent to #F472B6"

Design Rules Engine

Every screen is automatically validated against 8 design quality rules:

| Rule | Severity | What It Checks | |---|---|---| | touch-target | warning | Touchable elements have minHeight >= 44px | | font-size-minimum | error | No text smaller than 12px | | font-size-body | warning | Body text uses fontSize >= 16px | | color-contrast | error | WCAG AA contrast ratio >= 4.5:1 | | safe-area | error | SafeAreaView used as root container | | scroll-handling | warning | ScrollView/FlatList when content may overflow | | spacing-grid | warning | Padding/margin/gap values on 4/8pt grid | | platform-awareness | warning | Platform.OS checks for iOS/Android differences |

Violations are returned alongside the generated code so the AI agent can fix issues automatically.

Examples

1. Create a login screen

Prompt:

Create a login screen for my fitness app

What happens: Mokkoi generates a complete login screen with email/password inputs, forgot password link, sign in button with loading state, and sign up footer — all styled with your design tokens.

2. Build an e-commerce flow

Prompt:

I need a product listing page, a product detail page, and a shopping cart

What happens: Three screens generated in sequence — a filterable product grid, a detail page with image carousel and reviews, and a cart with quantity controls and checkout summary.

3. Customize the theme

Prompt:

Update my design tokens to use a purple theme: primary #8B5CF6, accent #F472B6, background #1A1025

What happens: Mokkoi updates the token palette. All subsequent screens use the new purple theme automatically.

Project Structure

src/
├── index.ts              MCP server — registers all 9 tools
├── types.ts              TypeScript interfaces
├── constants.ts          Default tokens, category arrays
├── schemas/
│   └── index.ts          Zod validation schemas
└── services/
    ├── generator.ts      29 screen templates
    ├── store.ts          In-memory project state
    └── rules.ts          8 design validation rules

Development

npm install         # Install dependencies
npm run build       # Compile TypeScript
npm run dev         # Run with tsx (hot reload)
npm run start       # Run compiled server

Tech Stack

• TypeScript — strict mode, ES modules
• @modelcontextprotocol/sdk — MCP server framework
• Zod — runtime input validation
• Node.js — stdio transport

License

MIT