Flan MCP

Runtime feedback loop for Flutter

Point. Annotate. Ship.

Flan MCP connects your coding agent to a live Flutter app. Your agent can tap, inspect, and hot reload. You can point at widgets, draw annotations, and send precise instructions directly from inside the app.

Get Started on GitHubSee the Flow
Works with CursorClaude CodeCopilotGemini CLI

$ flutter run

This app is linked to the debug service:

ws://127.0.0.1:52794/N2Tizytts-E=/ws

$ flan.connect "ws://127.0.0.1:52794/N2Tizytts-E=/ws"

[ok] Agent connected

$ flan.watch_flan

Waiting for in-app message...

Everything needed for live UI iteration

Agent can drive the app

Tap, enter text, scroll, inspect widgets, read logs, and trigger hot reload directly from MCP tools.

Developer can drive the agent

Use in-app widget inspector and annotations to send pinpointed feedback with source locations.

Context stays sharp

Use inspect_widget_at for cheap verification and keep prompts focused instead of screenshot-heavy loops.

Recorded End-to-End Flow

Live capture of a developer annotation, agent context pickup, patch, and hot reload.

A practical feedback loop

  1. Connect to live debug session

    Copy the ws://.../ws URL from flutter run output and call connect.

  2. Wait for developer intent

    Run watch_flan and receive messages tied to real widgets and screen coordinates.

  3. Edit, reload, verify

    Make code changes, then automatically run hot_reload. After reload, validate using inspect_widget_at on the same coordinates.

    Agent instruction: after every successful code edit, call hot_reload without waiting for a separate user prompt.

Core toolset

Interaction

  • tap
  • enter_text
  • scroll_to
  • take_screenshots

Collaboration

  • inspect_widget_at
  • watch_flan
  • get_user_message
  • enable_annotations

Replace guesswork with visual intent.

Flan MCP closes the gap between "what I meant" and "what shipped."

Start Integrating Flan MCP