---
sidebar_position: 1
title: Getting Started
description: Install the Myop CLI and create your first component in under 2 minutes. The CLI handles scaffolding, local development with hot reload, and deployment to the Myop platform.
keywords: [myop cli, install myop, npx myop, create myop component, myop getting started]
---
# Getting Started with Myop CLI

The Myop CLI is a command-line tool for creating, developing, and deploying Myop components. Components are isolated, independently deployable UI modules that integrate into any host application — React, Vue, Angular, React Native, or any web framework.

## Installation

Use directly with `npx` (no install required):

```bash
npx myop create
```

Or install globally:

```bash
npm install -g myop
```

:::info Package Name
The npm package is **`myop`**. Always use `npx myop <command>`.
:::

## Create Your First Component

```bash
mkdir my-widget && cd my-widget
npx myop create
```

This will:
1. Prompt for a component name (defaults to the directory name)
2. Scaffold `index.html` and `myop.config.json`
3. Install AI agent skills for your coding assistant
4. Start the dev server automatically

Your component is now running at **http://localhost:9292**.

## Project Structure

After `myop create`, you get a single-file component:

```
my-widget/
├── index.html          # Your component (all HTML, CSS, JS in one file)
└── myop.config.json    # Component metadata
```

### index.html

The generated component includes:

- **Type definitions** — `<script type="myop/types">` block with TypeScript interfaces for the data your component receives and the events it emits
- **Sizing metadata** — `<meta name="myop:size">` for responsive layout
- **Component logic** — an IIFE that implements `myop_init_interface` (receive data) and `myop_cta_handler` (send events)
- **Preview data** — `<script id="myop_preview">` with sample data so you can see the component immediately

### myop.config.json

```json
{
  "name": "my-widget",
  "componentId": "DEV",
  "type": "html",
  "author": "@myop-cli",
  "HMR": true
}
```

- `componentId` is `"DEV"` until you push — then it becomes a UUID
- `organization` is added automatically after the first push

## Development Workflow

### 1. Develop locally

```bash
npx myop dev
```

- Component preview: **http://localhost:9292**
- Management dashboard: **http://localhost:9293**
- Edit `index.html` — changes reflect instantly via HMR

### 2. Deploy to Myop

```bash
npx myop push
```

Uploads the component to the Myop platform. On the first push, a `componentId` (UUID) is assigned and saved to `myop.config.json`.

After pushing, your component is live at:
```
https://dashboard.myop.dev/dashboard/2.0/component/<componentId>
```

### 3. Embed in your app

Install the host SDK for your framework:

```bash
# React
npm install @myop/react @myop/sdk

# Vue
npm install @myop/vue @myop/sdk

# Angular
npm install @myop/angular @myop/sdk

# React Native
npm install @myop/react-native react-native-webview
```

Then use the component:

```tsx
import { MyopComponent } from "@myop/react";

<MyopComponent
    componentId="<your-component-id>"
    data={{ title: "Hello" }}
    on={(action, payload) => console.log(action, payload)}
/>
```

See the [Host Integration guide](/docs/cli/host-integration) for framework-specific examples.

## What's Next

- [Commands Reference](/docs/cli/commands) — all CLI commands and options
- [Component Development](/docs/cli/create-component) — building components with the public API
- [Local Development](/docs/cli/dev-server) — dev server, HMR, monorepo mode
- [Push & Pull](/docs/cli/push-and-pull) — deploying and downloading components
- [Host Integration](/docs/cli/host-integration) — embedding in React, Vue, Angular, React Native
- [AI Integration](/docs/cli/ai-integration) — `myop train` and `myop mcp` for AI coding assistants