Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.2K
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Agent Skills
  • Changelog
MCP Server
  • Claude
  • CodexCodexCodex
  • Cursor
  • Grok
  • Conductor
  • v0
  • Lovable
  • Replit
  • Bolt
  • OpenCode
  • VS Code
  • GitHub Copilot
  • Kilo Code
  • Zed
  • Antigravity
Components
  • Alert
  • Autocomplete
  • Badge
  • Data GridAutosizing, fill and resize hardening, React Compiler ready
  • Date Selector
  • Event CalendarNew event calendar component with five views
  • File Upload
  • FiltersSizing and interaction refinements
  • Frame
  • GanttNew gantt component with day to year scales
  • Icon Stack
  • Icon TileNew icon tile component with five surface variants
  • KanbanonValueCommit callback and accessibility improvements
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • SortableonValueCommit callback and accessibility improvements
  • StepperRender prop composition and styling refinements
  • Timeline
  • Tree

Application

  • App Shell
  • Auth
  • Card
  • Chart
  • Dashboard
  • Dialog
  • Empty State
  • Event CalendarNew event calendar block added
  • Form
  • GanttNew gantt block added
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Schedule
  • Settings
  • Sheet
  • Stats
  • Timeline
  • Wizard

Solutions

  • Agents
  • AI Ops
  • Analytics
  • Billing
  • Bookings
  • CRM
  • Inventory
  • Users

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist

Data Grid

  • Base
  • Columns
  • Drag & Drop
  • EditingNew editable Data Grid block added
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Marketing

  • Blog
  • Contact
  • CTA
  • FAQ

Resources

  • Components
  • Blocks
  • Docs
  • Support
  • Pricing
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.2K

Kilo Code

PreviousNext

Connect the ReUI MCP server to Kilo Code and build UI from the ReUI registry by chat.

Kilo Code speaks MCP over Streamable HTTP, so one config entry connects it to the ReUI registry and you can build UI from ReUI components, examples, and blocks without leaving your editor. The endpoint is the same everywhere, https://mcp.reui.io, and for the shared background (the tools, the plan limits, the sign-in flow) see the .

Connect ReUI

Add the ReUI MCP server

Open Settings → MCP, click Add Server, and choose the Remote server type. Or edit the config file directly: ~/.config/kilo/kilo.jsonc applies to every project, and kilo.jsonc in your project root (or .kilo/kilo.jsonc) scopes it to one.

~/.config/kilo/kilo.jsonc
GitHub CopilotZed

On This Page

Connect ReUIHeadless and CIThe ReUI skillBuild with ReUIUnlock premium itemsTroubleshooting
{
  "mcp": {
    "reui": {
      "type": "remote",
      "url": "https://mcp.reui.io",
      "enabled": true
    }
  }
}

Two things here catch people out. The top-level key is mcp, not the mcpServers most other agents use, and a remote server needs "type": "remote" rather than the http other clients expect. An entry with either one wrong simply never connects.

Sign in with ReUI

Kilo Code handles OAuth 2.0 for remote servers itself and starts the flow automatically when it connects, so the entry above needs no client id, secret, or token. Approve the "Sign in with ReUI" prompt in your browser and you are connected. If you do not have a ReUI account yet, a free one is created in that same flow.

The oauth key exists to turn this off ("oauth": false) for servers that authenticate some other way. Leave it out for ReUI.

Confirm the connection

Back in Settings → MCP, reui should be listed and enabled. The same panel is where you enable or disable a server without deleting it, edit its entry, or remove it entirely.

Headless and CI

For runs where no browser prompt is possible, create a personal token at Account → MCP (it looks like reui_pat_...) and send it as a Bearer header instead of signing in:

~/.config/kilo/kilo.jsonc
{
  "mcp": {
    "reui": {
      "type": "remote",
      "url": "https://mcp.reui.io",
      "headers": {
        "Authorization": "Bearer reui_pat_your_token_here"
      },
      "enabled": true,
      "timeout": 15000
    }
  }
}

