Page-native annotations
Create element, text, and area annotations directly on real pages without switching tools or re-explaining UI context.
DevPilot Beta
Turn browser issues into AI-ready frontend tasks.
DevPilot helps teams annotate real pages, capture runtime issues, and hand clean task packets to Claude, Codex, and connected MCP workflows.
Local workflow
Annotate -> Copy to AI
Use DevPilot on any real page, create annotations, then copy a structured task packet into Claude, Codex, Cursor, or another coding tool.
Connected workflow
Stability + MCP + repair flow
Add the MCP bridge when you want synchronized sessions, SSE updates, runtime issue capture, and AI repair orchestration.
Live page context
Checkout page with a visible UI issue 1
DevPilot stays on the page, so the issue is captured where it really appears.
Task packet preview
What the AI receives
- Page URL, viewport, and on-page anchor
- Selectors, grouped elements, nearby context
- Source hints for faster diagnosis
Local
Ready immediately
MCP
Connected when needed
SSE
Live sync updates
Overview
One product, two practical modes.
DevPilot is designed as a progressive workflow. Local mode works immediately. Connected mode adds collaboration and MCP-powered repair flows.
AI-ready task packets
Copy rich task packets with selectors, grouped elements, nearby context, and source hints to improve AI diagnosis and fixes.
Optional Stability Copilot
Capture runtime issues such as JS errors, failed requests, and rejected promises when you want a broader browser issue signal.
MCP-connected workflows
Sync sessions, stream updates over SSE, and hand structured repair requests to Claude, Codex, and other compatible agents.
Compare modes
Start local. Add connected mode when the workflow grows.
DevPilot is intentionally progressive. The browser package already works on its own. MCP comes in when you want synchronized sessions, stability workflows, and AI repair orchestration.
Local mode
- Element, text, and area annotations
- Copy AI-ready task packets
- Works immediately in a single page
- Best for solo debugging and quick handoff
Connected mode
- Session sync and SSE updates
- Stability persistence and repair requests
- Claude / Codex / MCP agent workflows
- Best for repeatable browser-to-code flows
Packages
What to install
@littleee/devpilot
The browser package. Use it when you want page-native annotations, task packet export, and the local AI handoff workflow.
npm install @littleee/devpilot@littleee/devpilot-mcp
The local bridge and MCP server. Use it when you want connected mode, SSE sync, stability persistence, and agent-side workflows.
npx @littleee/devpilot-mcp serverWorkflow
Typical flow
1
Annotate the page
Mark an element, select text, or box a region directly on the live page.
2
Copy to AI
Send a clean task packet to Claude, Codex, Cursor, or another coding assistant.
3
Add connected mode when needed
Use the MCP bridge for synchronized sessions, stability flows, and repair request orchestration.
Who it's for
Built for teams that already live in the browser and code editor.
Frontend engineers
Annotate a bug where it appears, then hand a concrete task packet to your coding assistant instead of rewriting page context by hand.
QA, product, and design
Capture exactly which page area is wrong, then pass a cleaner issue description to the implementation team or AI workflow.
AI-first workflows
Use DevPilot as the browser-side entry point, then connect MCP when you want synchronized sessions and repair orchestration.
Docs
Start here
FAQ
Questions people usually ask before trying it.
Do I need MCP to use DevPilot?
No. The browser package works on its own. You can annotate pages and copy task packets without running the MCP bridge.
When should I add the MCP bridge?
Add MCP when you want session sync, SSE updates, Stability Copilot persistence, or structured repair request workflows with AI agents.
Does DevPilot automatically change my code?
No. DevPilot prepares browser context and task packets. Actual code changes still happen in your coding agent or editor workflow.
What makes this different from a normal feedback tool?
DevPilot is designed for browser-to-code execution. It focuses on turning real page issues into structured inputs that AI coding tools can act on.
Try it
Ready to test DevPilot on a real page?
Start with the browser package, then add the MCP bridge when you want the connected workflow.