Tidewave Toolbar

Inspect, debug, and improve your UI with framework-aware context for your coding agent.

Tidewave

Features

Point and click prompting

Want to change something? Click it. Tidewave doesn't just read the DOM, it traces elements back to your source code, forwarding it all to your agent. Learn more

Browser automation

Your coding agent can control your web app through the browser. Think Playwright, but augmented with our framework-aware annotations and diagnostics. Learn more

Vision mode

Your agent captures screenshots to spot visual regressions it would miss from code alone. It can also record videos as proof of work, so your team can verify without re-testing. Learn more

Catch issues before production

Surface client-side errors and run web accessibility reports enhanced with web framework metadata. Give your coding agent the context it needs to identify defects faster and resolve them before you ship. Learn more

UI variants

Your coding agent can propose multiple versions of a page or UI component. Pick your favorite or request further changes, within your web app. Learn more

UI variants are awesome!

Container Toast
1/3 Soft

Canvas

Explore and refine interface ideas with your coding agent on a visual canvas. Compare multiple directions side by side, then iterate on the details you care about. Learn more

Deep integration with your web framework

Give your coding agent new tools to access everything your app knows.
Get better results, less back-and-forth. We call this Runtime Intelligence.

Runtime introspection

Give your agents their own REPL to test methods, read logs, and explore APIs.

Access documentation

Pull docs for your exact library versions, not whatever a web search returns.

Query your database

Access your models and tables using your app's existing connection. No additional tools required.

Try the Tidewave Toolbar today

It only takes a minute to get started.

1

Install the Tidewave package

Run the command in your Phoenix app:

mix archive.install hex igniter_new --force && mix igniter.install tidewave --yes
Follow the manual installation steps on GitHub
2

Configure the MCP (optional)

Connect your coding agent to your web app by following these instructions.

3

Need help? (optional)

Join our community to get support from the Tidewave team and other developers.