Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.3K
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Agent Skills
  • llms.txt
  • RTL
  • 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
  • CascaderNew component for nested multi-level selection
  • Data Grid
  • Date Selector
  • Event Calendar
  • File Upload
  • FiltersRebuilt around a boolean query tree, with breaking API changes and a migration prompt
  • Frame
  • Gantt
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Sortable
  • Stepper
  • Timeline
  • Tree

OpenCode

PreviousNext

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

Connect OpenCode to ReUI in one step and build UI from the ReUI registry directly in chat. The endpoint is https://mcp.reui.io over Streamable HTTP, the same one every agent uses - see MCP Server for the shared background.

Connect ReUI

Add the ReUI MCP server

Create or update opencode.json in your project root:

opencode.json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "reui": {
      "type": "remote",
      "url": "https://mcp.reui.io",
      "enabled": true
    }
  }
}

The ReUI installer writes an equivalent entry, spelling the URL out in full as https://mcp.reui.io/api/mcp. The short form above rewrites to it, so use whichever you prefer. OpenCode handles OAuth for remote MCP servers on its own, so if it does not prompt, start the flow with opencode mcp auth reui; opencode mcp list shows what is registered.

Sign in with ReUI

The first time OpenCode calls a ReUI tool, your browser opens a "Sign in with ReUI" prompt. Authorize it and you are connected. If you do not have a ReUI account yet, a free one is created for you right in that flow, so there is no separate signup step.

Pick one authentication method, not both. The config above has no headers block, and on this path that is deliberate. A headers.Authorization entry is sent on every request to the server, including after a browser sign-in, so it takes precedence over the OAuth credential OpenCode just stored. If that header carries anything the server will not accept - an unset environment variable that arrives as literal text, an expired token, a key for a different account - every call keeps failing with a 401 no matter how many times you run opencode mcp auth reui, because authenticating does not change the header being sent. If you want the browser flow, leave headers out entirely.

For headless or CI setups where no browser is available, take the other path: skip OAuth, create a personal token at Account → MCP, and pass it as an Authorization: Bearer header instead:

opencode.json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "reui": {
      "type": "remote",
      "url": "https://mcp.reui.io",
      "enabled": true,
      "headers": {
        "Authorization": "Bearer reui_pat_your_token_here"
      }
    }
  }
}

On this token path, prefer OpenCode's own environment syntax, Bearer {env:REUI_LICENSE_KEY}, which OpenCode resolves before the request goes out and keeps the secret out of a committed file - that is what the ReUI installer writes when REUI_LICENSE_KEY is set in your environment as it runs. A keyless install writes no header at all, which is the correct state for the browser flow above. Pasting the real reui_pat_... value works too, in a file you are not committing.

Two ways this header reaches the server as literal text instead of a credential, both answered with a 401 that names the mistake:

  • The ${REUI_LICENSE_KEY} form from components.json. That one is expanded by the shadcn CLI, not by OpenCode, so OpenCode passes it through untouched.
  • {env:REUI_LICENSE_KEY} when REUI_LICENSE_KEY is not actually set in the environment OpenCode runs in. The syntax is right, there is simply nothing to substitute. Confirm with echo $REUI_LICENSE_KEY ($env:REUI_LICENSE_KEY in PowerShell) in the same shell you launch OpenCode from.

Install the ReUI skill

OpenCode runs locally, so add the ReUI skill with a single command:

Terminal
curl -fsSL https://mcp.reui.io/install | node -

This drops a ReUI skill file into your project so OpenCode follows ReUI's build workflow (discovering components, pulling source, and assembling blocks the way ReUI intends) instead of guessing.

Build with ReUI

Describe the interface you want in plain language and OpenCode 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 OpenCode 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 in components.json, because the shadcn CLI expands it from your environment. OpenCode has its own syntax with different braces, so the MCP entry in opencode.json uses {env:REUI_LICENSE_KEY} instead. The two are not interchangeable.

That is it - OpenCode 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 a stale browser sign-in, and reconnecting fixes them. The one exception is a personal token, which cannot be re-authenticated - it has to be replaced.

  • Tools missing, greyed out, or "not connected" - the server did not finish connecting. To fix it, run opencode mcp auth reui, then restart OpenCode.
  • 401 and you signed in through the browser - your ReUI session expired. To fix it, run opencode mcp auth reui to sign in again. If it keeps failing, clear the stored credential with opencode mcp logout reui first.
  • 401 and you use a personal token (headless or CI) - the token has expired or been revoked. opencode mcp auth will not help, because it renews the stored OAuth credential, not the Authorization header from your headers block. Create a new token at Account → MCP and update the header or the environment variable it reads. The 401 body names which of the two it was.
  • opencode mcp auth reui keeps failing, or succeeds and the tools still 401 - check whether your opencode.json has a headers.Authorization entry. If it does, remove it and run the auth command again. That header is sent on every request and overrides the OAuth credential the sign-in just stored, so while it is present the browser flow cannot take effect. The two methods are alternatives; use the header only on the headless path, with no OAuth.
  • Unexpected status: needs_auth, often with a saveDiscoveryState()/discoveryState() warning above it - this one is not a ReUI-side failure and re-running the auth command will not clear it. needs_auth is OpenCode's own status string, and the warning comes from its MCP SDK, which is mid-upgrade: OpenCode's OAuth provider has not implemented the SDK's newer discovery-state methods yet, so the browser sign-in can succeed while the CLI still reports itself as unauthenticated. Update OpenCode first, since this is actively being fixed upstream. If you are still stuck, skip the browser flow entirely: remove any stored OAuth credential, then use a personal token with the headers config shown above - that path does not touch OAuth and works today.
  • Requests hang or the session drops mid-build - long sessions can lose the connection. To fix it, run opencode mcp auth reui and retry your last prompt.
  • 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.
BoltVS Code

On This Page

Connect ReUIInstall the ReUI skillBuild with ReUIUnlock premium itemsTroubleshooting

Application

  • App Shell
  • Auth
  • Card
  • Chart
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Schedule
  • Settings
  • Sheet
  • Stats
  • Timeline
  • Wizard

Solutions

  • Agents
  • AI Ops
  • Analytics
  • Billing
  • Bookings
  • CRM
  • FilesDrive Explorer gained drag and drop upload with a transfer panel
  • Inventory
  • Users

Templates

  • E-commerce
  • SaaS
  • Dashboard
  • Landing
  • All templates

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
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Marketing

  • Blog
  • Contact
  • CTA
  • FAQ
  • HeroSixteen new marketing hero blocks added

Resources

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

Legal

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

© 2026 ReUI. All rights reserved.

3.3K