Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.7K
Sign inGet All-Access
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Embed
  • Agent Skills
  • llms.txt
  • RTL
  • Changelogv2.8.1
  • YouTube
MCP Server
  • Claude
  • CodexCodexCodex
  • Cursor
  • Grok
  • Conductor
  • v0
  • Lovable
  • Replit
  • Bolt
  • OpenCode
  • VS Code
  • GitHub Copilot
  • Kilo Code
  • Zed
  • Antigravity
  • Gemini CLI
Components
  • Alert
  • Autocomplete
  • Badge
  • CascaderCascader keeps a saved selection's full path, popup open or closed
  • Code Block
  • Color Picker
  • Data GridData Grid works in apps that run React Compiler, with resizing, edits and callbacks kept live
  • Date SelectorDate Selector keeps its year list and Today button current in apps that run React Compiler
  • Emoji Picker
  • Event CalendarEvent Calendar keeps today and the agenda current in apps that run React Compiler
  • File TypeFile Type knows 171 formats, .env and Dockerfile included
  • File Upload
  • Filters
  • Frame
  • GanttGantt keeps its Today button and tooltip current in apps that run React Compiler
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Signature Pad
  • Sortable
  • Stepper
  • Time Picker
  • Timeline
  • Tree

Grok

PreviousNext

Connect the ReUI MCP server to Grok Build, xAI's coding CLI, and build UI from the ReUI registry by chat.

Grok Build is xAI's terminal coding agent (the grok command). It speaks MCP natively over Streamable HTTP, so one command connects it to the ReUI registry and you can build UI from ReUI components, examples, and blocks right in your terminal. For the shared background (the tools, the plan limits, the sign-in flow) see the MCP server overview.

Connect ReUI

Add the ReUI server

From your project, register ReUI as a remote HTTP server:

Terminal
grok mcp add --transport http reui https://mcp.reui.io

That writes an entry into ~/.grok/config.toml you can also edit by hand:

~/.grok/config.toml
[mcp_servers.reui]
url = "https://mcp.reui.io"

Sign in with ReUI

ReUI requires an account, and Grok triggers a browser flow on first use for servers that ask for OAuth. Approve the "Sign in with ReUI" prompt and you are set. If you do not have a ReUI account yet, a free one is created right there in the same flow, so there is nothing to set up in advance.

You can also start the flow yourself: type /mcps to open the MCP tab of the extensions modal, select reui, and press i to authenticate. Grok stores the tokens in ~/.grok/mcp_credentials.json.

Headless and CI

For non-interactive runs (grok -p, cron jobs, pipelines) 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:

Terminal
grok mcp add --transport http reui https://mcp.reui.io \
  --header "Authorization: Bearer reui_pat_your_token_here"

Grok expands ${VAR} (and ${VAR:-default}) inside url, command, args, env and headers, so the token can stay in the environment rather than in the file:

~/.grok/config.toml
[mcp_servers.reui]
url = "https://mcp.reui.io"
headers = { Authorization = "Bearer ${REUI_MCP_TOKEN}" }

This header is an alternative to the browser sign-in, not an addition to it. It is sent on every request and takes precedence over any OAuth credential the client has stored, so leave it out entirely on the sign-in path - otherwise authenticating appears to succeed while every call keeps failing.

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 - create a fresh one at Account → MCP and update the header or CI secret.

The ReUI skill

There is nothing to install. The build workflow rides on the MCP: once reui is connected, ask Grok to call get_agent_skill for the core workflow (the reuse-first rule and the plan, find, install, read the API, adapt, then check order) and a list of topics, then ask for a topic (color, motion, layout, components) to read that reference in full. If a build drifts off-pattern, tell it to "follow the ReUI skill" to reload that workflow.

If you would rather keep a local copy, the plain project installer already covers it. Grok reads Claude Code's skills, MCP entries, and instruction files with no configuration, and the installer writes the skill to both <project>/.claude/skills/reui and <project>/.agents/skills/reui:

Optional - install the skill in your project
curl -fsSL https://mcp.reui.io/install | node -

Global mode writes the same skill to ~/.claude/skills/reui and ~/.agents/skills/reui, the user-level directories Grok reads:

Optional - install the skill globally
curl -fsSL https://mcp.reui.io/install | REUI_GLOBAL=1 node -

Two things to know before running either one. The installer adds a reui entry to Codex's ~/.codex/config.toml in both modes, so choosing project mode does not leave that file alone; global mode additionally merges one into ~/.claude.json and into the home configs of Cursor, OpenCode and Gemini CLI. And each run replaces the managed reui skill directory outright rather than merging into it, so local edits inside it do not survive an update.

Build with ReUI

Describe the interface you want in plain language and Grok 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 27 components and every c-* example) install with no license. To let Grok install premium blocks and icons 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 shadcn CLI expands ${REUI_LICENSE_KEY} from .env.local. Grok expands ${...} in its own config too, but the two read different values: components.json wants your license key, while the MCP header wants a personal token, so keep them in separate variables.

That is it - Grok 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

Start with grok mcp doctor reui, which reports what the connection is actually doing. Beyond that, a browser sign-in can be renewed but a personal token has to be replaced.

  • Tools missing, greyed out, or "not connected" - the server did not finish connecting. To fix it, open /mcps, make sure reui is toggled on with Space, press r to refresh after any config edit, then restart Grok.
  • 401 and you signed in through the browser - your ReUI session expired. To fix it, open /mcps, select reui, and press i to authenticate again.
  • 401 and you use a personal token (headless or CI) - the token has expired or been revoked. Re-authenticating will not help, because the Authorization header your job sends is not a browser session. Create a new token at Account → MCP and update 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, press r in /mcps to refresh reui and retry your last prompt.
  • Sign-in appears to work but every call still 401s - check whether you have a headers = { Authorization = ... } line on the reui server. A configured credential is sent on every request and overrides the OAuth credential the sign-in stores, so while it is there opening /mcps, selecting reui, and pressing i cannot take effect. The two are alternatives, not layers: use the header only on the headless path, and remove it if you want the browser sign-in.
  • "Your free ReUI MCP allowance ... is used up" in a tool result - the free plan has a daily MCP request allowance and today's is used up. It arrives as a normal tool result Grok shows you, not an HTTP error, so there is no status code to look for, and it resets at UTC midnight. For unlimited requests use a Pro or Ultimate license key, or a personal token from a licensed account, as your MCP credential, or wait for the reset.
  • 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.
CursorConductor

On This Page

Connect ReUIHeadless and CIThe ReUI skillBuild with ReUIUnlock premium itemsTroubleshooting

Application

  • App Shell
  • Auth
  • Card
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats2 meter cards moved here from Charts, 17 in all
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • Base
  • AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area ChartAdded a new Inbound Leads area chart block
  • Bar Chart
  • Composed Chart
  • Line Chart
  • Pie Chart
  • Radial Chart
  • Sankey ChartNew Sankey Chart category with 3 flow chart blocks
  • Slope ChartNew Slope Chart category with 2 rank-shift chart blocks
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageNew AI Usage category with 2 spend blocks

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • Billing
  • Bookings
  • Files
  • Inventory
  • Users
  • Digital TwinNew Digital Twin category with 2 interactive 3D blocks

Templates

  • All templates

eCommerce

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

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

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

© 2026 ReUI. All rights reserved.

3.7K