widgetation 0.1.0

On-demand widget tree streamer for Flutter. Wrap your app and inspect it live from a desktop viewer over the local network.

widgetation

Visual feedback. For agents.

Widgetation turns UI annotations into structured context that AI coding agents can understand and act on. Click any element, add a note, and paste the output into Claude Code, Codex, or any AI tool.

Inspired by agentation.

How you use it

1. Click the ◎ icon in the bottom-right corner to activate
2. Hover over elements to see their names highlighted
3. Click any element to add an annotation
4. Write your feedback and click Add
5. Click ⧉ to copy formatted markdown
6. Paste into your agent

Setup

Prompt setup (recommended)

Copy this prompt into your agent and let it wire everything up:

Add the widgetation package to this Flutter app.

1. Add `widgetation: ^latest` to pubspec.yaml under dependencies.
2. Run `flutter pub get`.
3. In lib/main.dart, import `package:widgetation/widgetation.dart`
   and wrap the root widget passed to runApp with `Widgetation(child: ...)`.
   Example: `runApp(const Widgetation(child: MyApp()));`
4. Do not change anything else.

Manual setup

Add the dependency:

dependencies:
  widgetation: ^0.1.0

Wrap your app's root:

import 'package:flutter/material.dart';
import 'package:widgetation/widgetation.dart';

void main() {
  runApp(const Widgetation(child: MyApp()));
}

That's it. The overlay only mounts in debug and profile builds — in release mode Widgetation is a no-op, so it's safe to leave wrapped.

What you get

• Click to annotate — pick any widget, attach a note
• Marquee select — drag across multiple widgets to annotate them as a group
• Formatted output — copy as markdown with widget names, locations, and your notes
• Zero release-mode cost — wrapper compiles out

How it works

Widgetation hooks into Flutter's element tree to identify the widget under your cursor — including its type, the source file it was built in, and the line number. When you write a note and copy, it bundles each annotation with that location info as markdown, so the agent knows exactly which widget in which file you're talking about.

Example clipboard output:

### **Page Feedback List**

1. Text ("Welcome back")
Source: lib/screens/home_page.dart:42
Feedback: this should be larger and centered on mobile

2. ElevatedButton +2
Source: lib/screens/home_page.dart:88, lib/widgets/cta.dart:14
Feedback: align these three CTAs horizontally with equal spacing

Pasting this into Claude Code or Codex gives the agent everything it needs to find and edit the right code.

Compatibility

• Flutter >=3.10.0
• Dart SDK ^3.11.1
• iOS, Android, macOS, Windows, Linux, web

License

MIT.