For devs / CLI & MCP

Ravox in your agent

Connect Ravox UI to Claude, Codex, Cursor, VS Code, Lovable or Windsurf. Your agent finds community components, grabs the code, installs Ravox Kit and blocks, and applies themes, right in your project, with no copy and paste.

First, an API key. It's free and links the agent to your account. With it, the commands below come ready to run.

1.Add the server

In the terminal:

claude mcp add --transport http ravox https://ui.ravoxlabs.com/api/mcp --header "x-api-key: YOUR_KEY"

2.Or keep it in the project, for the team

In a .mcp.json at the root. Each person sets their own key in RAVOX_API_KEY.

.mcp.json

{
  "mcpServers": {
    "ravox": {
      "type": "http",
      "url": "https://ui.ravoxlabs.com/api/mcp",
      "headers": {
        "x-api-key": "${RAVOX_API_KEY}"
      }
    }
  }
}

3.Check it
ravox shows up as connected:
```
claude mcp list
```

What to ask

Find and use a component
“Search Ravox for a playful CSS toggle and put it in the footer of the settings page.”
Build a screen with the Kit
“Install the Ravox Kit phone sign-in block in app/sign-in and change the copy for my clinic.”
Switch the project theme
“Apply the Ravox Bakery theme to globals.css and show me what changed.”
Copy without Tailwind
“Grab the Ravox Newspaper theme as plain CSS and create a theme.css for this static site.”
Apply a purchased design
“/mcp__ravox__usar-design fermento (in Claude Code). With the annual pass, /mcp__ravox__escolher-design compares every design against the client.”

The tools

All of them are read-only: nothing in your project changes unless you ask the agent. Copies count toward the metrics of whoever made the component.

buscar_componentes: Searches community UI components (HTML + CSS or Tailwind) by text, category or technology. Returns up to 24 results with the slug; use ver_componente to get the code.
ver_componente: Returns the HTML and CSS (or HTML with Tailwind classes) of a published component, by slug. When available, it also includes the version in the other technology (CSS ⇄ Tailwind).
listar_kit: Lists the React components of Ravox Kit (a library installed with the @ravox-ui/cli CLI, English API, no Radix) with the install command for each one.
ver_item_kit: Shows the props of a Ravox Kit component, the install command and the source code of the file the CLI creates.
listar_blocos: Lists the Kit blocks: ready-made full screens (dashboards, sidebars, sign-in, sign-up, charts, pricing...) with the route they get and the command that installs the screen along with its components.
listar_temas: Lists the Ravox Kit themes (built-in and community) with fonts, brand color and sizing. Use ver_tema to get the CSS.
ver_tema: Returns the CSS of a theme: `tailwind` (Tailwind 4 and shadcn variables for globals.css) or `css` (plain CSS with variables, base styles and ready-made classes).
listar_designs: Lists the Ravox UI landing page and admin dashboard designs with what you need to pick the one that fits a client: type, niches, tone, audience, colors, fonts, 'fits' and 'avoid for'. Open to everyone; the files (ver_design) are for whoever bought the design or has the annual pass.
ver_design: Returns the files of a design to apply to the project: DESIGN.md (the rules, always follow them), sistema.css (tokens and components), tokens.css and LEIA-ME.md; ask for others by name in `arquivos`. Only for whoever bought the design or has the annual pass.

Without MCP

Ravox Kit also installs straight from the terminal (npx @ravox-ui/cli add, see the installation guide), and the site summary for language models lives at /llms.txt. The Ravox CLI (npx ravox) is coming soon.