@vetaui/mcp

Model Context Protocol server for the Veta design system. Connects AI agents (Claude Code, Cursor, Continue, ...) directly to the Veta catalog so they can discover, query, and recommend components without scraping documentation.

Install + connect

Claude Code (mcp.json)

{
  "mcpServers": {
    "veta": {
      "command": "npx",
      "args": ["-y", "@vetaui/mcp"]
    }
  }
}

Cursor / Continue / any MCP-aware client

The server speaks stdio — point your client at the binary:

npx @vetaui/mcp

Tools exposed

| Tool | Description | | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | veta_overview | High-level overview of Veta (published packages, component count, layers, presets). Call this first. | | veta_list_components | List components, optionally filtered by layer or query. | | veta_get_component | Full details (package, import path, exports, install, runnable example) for one component by id. | | veta_get_install | Just the install command for a component (faster than veta_get_component). | | veta_list_themes | List the 7 brand presets. | | veta_get_theme | Import + apply snippet for one preset. | | veta_app_plan | Convert a natural-language app idea into a Veta app pack, scaffold command, pages, maturity notes, and verification checks. | | veta_nextjs_starter | Plan a new Veta-powered Next.js app with create-veta-app, selected kits, files, env vars, and follow-up MCP calls. | | veta_flutter_starter | Plan a new Veta-powered Flutter app with create_veta_app, real veta_* packages, starter flows, theme/font knobs, and mobile verification. | | veta_verify_app | Return commands, browser smoke checks, and pack-specific manual checks before claiming a generated app works. |

Example agent prompt

"Build me a SaaS landing page using Veta. Include a hero, a pricing table, and a testimonial marquee. Use the Linear theme."

A connected agent will:

1. Call veta_overview to learn what's available.
2. Call veta_list_components({ layer: "blocks-animated" }) to find the wow blocks.
3. Call veta_get_component({ id: "animated-hero" }), pricing-toggle, testimonial-marquee to get the import + example for each.
4. For mobile apps, call veta_flutter_starter({ pack: "saas", fontFamily: "Inter", withTests: true }) to get the Flutter scaffold command and checks.
5. Call veta_get_theme({ id: "linear" }) for the preset wiring.
6. Tell you pnpm add @vetaui/foundations @vetaui/atoms @vetaui/organisms motion and assemble the page.

License

MIT