MagicPath CLI

A component platform for AI agents. Search and add UI components from MagicPath directly into your projects — works with Claude Code, Cursor, and GitHub Copilot.

Quick Start

npm install -g magicpath-ai
magicpath-ai login
magicpath-ai setup-skills  # run in your project directory

After setup-skills, Claude Code, Cursor, and GitHub Copilot automatically pick up MagicPath skills — just mention MagicPath in conversation and your agent knows what to do.

Commands

Auth

login

Log in to your MagicPath account. Opens your browser for one-click authentication.

magicpath-ai login
magicpath-ai login --code <code>   # headless fallback

logout

magicpath-ai logout

whoami

Show the currently authenticated user.

magicpath-ai whoami

Discovery

search

Search component names across all your projects.

magicpath-ai search "button"
magicpath-ai search "nav" --limit 5

| Option | Description | |--------|-------------| | --limit <n> | Max results (default: 20) |

list-projects

List all projects for the current user.

magicpath-ai list-projects
magicpath-ai list-projects --limit 10 --offset 0

| Option | Description | |--------|-------------| | --limit <n> | Max results | | --offset <n> | Skip first N results (default: 0) |

list-components

List components in a project. Supports cursor-based pagination.

magicpath-ai list-components <projectId>
magicpath-ai list-components <projectId> --limit 20
magicpath-ai list-components <projectId> --after <lastId>

| Option | Description | |--------|-------------| | --limit <n> | Max results per page (default: 100) | | --after <id> | Fetch components after this ID | | --sort-by <field> | Sort by name or createdAt (default: name) | | --order <dir> | Sort direction: asc or desc (default: asc) |

view

Open a component preview in the browser.

magicpath-ai view <generatedName>

Components

inspect

View a component's source code, dependencies, and import info without installing anything. Read-only — no files are written, no package.json is required.

Works in any project type. For non-React projects (Swift, Python, etc.), use inspect to read MagicPath component source code as a reference for recreating the component in your target language.

magicpath-ai inspect <generatedName>
magicpath-ai inspect wispy-river-5234 -o json

| Option | Description | |--------|-------------| | -d, --debug | Enable debug logging |

add

Add a MagicPath component to your project. Fetches the component files, writes them to src/components/magicpath/, and installs any required npm dependencies.

Note: add is for React/TypeScript projects only — it writes .tsx files and installs npm packages. For non-JS projects, use inspect to read the source code and translate it into your target language.

magicpath-ai add <generatedName>
magicpath-ai add wispy-river-5234 --path src/components/ui
magicpath-ai add wispy-river-5234 --dry-run    # preview file list only

| Option | Description | |--------|-------------| | -p, --path <path> | Custom component path (default: src/components/magicpath) | | --dry-run | Preview file list without writing | | -y, --yes | Skip confirmation prompts | | --overwrite | Overwrite existing files | | -d, --debug | Enable debug logging |

AI Agent Setup

setup-skills

Set up MagicPath skills for AI agents. Creates rule/skill files for Claude Code, Cursor, and GitHub Copilot in your project.

magicpath-ai setup-skills

info

Show project and auth context. Useful for agent context injection.

magicpath-ai info

schema

Show JSON Schema for a command's input/output.

magicpath-ai schema add
magicpath-ai schema --all

clone

Download and unpack a full MagicPath project using a one-time access key.

magicpath-ai clone -k <accessKey>

| Option | Description | |--------|-------------| | -k, --key <accessKey> | Access key (required) | | -i, --ide <ide> | Open in IDE (cursor, antigravity, vscode, webstorm) | | --dir <directory> | Target directory (non-interactive) | | --name <projectName> | Project name (non-interactive) |

Global Options

| Option | Description | |--------|-------------| | -o json | Structured JSON output (also skips interactive prompts) |

The -d, --debug flag is available on add, clone, and integrate for verbose logging.

Environment Variables

| Variable | Description | |----------|-------------| | MAGICPATH_TOKEN | Auth token (bypasses login flow) |

AI Agent Integration

Running magicpath-ai setup-skills in your project creates skill files that teach AI agents how to use MagicPath:

• Claude Code — .claude/skills/magicpath/SKILL.md
• Cursor — .cursor/rules/magicpath.mdc
• GitHub Copilot — .github/instructions/magicpath.instructions.md

Once set up, agents automatically know how to search for components and add them to your project.

Requirements

• Node.js >= 16.0.0
• npm or yarn

Support

• Issues: GitHub Issues
• Email: [email protected]
• Website: magicpath.ai

License

MIT - Jack Beoris

Made with love by the MagicPath team