Inspecto

Inspect mode

Click one component, attach exact source and DOM context, then hand it to your configured AI path.

Annotate mode

Select multiple UI issues, add notes, create an agent task, and follow progress in the sidebar timeline.

Quick jump

Hold `Alt` + `Click` on any element to instantly open the exact source location in your editor, skipping manual search.

Assistant-first setup

AI-led intelligent setup. Run one install command in your project root, and let the AI automatically guide you through configuration in your IDE.

Custom workflows

Define workflow buttons in prompts.json, such as Deploy Preview or Review & PR, and let your agent execute them with its own skills, MCP servers, and tools.

Browser-side agent timeline

When using MCP, Inspecto streams session updates back into the sidebar so users can see claimed, progress, resolved, and dismissed states.

Common Frontend Fixes

Fix a visible UI bug

Click the broken component, send exact source context to your assistant, and avoid explaining where the code lives.

Apply design review comments

Annotate several elements in one pass, add per-element notes, then create one task for the agent.

Let an MCP agent work in the background

Create a browser task, let the agent claim it, and watch replies, progress, and completion in the sidebar.

Run a custom workflow

Add a Deploy Preview or Review & PR button through prompts.json, then let the agent use its own skills, MCP servers, and tools.

See the Core Workflows

Inspect mode

Click a component, attach exact context, and hand it to your AI assistant.

Annotate mode

Collect multiple UI notes, create one task, and track agent progress in the browser.

Quick jump

Hold Alt + Click on any element to instantly open the exact source location, skipping manual search.

Ecosystem

Use Inspecto when...

the issue is already visible in the browser
you want the shortest path to source or AI
you want an agent to process UI annotations while you follow progress in the browser
you want project-specific workflow buttons such as deploy, review, PR, or release
you are tired of copying snippets between tools
you need accurate context without manual lookup

What should I choose first?

Pick the editor / AI assistant you already use, such as VS Code + Copilot, Cursor, or Trae.
Run one install command from your project root. You do not need to understand MCP or IDE routes first.
Restart your dev server and open the browser, then use Inspect mode, Annotate mode, or Alt + Click.

Only want source jump or a standalone MCP agent? See Getting Started for the specific path.

InspectoClick UI. Jump to source. Let AI fix it.

Inspect mode

Annotate mode

Quick jump

Assistant-first setup

Custom workflows

Browser-side agent timeline

See It in Action

Why Inspecto?

Common Frontend Fixes