---
sidebar_position: 8
title: AI Local Dev Workflow
description: Use Claude Code (or any AI assistant) with the Myop dev server to develop, test, and iterate on components locally — no extension or publishing needed.
keywords: [myop ai local dev, myop claude code, myop chrome mcp, myop local development ai, myop enableLocalDev, myop dev ai workflow]
---
# AI Local Dev Workflow

This guide shows how to set up a fully local development loop with an AI coding assistant like Claude Code. The AI edits component source files, the dev server picks up changes instantly, and you test in your running app — no browser extension, no publishing, no cloud round-trip.

## Prerequisites

1. **Myop CLI** installed — `npm i -g myop`
2. **AI assistant configured** — run `npx myop train` and `npx myop mcp` ([AI Integration](/docs/cli/ai-integration))
3. **A host app** using a Myop SDK (`@myop/react`, `@myop/vue`, `@myop/angular`)

## The Workflow

```
AI edits HTML file → myop dev serves it (HMR) → App loads from localhost:9292 → Test in browser
```

### 1. Start the dev server

In your component directory:

```bash
npx myop dev
```

This serves the component on `http://localhost:9292` and watches for file changes. Edits to `index.html` trigger instant hot-reload — no manual refresh needed.

For multiple components, use monorepo mode:

```bash
npx myop dev -m
```

### 2. Point your app to localhost

Add one line to your app's initialization code:

```tsx
import { enableLocalDev } from "@myop/react"; // or @myop/vue, @myop/angular

enableLocalDev();
```

This redirects all Myop component fetches from `cloud.myop.dev` to `localhost:9292`. Components registered on the dev server are served locally; everything else is proxied to cloud automatically.

:::tip
A common pattern is to enable local dev conditionally:
```tsx
if (process.env.NODE_ENV === 'development') {
  enableLocalDev();
}
```
:::

### 3. Let the AI iterate

With the dev server running and your app pointed to localhost, the AI assistant can:

1. **Edit the component HTML** directly in your project
2. **`myop dev` picks up the change** via file watching and HMR
3. **Your app reflects the update** immediately
4. **AI tests via Chrome MCP** (or you test manually) on `http://localhost:...`
5. **Repeat** until the component is right

No upload, no extension, no publish needed during development.

### 4. Deploy when ready

Once the component works as expected:

```bash
npx myop push
```

Or let the AI upload via the MCP server — at that point, the component is ready for release.

## Example: Claude Code + Chrome MCP

A typical AI-assisted session looks like this:

1. **You**: "Refactor the sidebar feature into a Myop component"
2. **Claude Code**: Creates `index.html` with `myop_init_interface`, preview data, and CTA handlers
3. **Claude Code**: Edits the file, `myop dev` serves it with HMR
4. **Claude Code** (via Chrome MCP): Navigates to your local app, takes a screenshot, spots layout issues
5. **Claude Code**: Fixes the CSS, HMR updates instantly
6. **Claude Code** (via Chrome MCP): Verifies the fix visually
7. **You**: "Looks good, push it" → `npx myop push`

The key insight: Claude Code works with **local files**, not cloud uploads, during development. The dev server bridges the gap between file edits and your running app.

## Troubleshooting

| Problem | Fix |
|---------|-----|
| App still loads from cloud | Make sure `enableLocalDev()` runs before any `<MyopComponent>` renders |
| Component not updating | Check that `myop dev` is running and watching the right directory |
| Chrome MCP sees stale version | Hard-refresh the page or clear browser cache — HMR should handle most cases |
| Multiple components needed | Use `myop dev -m` for monorepo mode |

## Next Steps

- [Dev Server & Local Development](/docs/cli/dev-server) — full dev server reference
- [AI Integration](/docs/cli/ai-integration) — set up `myop train` and `myop mcp`
- [Creating Components](/docs/cli/create-component) — component structure and public API