DevPilot

Getting Started

Install DevPilot and use the local workflow.

This guide covers the fastest path: install the browser package, mount DevPilot, annotate a page, and copy the task packet into an AI coding tool.

1. Install the package

npm install @littleee/devpilot

DevPilot is a React browser package. It works well as a local-mode tool even before you connect an MCP bridge.

2. Mount DevPilot

import { mountDevPilot } from "@littleee/devpilot";

mountDevPilot({
  defaultOpen: false,
});

You can mount DevPilot on the page directly. In local mode, the core workflow is already available without any extra backend.

3. Use the local workflow

  1. Click an element, select text, or draw an area annotation.
  2. Describe the issue in plain language.
  3. Use Copy to AI to generate the task packet.
  4. Paste it into Claude, Codex, Cursor, or your preferred coding agent.

4. Practical tips

  • Use element annotations when you want the AI to target a specific control.
  • Use area annotations when the issue spans multiple related elements.
  • Keep the problem statement short and concrete; the task packet already carries structural context.
  • Enable Stability Copilot only when you want runtime issue capture in addition to manual annotations.