Kilo Code's docs show literal header values and document no variable substitution for this file, so paste the real token and keep the file out of version control. timeout is optional and in milliseconds.

Tokens expire after 90 days by default (30, 60, 90 and 180 are offered, plus No expiry for pipelines that cannot rotate). Nothing warns you beforehand, so an expired token simply starts returning 401 and has to be replaced, not re-authenticated.

The ReUI skill

There is nothing to install. The build workflow rides on the MCP: once reui is connected, ask Kilo Code to call get_agent_skill and it loads the full ReUI workflow (the reuse-first rule and the find, read the real API, install, then adapt order) as a document. If a build drifts off-pattern, tell it to "follow the ReUI skill" to reload that workflow.

Skip the one-line installer used in other guides here. It writes skill directories (.claude/skills, .agents/skills) that Kilo Code does not read: its instruction files are AGENTS.md, CLAUDE.md, and CONTEXT.md, discovered at the project root and in parent directories, with ~/.config/kilo/AGENTS.md for a global one. If you want the workflow on disk, paste it into AGENTS.md rather than running the installer.

Build with ReUI

Describe the interface you want in plain language and Kilo Code pulls the right ReUI components, examples, and blocks from the registry, then wires them into your project.

Prompt
Use ReUI to scaffold an admin app - the app-shell with a collapsible sidebar and top bar, and a dashboard page with stat cards and a chart.
Prompt
Add a data-grid of orders with sorting, column filters, pagination, and row selection, wired to my /api/orders endpoint.
Prompt
Build a multi-step "create project" wizard with the ReUI stepper and form components, with validation on each step.
Prompt
Add a kanban board for support tickets with drag and drop, grouped by status, and a filters bar above it.

Unlock premium items

Free items (the 20 components and every c-* example) install with no license. To let Kilo Code install premium blocks, icons, and templates too, grab a Pro or Ultimate license - one license unlocks the whole premium registry and removes the daily MCP request limit. Then add your key to the project - two quick steps:

Add your license key

Copy your key from Account → Licenses into .env.local at the project root:

.env.local
REUI_LICENSE_KEY=your-license-key-here

Add the @reui registry to components.json

components.json
{
  "registries": {
    "@reui": {
      "url": "https://reui.io/r/{style}/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REUI_LICENSE_KEY}"
      }
    }
  }
}

The ${REUI_LICENSE_KEY} reference belongs here, where the shadcn CLI expands it from .env.local. Do not copy it into kilo.jsonc: that file takes a literal value, so the placeholder would reach the server as text and fail with a 401.

That is it - Kilo Code can now install any premium item the MCP returns, and free items keep working through the same config. See License Setup for the full guide, or compare plans on the Pricing page.

Troubleshooting

Most hiccups are the config shape or a stale credential. A browser sign-in can be renewed; a personal token has to be replaced.

  • Tools missing, greyed out, or "not connected" - the server did not finish connecting. To fix it, confirm the entry sits under the mcp key with "type": "remote", check it is toggled on in Settings → MCP, then reload the window.
  • 401 and you signed in through the browser - your ReUI session expired. To fix it, disable and re-enable reui in Settings → MCP so Kilo Code starts the OAuth flow again.
  • 401 and you use a personal token - the token is missing, mistyped, expired, or revoked. Re-authenticating will not help, because the Authorization header is not a browser session. Create a new token at Account → MCP and paste it into the header. The 401 body names which of the two it was.
  • Requests hang or the session drops mid-build - long sessions can lose the connection. To fix it, toggle reui off and on in Settings → MCP and retry your last prompt. Raising timeout helps on a slow network.
  • 429 "daily limit reached" - you hit the free limit of 100 tool calls per day. Sign in with your ReUI license for unlimited access, or wait for the next day.
  • Every ReUI call fails and nothing asks you to sign in - the stored OAuth connection is dead (revoked, expired, or invalidated after a suspicious reuse), and the client is silently retrying a credential that can never work again. Account → MCP shows the connection as Disconnected when this is the case. Reconnect the same way as the 401 fix above; retrying without signing in again cannot recover it.
MCP server overview