Skip to main content

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

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:

npx myop dev -m

2. Point your app to localhost​

Add one line to your app's initialization code:

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:

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:

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​

ProblemFix
App still loads from cloudMake sure enableLocalDev() runs before any <MyopComponent> renders
Component not updatingCheck that myop dev is running and watching the right directory
Chrome MCP sees stale versionHard-refresh the page or clear browser cache — HMR should handle most cases
Multiple components neededUse myop dev -m for monorepo mode

Next Steps​