Commands Reference

All commands are available via npx myop <command> or myop <command> if installed globally.

Quick Reference

Command	Description
myop create	Create a new component (scaffolds files + starts dev server)
myop dev	Start development server with HMR on port 9292
myop push [componentId]	Upload component to Myop platform
myop pull [componentId]	Download component HTML from Myop platform
myop list [--org <orgId>]	Browse, search, and batch pull/push remote components
myop train	Install AI agent skills for coding assistants
myop mcp	Configure Myop MCP server for your AI coding assistant
myop login	Authenticate with Myop (opens browser for OAuth)
myop logout	Clear stored credentials
myop whoami	Show current authenticated user

Global Options

Flag	Description
--ci	CI/CD mode: output status as JSON, no interactive prompts
-m, --monorepo	Monorepo mode: scan for all myop.config.json files in nested directories
-c, --config <path>	Path to myop.config.json (default: ./myop.config.json)
-v, --verbose	Enable verbose output

---

myop create

Create a new Myop component in the current directory.

npx myop create

What it does:

1. Prompts for a component name (defaults to directory name)
2. Checks that index.html and myop.config.json don't already exist
3. Creates myop.config.json with component metadata
4. Creates index.html with a complete component template including type definitions, sizing, and preview data
5. Installs AI agent skills for your coding assistant
6. Starts the dev server automatically

Files created:

./index.html          # Complete Myop component (single-file)
./myop.config.json    # Component metadata

warning

If index.html or myop.config.json already exists, the command exits with an error. Use myop dev for existing components.

---

myop dev

Start a development server with file watching and hot module replacement.

npx myop dev

Ports:

• 9292 — Component dev server
• 9293 — Management dashboard

Features:

• Watches .js, .css, .html files for changes
• HMR: changes reflect instantly in the browser
• Single-file mode: serves index.html directly (no build step)
• Multi-file mode: runs npm run build or node build.js on change

Monorepo mode:

npx myop dev -m

Scans for all myop.config.json files in nested directories and lets you select which components to run simultaneously.

See the Dev Server guide for details.

---

myop push

Upload a component to the Myop platform.

# Push using componentId from myop.config.json
npx myop push

# Push to a specific component ID (overrides config)
npx myop push <componentId>

What it does:

1. Reads myop.config.json to identify the component
2. Detects single-file mode (index.html) or multi-file mode (dist/index.html)
3. For multi-file projects: runs npm run build first
4. Authenticates (prompts for login if needed)
5. Uploads HTML to Myop via presigned URL
6. On first push: assigns a componentId (UUID) and updates myop.config.json
7. On subsequent pushes: adds a new version to the existing component

After push:

https://dashboard.myop.dev/dashboard/2.0/component/<componentId>

See the Push & Pull guide for details.

---

myop pull

Download a component's HTML from the Myop platform.

# Pull using componentId from myop.config.json
npx myop pull

# Pull a specific component by ID
npx myop pull <componentId>

# Pull to a custom output path
npx myop pull <componentId> -o ./components/sidebar/index.html

Options:

Flag	Description
-o, --output <path>	Output file path (default: index.html or dist/index.html)

What it does:

1. Determines componentId from the argument or myop.config.json
2. Authenticates (prompts for login if needed)
3. Fetches the component HTML from Myop
4. Writes the HTML to the output path
5. Creates or updates myop.config.json with component metadata

See the Push & Pull guide for details.

---

myop list

Browse all components in your organization with interactive search, multi-select, and batch operations.

# Interactive browse
npx myop list

# Specify organization
npx myop list --org <orgId>

Options:

Flag	Description
--org <orgId>	Organization ID to use (skips org selection prompt)

What it does:

1. Authenticates and loads your organizations
2. Resolves which org to use (saved default, --org flag, or prompts)
3. Fetches all components in the organization
4. Shows a searchable list — type to filter, enter to select, repeat
5. When done selecting, choose Pull or Push
6. Pull — downloads all selected components in parallel, each into its own subdirectory
7. Push — scans local directories for matching componentIds and uploads in parallel

Organization memory: the selected org is saved to ~/.myop/preferences.json and reused next time.

---

myop train

Install AI agent skills so coding assistants understand Myop conventions.

npx myop train

What it does:

1. Detects frameworks from package.json (React, Vue, Angular, React Native)
2. Selects relevant skills (always includes myop-cli + myop-component)
3. Installs SKILL.md files into all AI agent directories using the Agent Skills standard

Supported AI coding assistants: Claude Code, Cursor, Windsurf, VS Code Copilot, Kiro, Goose, Augment, Cline, and 30+ more.

Skills installed:

Skill	Description	Installed When
myop-cli	CLI commands and workflows	Always
myop-component	Component development (public API, types, sizing)	Always
myop-react-host	React integration with @myop/react	React detected
myop-vue-host	Vue 3 integration with @myop/vue	Vue detected
myop-angular-host	Angular integration with @myop/angular	Angular detected
myop-react-native-host	React Native integration with @myop/react-native	React Native detected

If no framework is detected, all skills are installed.

See the AI Integration guide for details.

---

myop mcp

Configure the Myop MCP (Model Context Protocol) server for your AI coding assistant.

npx myop mcp

Interactive setup for:

• Claude Code — writes to ~/.claude.json
• Cursor — writes to ~/.cursor/mcp.json
• Windsurf — writes to ~/.codeium/windsurf/mcp_config.json
• VS Code (GitHub Copilot) — writes to the VS Code user settings

The MCP server gives your AI assistant access to Myop tools: uploading components, listing components, and reading component source code.

See the AI Integration guide for details.

---

myop login

Authenticate with the Myop platform via OAuth.

npx myop login

Opens a browser window for authentication. Tokens are stored locally at ~/.myop/credentials.json with 0o600 permissions (owner read/write only). Tokens refresh automatically when expired.

---

myop logout

Clear stored credentials.

npx myop logout

---

myop whoami

Show the current authenticated user.

npx myop whoami

---

CI/CD Mode

npx myop --ci

Outputs JSON with version, config status, and auth status. No interactive prompts.

{
  "version": "0.1.46",
  "config": {
    "found": true,
    "path": "./myop.config.json",
    "name": "My Component",
    "componentId": "abc-123",
    "organization": "org-456"
  },
  "auth": {
    "loggedIn": true,
    "email": "user@example.com"
  }
}