Use Layro from your AI coding tool

What it is

Layro is a library of React UI components written in TypeScript and styled with Tailwind CSS. Layro MCP is a Model Context Protocol server for the Layro component library. Any MCP-compatible tool can use it: Claude Code, Cursor, VS Code, Codex, Windsurf, Gemini CLI, Antigravity, the Claude app and others. It does not run an AI model of its own. It gives your tool accurate facts about Layro components, and your tool does the building.

All 112 components are available through MCP, and new ones are added the day they are released. Free components need a free account's token; Pro components need lifetime access. Every component is also on the components page.

Layro MCP is listed on the official MCP Registry, GitHub, Cursor Directory and mcp.so.

Connect

The server address is:

https://layropro.com/api/mcp

Add your CLI token from your account page as a header. It is the same token as LAYRO_KEY for the shadcn CLI. Keep it out of files you commit.

claude mcp add --transport http layro https://layropro.com/api/mcp \
  --header "Authorization: Bearer $LAYRO_KEY"

Any other client: add a remote MCP server using Streamable HTTP at the address above, with the header Authorization: Bearer <your CLI token> (or X-API-Key: <your CLI token> where a client keeps Authorization for itself). A client that cannot send headers can still use the free components.

Already use the shadcn MCP server?

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

{
  "registries": {
    "@layro": {
      "url": "https://layropro.com/r/{name}",
      "headers": { "Authorization": "Bearer ${LAYRO_KEY}" }
    }
  }
}

LAYRO_KEY=<your Layro token>

npx shadcn@latest mcp init --client claude

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

Authentication

The token decides what you can take, and Layro checks it on our server on every request. Nothing your AI tool writes can change that. 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.

Tools

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.

Things to ask

• “Find me a SaaS pricing or plan picker from Layro.”
• “Build a dashboard using Layro components.”
• “Find a modern animated chat window.”
• “Show me the installation instructions for Layro's data table.”
• “Which Layro components can I use for an analytics dashboard?”
• “Use Layro components to create a dark SaaS dashboard.”

Troubleshooting