Licence
MIT
Version
0.1.3
Deps
0
Vulns
0
Weekly
0
@ark-preset/cli — UI Component Generator
CLI tool to generate Ark UI components into your Solid.js project.
npx @ark-preset/cli add buttonUsage
# 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 solidOptions
| 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 exportMCP 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 mcpConfigure 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).