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):

npx myop create

Or install globally:

npm install -g myop

Package Name

The npm package is myop. Always use npx myop <command>.

Create Your First Component

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

{
  "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

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

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:

# 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:

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 for framework-specific examples.

What's Next

• Commands Reference — all CLI commands and options
• Component Development — building components with the public API
• Local Development — dev server, HMR, monorepo mode
• Push & Pull — deploying and downloading components
• Host Integration — embedding in React, Vue, Angular, React Native
• AI Integration — myop train and myop mcp for AI coding assistants