Tidewave: Connecting Web Apps to AI-Powered Development

José Valim recently introduced Tidewave, a new tool designed to connect web applications with editors and AI agents such as Claude, Zed, Cursor, Windsurf, and others. Tidewave works by embedding a Model Context Protocol server into a running web application. This allows development tools—not just to analyze code statically—but to observe and introspect applications at runtime, enabling much smarter and more helpful interactions during development. The project is open source and currently supports Phoenix and Rails, with additional frameworks planned for the future. A Live Demo: Adding Pricing Plans with AI // Detect dark theme var iframe = document.getElementById('tweet-1917296901268910405-363'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1917296901268910405&theme=dark" } In a demonstration, Valim showcased Tidewave in action using a freshly generated Phoenix application. After setting up basic authentication and a settings page, he outlined a common task for SaaS applications: adding pricing plans. To accomplish this, he used Claude Desktop—a standard AI interface. While Claude itself isn’t a dedicated coding agent, when paired with Tidewave, it effectively becomes one. The prompt given to the AI was: “I'm building a SaaS. Please add a price selector with common options to the live view page I'm currently looking at. Once you're done with the changes, run mix compile in the shell to make sure everything is working, and fix it if it's not.” Thanks to Tidewave, the AI was able to: List project files, Detect which page the user was viewing (DemoWeb.UserLive.Settings), Retrieve contextual code information, Edit the correct files. Even when errors were introduced (like invalid syntax), Tidewave enabled the AI to compile the project, detect issues, and attempt automatic fixes. Eventually, the application reloaded with a functioning pricing selector—a solid foundation for subscription plan logic. The Takeaway This demonstration wasn’t just about automating code edits—it showed that with Tidewave, even general-purpose AI tools like Claude can behave like intelligent coding assistants when given runtime context. The key message: whether using Claude, Cursor, or other tools, Tidewave enhances their capabilities by exposing real-time insight into your application, enabling faster, smarter development. The demo closed with a reminder: what was shown was just the beginning. Developers can continue using the AI to expand features—like integrating Stripe or connecting to a database—or take over from where the AI left off. Tidewave is available today, open source, and growing. It's a glimpse into the future of software development—where AI and runtime context work hand-in-hand.

Apr 30, 2025 - 12:34

Tidewave: Connecting Web Apps to AI-Powered Development

José Valim recently introduced Tidewave, a new tool designed to connect web applications with editors and AI agents such as Claude, Zed, Cursor, Windsurf, and others.

Tidewave works by embedding a Model Context Protocol server into a running web application. This allows development tools—not just to analyze code statically—but to observe and introspect applications at runtime, enabling much smarter and more helpful interactions during development.

The project is open source and currently supports Phoenix and Rails, with additional frameworks planned for the future.

A Live Demo: Adding Pricing Plans with AI

// Detect dark theme var iframe = document.getElementById('tweet-1917296901268910405-363'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1917296901268910405&theme=dark" }
In a demonstration, Valim showcased Tidewave in action using a freshly generated Phoenix application. After setting up basic authentication and a settings page, he outlined a common task for SaaS applications: adding pricing plans.

To accomplish this, he used Claude Desktop—a standard AI interface. While Claude itself isn’t a dedicated coding agent, when paired with Tidewave, it effectively becomes one.

The prompt given to the AI was:

“I'm building a SaaS. Please add a price selector with common options to the live view page I'm currently looking at. Once you're done with the changes, run mix compile in the shell to make sure everything is working, and fix it if it's not.”

Thanks to Tidewave, the AI was able to:

List project files,
Detect which page the user was viewing (DemoWeb.UserLive.Settings),
Retrieve contextual code information,
Edit the correct files.

Even when errors were introduced (like invalid syntax), Tidewave enabled the AI to compile the project, detect issues, and attempt automatic fixes. Eventually, the application reloaded with a functioning pricing selector—a solid foundation for subscription plan logic.

The Takeaway

This demonstration wasn’t just about automating code edits—it showed that with Tidewave, even general-purpose AI tools like Claude can behave like intelligent coding assistants when given runtime context.

The key message: whether using Claude, Cursor, or other tools, Tidewave enhances their capabilities by exposing real-time insight into your application, enabling faster, smarter development.

The demo closed with a reminder: what was shown was just the beginning. Developers can continue using the AI to expand features—like integrating Stripe or connecting to a database—or take over from where the AI left off.

Tidewave is available today, open source, and growing. It's a glimpse into the future of software development—where AI and runtime context work hand-in-hand.