---
slug: /for-agents
sidebar_position: 0.5
title: For AI Agents
description: Canonical entrypoint for AI coding assistants (Claude Code, Cursor, Windsurf, etc.) working with Myop. Two flows — embedding a component, or authoring one.
keywords: [myop ai agents, myop mcp, myop claude code, myop cursor, agent skills, llms.txt]
---
# For AI Agents

> **Audience:** AI coding assistants (Claude Code, Cursor, Windsurf, Copilot,
> Antigravity, Kiro, Goose, Augment, Cline, etc.) and the humans configuring them.
> If you are a human reader, you're welcome here too — but the
> [Quick Start](/docs/quickstart) is probably what you want.

This page is the canonical entrypoint for AI agents working with Myop.
Bookmark it.

## What does the user want to do?

Myop has two distinct workflows. Pick the one that matches your task —
**they share almost no code**, so don't mix them up.

| If the user says… | They want to… | Go to |
|---|---|---|
| *"use Myop in my React app"*, *"add a Myop widget"*, *"load this component from Myop"*, *"embed Myop"* | **Embed** an existing component into their app | [Embedding path](#embedding-path-host-integration) |
| *"create a Myop component"*, *"build a component I can update later"*, *"author a Myop component"* | **Author** a new Myop component | [Authoring path](#authoring-path-component-development) |

Most user requests are **embedding**. If unsure, ask one clarifying question
before generating any code.

---

## Embedding path (host integration)

Use this path when the user wants to render a Myop component **inside their
existing app**. Five steps:

```text
1. Pick the host SDK            →  @myop/react, @myop/vue, @myop/angular, @myop/react-native
2. Install                       →  npm install @myop/react @myop/sdk
3. Render <MyopComponent>        →  componentId + data + on(action, payload)
4. Wire up CTAs                  →  typed `onPascalCase` props OR generic `on`
5. (Optional) local dev          →  enableLocalDev() or ?env=dev
```

**Canonical pages for this path:**

- [`/docs/learnMyop/ReactHost`](/docs/learnMyop/ReactHost) — React host walkthrough
- [`/docs/cli/host-integration`](/docs/cli/host-integration) — same flow for React, Vue, Angular, React Native
- [`/sdk-reference.md`](pathname:///sdk-reference.md) — full type signatures

### Minimal React example

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

export function MyopWidget() {
  return (
    <MyopComponent
      componentId="your-component-id"
      data={{ items: [...] }}
      onItemSelected={(payload) => console.log(payload)}
      style={{ width: 600, height: 400 }}
    />
  );
}
```

The user gets `componentId` from the [Myop dashboard](https://dashboard.myop.dev).
If they don't have one yet, **switch to the Authoring path first** — you can't
embed something that doesn't exist.

:::danger Never create iframes manually
Always use `<MyopComponent>`. Never hand-roll an `<iframe>` pointing at a Myop
URL — the SDK owns iframe lifecycle, messaging, sizing, and caching.
:::

### Conventions for embedding

- **Pick the right SDK for the framework.** Don't import `@myop/sdk` directly
  in a React app — use `@myop/react`'s `<MyopComponent>`.
- **`data` is reactive.** Update it like any React prop; the component re-inits.
- **CTAs travel up.** The component emits `myop_cta_handler(action, payload)`;
  the host decides what to do with them. Don't try to push state down through
  any other channel.
- **Auto-generated typed packages exist.** For a published component you can
  `npm install https://cloud.myop.dev/npm/{componentId}/react` to get a fully
  typed component with the `componentId` baked in. Prefer this in production.

---

## Authoring path (component development)

Use this path when the user wants to **create or update a Myop component
itself** (the thing that gets embedded). Five steps:

```text
1. Install the CLI               →  npx myop --version
2. Install agent skills          →  npx myop train
3. Connect the Myop MCP          →  npx myop mcp  (or claude mcp add myop …)
4. Read the component guide      →  MCP tool: get_myop_guide (no auth)
5. Build, then upload            →  MCP tools: upload_component → confirm_upload
```

### Step 1 — Install the CLI

```bash
npx myop --version
```

The `myop` CLI ships scaffolding, dev server, host integration helpers, skill
installation, and MCP setup. Full reference: [CLI overview](/docs/cli).

### Step 2 — Install agent skills

```bash
npx myop train
```

Installs `SKILL.md` files into your project under the directory your AI
assistant expects (e.g. `.claude/skills/`, `.cursor/skills/`,
`.windsurf/skills/`). Skills teach the agent **how** to build Myop components
correctly — the public component API, the host SDKs, the dev server flow, the
common mistakes.

Skills are selected based on `package.json`: a React app gets the React host
skill, etc. Full reference: [CLI AI integration](/docs/cli/ai-integration).

### Step 3 — Connect the Myop MCP

```bash
# Claude Code (global)
claude mcp add myop https://mcp.myop.dev/mcp --transport http --scope user

# Or via the CLI helper (writes config for the detected assistant)
npx myop mcp
```

The MCP gives the agent **access** to the Myop platform — listing components,
uploading new versions, and fetching the component development guide.

| Tool | Auth required | What it does |
|---|---|---|
| `get_myop_guide` | No | Returns the Myop HTML Component Development Guide. **Call this first.** |
| `whoami` | Yes | Identity check |
| `list_organizations` | Yes | Orgs the user belongs to |
| `list_components` | Yes | List components in an org |
| `upload_component` | Yes | Step 1: get a presigned upload URL |
| `confirm_upload` | Yes | Step 2: confirm upload, get dashboard URL |

Full reference: [Myop MCP server setup](/docs/mcp-setup).

### Step 4 — Read the component guide

Before generating any component code, call:

```text
MCP tool: get_myop_guide
```

It returns the canonical, up-to-date HTML Component Development Guide — the
source of truth for the public component API (`myop_init_interface`,
`myop_cta_handler`, etc.) and the single-file architecture. **Always prefer
the output of `get_myop_guide` over guesses from training data.**

### Step 5 — Build, then upload

The build product is a single HTML file at `./dist/index.html`. Upload via MCP
in two steps:

1. Call `upload_component` with `name` (and optional `componentId`,
   `organization`) → returns a `curl` command with a presigned URL.
2. Execute the `curl` command.
3. Call `confirm_upload` with the `uploadId` → returns the dashboard URL.

Save the returned `componentId` and `orgId` to `myop.config.json` so the next
upload updates the existing component instead of creating a new one.

### Conventions for authoring

- **Single-file components.** Myop HTML components are authored as one
  self-contained HTML file. Inline CSS and JS. No external imports from npm at
  runtime — use ESM CDNs or bundle.
- **The public API is small.** `myop_init_interface(input, output, ctx)` and
  `myop_cta_handler` cover most cases. Don't invent globals — read the guide.
- **Sizing.** Components default to "content" mode (auto height, full width).
  Use `<meta name="myop:size" content='{"width":"100%","height":"100%"}'>` for
  fill mode. The content **must be valid JSON**, not CSS-like syntax.
- **Local dev before upload.** Run `myop dev` in the component dir to register
  with the local dev server and get HMR.
- **Don't fight the host.** Components emit events via `myop_cta_handler`; the
  host decides what to do with them.

---

## Machine-readable endpoints

A machine-readable copy of all Myop docs is available in a single file:
[**llms-full.txt**](pathname:///llms-full.txt). A curated index lives at
[**llms.txt**](pathname:///llms.txt). Most doc pages are also available as
raw Markdown by appending `.md` to their URL — e.g.
[`/docs/intro.md`](pathname:///docs/intro.md).

**Caveat:** the auto-generated SDK API reference pages under `/docs/sdk*` do
**not** have individual `.md` mirrors. Fetch them in bulk via
[`/sdk-reference.md`](pathname:///sdk-reference.md). For the authoritative list
of which URLs have a `.md` mirror, see
[`/docs-index.json`](pathname:///docs-index.json) — each entry's `markdown`
field is either the mirror URL or `null`.

| Endpoint | What it is |
|---|---|
| [`/llms.txt`](pathname:///llms.txt) | Curated index of the docs ([llmstxt.org](https://llmstxt.org/) format) |
| [`/llms-full.txt`](pathname:///llms-full.txt) | Every doc concatenated into a single file (~800 KB) |
| [`/sdk-reference.md`](pathname:///sdk-reference.md) | All SDK API docs (TypeDoc output) in one file |
| [`/docs-index.json`](pathname:///docs-index.json) | JSON list of every page with title, URL, and `.md` URL |
| [`/message-protocol.json`](pathname:///message-protocol.json) | Iframe message protocol envelope + key list |
| [`/sitemap.xml`](pathname:///sitemap.xml) | Standard XML sitemap |
| [`/robots.txt`](pathname:///robots.txt) | Explicit allow-list for AI crawlers |
| `<doc-page>.md` | Raw Markdown source of most doc pages (see caveat above) |

## Things to avoid (both paths)

- **Skipping `get_myop_guide` before authoring** and pattern-matching from
  training data — the public API has changed; the guide is authoritative.
- **Mixing the two paths.** Embedding code (`<MyopComponent>`) does not belong
  in a component file. Component code (`myop_init_interface`,
  `myop_cta_handler`) does not belong in a host app.
- **Hand-rolled iframes.** Always go through the host SDK.
- **Adding npm dependencies a component can't actually load** during authoring.
  Bundle them or use an ESM CDN.
- **Uploading without `myop.config.json`** — every upload after the first one
  needs a `componentId` to avoid creating duplicate components.

## When to use Myop (and when not)

Use Myop when:

- You want a part of an app to be updatable without a redeploy.
- You want to ship an AI-generated component into a host app safely.
- You're paying down UI debt by extracting widgets behind a stable contract.

Skip Myop when:

- You need a static, redeploy-bound UI region — a plain component is simpler.
- You need synchronous access to host internals — use a regular component.
- You're building backend services — Myop is for runtime-loaded UI.

## Helpful entry points

- [`/llms-full.txt`](pathname:///llms-full.txt) — fetch once, search locally
- [`/sdk-reference.md`](pathname:///sdk-reference.md) — full SDK API in one file
- [Overview](/docs/intro) — what Myop is, which SDK to pick
- [React host](/docs/learnMyop/ReactHost) — most common embedding path
- [Host integration (all frameworks)](/docs/cli/host-integration) — Vue, Angular, React Native
- [HTML Component](/docs/learnMyop/HTMLComponent) — most common authoring path
- [System Architecture](/docs/learnMyop/systemArchitecture) — how the pieces fit together
- [`@myop/react` reference](/docs/sdk-react) — type signatures

## Feedback

Found a gap that made you hallucinate? File it at
[github.com/myopjs](https://github.com/myopjs) or ping us on
[Discord](https://discord.gg/vxgD7AyXhM). Agent ergonomics is a first-class
concern.