@ark-preset/cli — UI Component Generator

CLI tool to generate Ark UI components into your Solid.js project.

npx @ark-preset/cli add button

Usage

# Add a component
npx @ark-preset/cli add button

# Specify output directory
npx @ark-preset/cli add card -o ./src/components/ui

# Specify framework
npx @ark-preset/cli add button -f solid

Options

| Option | Description | Default | | -------------------------- | ---------------------------------------- | ----------------------- | | -o, --output <path> | Output directory | ./src/components/ui | | -f, --framework <type> | Framework: solid | react | vue | solid |

Output Structure

./src/components/
├── ui/
│   ├── button/index.tsx   # Component source
│   └── index.ts           # Barrel export
└── recipes/
    ├── button.ts          # tv() recipe
    └── index.ts           # Barrel export

MCP Server (AI Agent Integration)

Run a Model Context Protocol server so AI coding agents can discover components, inspect recipes, and generate files directly.

npx @ark-preset/cli@latest mcp

Configure in your MCP client (claude.json, cursor.json, etc.):

{
  "mcpServers": {
    "ark-preset": {
      "command": "npx",
      "args": ["@ark-preset/cli@latest", "mcp"]
    }
  }
}

Available Tools

| Tool | Description | |------|-------------| | ark_preset_list_components | List all 46 components with ✅/⬜ status and dependencies | | ark_preset_get_component | Full component details — recipe source, template files, deps | | ark_preset_search_components | Search components by keyword | | ark_preset_add_component | Generate component files into your project | | ark_preset_get_recipe | View raw tv() recipe source | | ark_preset_get_dependency_graph | Query dependency relationships between components | | ark_preset_get_manifest | Dump component manifest as JSON or text summary | | ark_preset_get_component_usage | Get JSX usage examples for a component (variants, event handlers, etc.) |

Note: Complementary to the Ark UI MCP server. Ark UI MCP provides upstream component info (props, examples). Ark Preset MCP provides preset-specific info (which components have wrappers, recipe styling, code generation).