Until now, using Tidewave meant working in the Tidewave app. Today there's a second way: using Tidewave directly with the agent you already drive from your terminal or editor, such as Claude Code, Codex, Cursor, or OpenCode.
Two pieces make that work: Tidewave Toolbar and Tidewave Connect.
Tidewave Toolbar: you point, copy the prompt, your agent gets the context #
Tidewave adds a small toolbar to every page of your running app. Click an element, write your prompt, and copy it into your agent. The prompt is enriched with framework traces, so your agent can know exactly which element you mean and where it lives in your code.
In the tour below, we show this with a simple task: swapping two buttons. A single prompt created with the Toolbar equips your agent with relevant context: the page you’re viewing, the framework entry point, the source location, and related references. Because of this, the agent can get straight to work instead of grepping through the codebase to reconstruct what you’re seeing and where it comes from.
The toolbar gives you more than element selection:
UI variants- ask the agent to generate alternative versions of a selected component, then flip through them live on the page and keep the one you like - Accessibility- scan the current page against Web Content Accessibility Guidelines (WCAG) rules and copy a prompt that asks your agent to fix the issues found - Diagnostics- Tidewave watches your application for errors. Because it has access to runtime information, a crash shows up immediately, with a one-click prompt to fix it
Here's a complete tour of Tidewave Toolbar:
Tidewave Connect: your agent sees and drives your app #
The coding agent you're using from your terminal or editor connects to your browser and controls your running app. It's similar to tools like Playwright, with a few things you only get in Tidewave:
It uses your browser- your existing browser and your existing sessions, so the agent sees and debugs the same page you're working with - It knows your framework- Tidewave recognizes error pages automatically and feeds stacktraces, logs, and framework diagnostics to the agent - Vision mode- your agent can take screenshots as context, andrecord videos with captionsfor proof of work
In the tour below, we ask the agent for a simple end-to-end test. It drives the browser through the app while reading the console logs the whole time, something most browser tooling never hands to the agent, and frameworks like Phoenix put a lot of useful metadata there. Along the way it catches a real bug (a sort select whose value wasn't being serialized) and inspects the DOM to diagnose it. Later, asked to create a record in the database, it runs code inside the app through Tidewave, then reuses the same browser session to open the page and verify the record is there, without being asked to.
Under both of them sits our runtime intelligence, which you already have from the Tidewave package: your agent queries your database (reusing your app's existing connection), reads your logs, runs code inside your running app, and reads version-pinned docs.
About the name: Tidewave x Tidewave IDE #
Tidewave now means this new form factor (Toolbar + Connect + MCP), which you can use with whatever agent you already use in your terminal or editor.
The app you already know is now called Tidewave IDE. It keeps doing everything it does today. Nothing is going away; you've just got a second way to work if you'd rather stay in your editor or your terminal.
How to start using Tidewave Connect #
Tidewave Connect works with Phoenix, Rails, and Vite/TanStack. Update the Tidewave package your project uses:
mix deps.update tidewave
bundle update tidewave
npm install -D tidewave@latest
If your mix.exs
or Gemfile
pins Tidewave to a patch version like ~> 0.8.0
, change it to ~> 0.8
first. Then restart your app and open /tidewave
in your browser to get started.
Read the Tidewave Connect docs for the full setup guide. Give it a try and let us know if you have any questions or feedback on our Discord Server.