Liro

npx add-mcp 'https://liro.dev/api/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.

Free with a Liro account · Pro components with lifetime access

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

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 components/ui/plan-picker.tsx

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

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.
• Agent interfaces Plans, tool calls and approvals, so an agent's work is visible while it happens.
• Dashboards Charts, tables and empty states that already know what to show with no data, little data and a lot.
• Billing & SaaS Plan pickers, usage meters, invoices and the cancel flow, written for real money moving.

Your AI agents can search, read and install all of it. Browse the library

Ask anything. Get real components back.

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

• Find me a SaaS pricing or plan picker from Liro.
• Build an analytics dashboard using Liro components.
• Find a modern animated chat window for my AI app.
• Add an approval step before my agent sends an email.
• Use Liro to build a dark SaaS settings page with a team list.
• Show me the installation instructions for Liro's data table.

Claude Code

Find me a SaaS pricing or plan picker from Liro.

Used Liro MCP search_components

• Pricing Plans Pricing section with monthly and yearly plans.
• Billing Schedule Build contract billing phases and invoices.

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

Browse everything it can return

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 Data Table Read-only. Sort, search, select. B Editable Table Edit in place, with undo.

• 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.

Frequently asked questions

(01)What is Liro MCP?

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.

(02)Is Liro MCP free?

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.

(03)Which tools work with Liro MCP?

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.

(04)What can my AI tool do with it?

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.

(05)Is this the same library as the Liro website?

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

(06)How is my token kept safe?

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.

(07)I already use the shadcn MCP server. Do I need this?

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

(01)Connecting is slow, or the tool keeps retrying

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.

(02)Codex does not list liro

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.

(03)“No source code was returned” for a Pro component

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.

(04)“The credential sent with this connection was not accepted”

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

(05)“Free with a Liro account”

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.

(06)The tools do not appear

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

(07)Imports fail after saving a file

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.

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.