VS Code

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

VS Code connects to ReUI in one step, then you build UI from the ReUI registry by chatting with your coding agent. 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 .vscode/mcp.json in your workspace:

.vscode/mcp.json

{
  "servers": {
    "reui": {
      "type": "http",
      "url": "https://mcp.reui.io"
    }
  }
}

Note the top-level key is servers, not the mcpServers other agents use, and a remote server needs type: "http". To make ReUI available in every workspace instead, run MCP: Open User Configuration from the Command Palette and add the same entry there. MCP: Add Server walks you through it with a guided flow if you would rather not edit JSON.

Sign in with ReUI

The first time your agent calls a ReUI tool, a browser tab opens with a "Sign in with ReUI" prompt. Authorize it and the connection is done. If you do not have a ReUI account yet, a free one is created for you right there in the same flow, so there is nothing to set up in advance. VS Code registers itself with ReUI dynamically, so the entry above needs no oauth block or client ID.

For headless or CI use where no browser is available, create a personal token at Account → MCP and pass it as a header on the same server entry:

.vscode/mcp.json

{
  "servers": {
    "reui": {
      "type": "http",
      "url": "https://mcp.reui.io",
      "headers": {
        "Authorization": "Bearer reui_pat_your_token_here"
      }
    }
  }
}

.vscode/mcp.json is usually committed, so prefer an input variable over a pasted secret. VS Code prompts for the value the first time the server starts and stores it securely afterwards:

.vscode/mcp.json

{
  "inputs": [
    {
      "type": "promptString",
      "id": "reui-token",
      "description": "ReUI personal token (reui_pat_...)",
      "password": true
    }
  ],
  "servers": {
    "reui": {
      "type": "http",
      "url": "https://mcp.reui.io",
      "headers": {
        "Authorization": "Bearer ${input:reui-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.

${input:...} is VS Code's own syntax and is not related to the ${REUI_LICENSE_KEY} form in components.json, which only the shadcn CLI expands.

The ReUI skill

You do not install a separate skill - it rides on the MCP from mcp.reui.io. Once ReUI is connected, your agent gets the ReUI tools and can call get_agent_skill to load the full build workflow (the reuse-first rule and the find, read the real API, install, then adapt order) as a document. If a build ever drifts off-pattern, tell it to "follow the ReUI skill" to reload that workflow.

Build with ReUI

Describe the interface you want in plain language and VS 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 VS 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 shadcn CLI expands ${REUI_LICENSE_KEY} from .env.local, so leave it as a variable here. VS Code does not read .env.local and does not understand this form, so never copy this Authorization line into .vscode/mcp.json - use the ${input:...} prompt shown above, or the real token, for the MCP server entry.

That is it - VS 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 a stale browser sign-in, and reconnecting fixes them. Run MCP: List Servers from the Command Palette, select reui, and pick an action; the same actions sit on the server's context menu under MCP SERVERS - INSTALLED in the Extensions view. 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 MCP: List Servers, select reui, restart it, and complete the sign-in.
401 and you signed in through the browser - your ReUI session expired. To fix it, disconnect the account from reui and start the server again to sign in.
401 and you use a personal token (headless or CI) - the token has expired or been revoked. Reconnecting will not help: it renews a browser session, not the Authorization header in your config. Create a new token at Account → MCP and update the header or CI secret. 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, restart reui from MCP: List Servers and retry your last prompt. Choose Show Output on the same menu for the server log.
Sign-in appears to work but every call still 401s - check whether you have an Authorization header on the reui entry in .vscode/mcp.json. A configured credential is sent on every request and overrides the OAuth credential the sign-in stores, so while it is there disconnecting the account and starting the server again 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.
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.

OpenCode GitHub Copilot

On This Page

Connect ReUI The ReUI skill Build with ReUI Unlock premium items Troubleshooting

Connect ReUI

Add the ReUI MCP server

Create .vscode/mcp.json in your workspace:

.vscode/mcp.json

{
  "servers": {
    "reui": {
      "type": "http",
      "url": "https://mcp.reui.io"
    }
  }
}

Sign in with ReUI

For headless or CI use where no browser is available, create a personal token at Account → MCP and pass it as a header on the same server entry:

.vscode/mcp.json

{
  "servers": {
    "reui": {
      "type": "http",
      "url": "https://mcp.reui.io",
      "headers": {
        "Authorization": "Bearer reui_pat_your_token_here"
      }
    }
  }
}

.vscode/mcp.json is usually committed, so prefer an input variable over a pasted secret. VS Code prompts for the value the first time the server starts and stores it securely afterwards:

.vscode/mcp.json

{
  "inputs": [
    {
      "type": "promptString",
      "id": "reui-token",
      "description": "ReUI personal token (reui_pat_...)",
      "password": true
    }
  ],
  "servers": {
    "reui": {
      "type": "http",
      "url": "https://mcp.reui.io",
      "headers": {
        "Authorization": "Bearer ${input:reui-token}"
      }
    }
  }
}

${input:...} is VS Code's own syntax and is not related to the ${REUI_LICENSE_KEY} form in components.json, which only the shadcn CLI expands.

The ReUI skill

Build with ReUI

Describe the interface you want in plain language and VS 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

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}"
      }
    }
  }
}

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

Tools missing, greyed out, or "not connected" - the server did not finish connecting. To fix it, run MCP: List Servers, select reui, restart it, and complete the sign-in.

401 and you signed in through the browser - your ReUI session expired. To fix it, disconnect the account from reui and start the server again to sign in.

401 and you use a personal token (headless or CI) - the token has expired or been revoked. Reconnecting will not help: it renews a browser session, not the Authorization header in your config. Create a new token at Account → MCP and update the header or CI secret. 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, restart reui from MCP: List Servers and retry your last prompt. Choose Show Output on the same menu for the server log.

Sign-in appears to work but every call still 401s - check whether you have an Authorization header on the reui entry in .vscode/mcp.json. A configured credential is sent on every request and overrides the OAuth credential the sign-in stores, so while it is there disconnecting the account and starting the server again 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.

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.