Liro MCP

The component library your AI agents are missing.

Liro MCP connects Claude Code, Cursor, Codex and any MCP client to 258 production-ready React components, so what your agent builds starts from UI that already works.

Connect MCPSee plans

Free with a Liro account · Pro components with lifetime access

Trusted by 50+ developers and indie hackers. Works with the tools you already use.

Set up

Set up in under a minute.

One address, one token. Works with any MCP client.

Listed on

Source on GitHub.

Create a free account

Your account's token is what lets your agent install. Free components work with a free account.

  • Free components: a free account, no card
  • The 169 Pro components: lifetime access
  • One token, for the CLI and for MCP
Create free accountI have one: get my token
Why it matters

AI agents can write UI. But they don't know what works. Liro MCP fixes that.

my-saas / Build a billing page

Claude Code

I'll search Liro for billing components that already handle every state, then install the best fit.

Used Liro MCPsearch_componentsquery: "billing plan usage invoices"

Found 11 Billing components. Installing three that cover the page.

  • Plan Picker, a Liro component

    Plan Picker

    components/ui/plan-picker.tsx

  • Usage Meter, a Liro component

    Usage Meter

    components/ui/usage-meter.tsx

  • Invoice History, a Liro component

    Invoice History

    components/ui/invoice-history.tsx

Used Liro MCPget_installationnpx shadcn add @liro/plan-picker @liro/usage-meter @liro/invoice-history
The library

250+ production components. Now your AI agents can use them too.

AI chat apps

The chat window, streaming answers, the prompt box and every state between them.

Voice Orb

Animated voice assistant orb for talk mode.

Agent interfaces

Plans, tool calls and approvals, so an agent's work is visible while it happens.

Agent Lanes, a Liro component

Agent Lanes

Multi-agent timeline with one lane per agent.

Dashboards

Charts, tables and empty states that already know what to show with no data, little data and a lot.

Dashboard, a Liro component

Dashboard

Complete analytics dashboard screen.

Billing & SaaS

Plan pickers, usage meters, invoices and the cancel flow, written for real money moving.

Checkout, a Liro component

Checkout

Checkout form with tax and discount code.

Prompts

Ask anything. Get real components back.

Pick a prompt to see what your agent gets back, or copy it into your own tool.

Claude Code

Find me a SaaS pricing or plan picker from Liro.

Used Liro MCP search_components

npx shadcn@latest add @liro/pricing-plans @liro/billing-schedule

Browse everything it can return
Use cases

When to reach for Liro MCP

  • Starting a new product

    Your agent picks real components for the first screen, instead of drawing it from memory.

  • It looks like every other AI app

    Restyle the whole library from your own CSS variables. Pick a colour.

    Pro plan

    Current

    $29 / month

    6,800 of 10,000 requests

    Upgrade plan
    get_theme · your own CSS

  • Stuck between two components

    The agent reads both components' props and states before it picks. Tap A or B.

  • A whole screen, not a piece

    Ask for a screen and get_recipe returns all of it, and the parts it is built from.

    Used Liro MCP › get_recipe

    Code Editor screen

    • File tree and tabs
    • Syntax-coloured editor
    • Agent chat panel
    • Inline diffs to accept or reject

  • No look-alikes

    If Liro is not connected, your agent stops and tells you, instead of writing something that only looks like it.

    Add a plan picker. Use Liro.

    Liro MCP isn't connected, so I'll stop here rather than guess. Run claude mcp list to check.

FAQ

Frequently asked questions

Liro MCP is a Model Context Protocol server for the Liro component library: React UI components written in TypeScript and styled with Tailwind CSS. It does not run an AI model of its own. It gives your AI tool accurate facts about Liro components, what each one does, its props, its states and how to install it, and your tool does the building.

Connecting is free. The 89 free components need a free account's token; the 169 Pro components need lifetime access. The token decides what you can take, and Liro checks it on its own server on every request. Nothing your AI tool writes can change that.

Any MCP-compatible tool: Claude Code, Cursor, VS Code, Codex, Windsurf, Gemini CLI, Antigravity, the Claude app, and others that connect to a remote MCP server over Streamable HTTP with a header. Pick yours in Set up above for its exact snippet.

search_components
Find components by what they do. You do not need the exact name.
get_component
Props, variants, dependencies, files and a usage example for one component.
get_component_code
The complete source and every file it imports, ready to save.
get_installation
The shadcn command, the packages your project is missing, and the theme setup.
list_categories
The categories in the library and what is in each.
search_templates
Find a complete template, with a live preview.
get_template
One template's details, and whether your account can download it.
check_access
Whether your account can take a component or template, and why.
get_theme
The theme's colour tokens and how to restyle Liro to your brand from your own CSS.
get_recipe
Whole files for common screens: an AI chat app, a dashboard app, a billing page.

Yes. All 258 components on the components page are available through MCP, and new ones are added the day they are released.

The token follows your account: buy lifetime access and the same token opens the Pro components. If it leaks, regenerate it on your profile page and the old one stops working at once. Keep it out of files you commit.

Liro is also a shadcn registry, so the shadcn MCP server can list, search and install Liro components too, the same way shadcn add does. Liro MCP adds search by what a component does, props and usage examples, access checks and templates, so use it when you can.

With the shadcn MCP server

1. Add the Liro registry to components.json in your project:

{
  "registries": {
    "@liro": {
      "url": "https://liro.dev/r/{name}?ns=liro",
      "headers": { "Authorization": "Bearer ${LIRO_KEY}" }
    }
  }
}

2. Put your token in .env.local (the shadcn CLI reads it from there):

LIRO_KEY=<your Liro token>

3. Set up the shadcn MCP server for your client. Swap claude for cursor, vscode, codex or opencode:

npx shadcn@latest mcp init --client claude

4. Then ask your AI tool, for example:

Show me the components in the @liro registry
Install @liro/data-table
Add a date picker from @liro to my settings form

Troubleshooting

Use the address ending in /api/mcp with the Streamable HTTP (or just HTTP) transport, not SSE, and choose no sign-in (no OAuth). Restart the tool after changing its config. The first call after a quiet spell can take a second or two while the server starts.

Codex reads LIRO_KEY from the terminal it was started in. Add export LIRO_KEY=<your token> to ~/.zshrc or ~/.bashrc, open a new terminal, start Codex from there and run /mcp.

The connection has no token, or the token's account does not have lifetime access. Add the header shown above with the CLI token from your account page.

The token was mistyped or has been regenerated. Copy it again from your account page.

Free components need a free account's token on the connection, the same token as for Pro. Sign in and copy it from your account page.

Check the URL ends in /api/mcp and the client supports remote (HTTP) MCP servers. Restart the client after editing its config.

Keep the files at the paths the tool gives (components/ui/…) and import styles/liro.css after Tailwind in your global CSS. The files import each other through the @ alias.
Get started

Your AI agents are guessing. They don't have to.

Whatever you are building, a chat app, an agent dashboard or a SaaS billing page, there is a Liro component your agent can start from.

Connect MCPBrowse components
    Liro MCP: Use Liro Components from Your AI Coding Tool | Liro