The complete AI dev toolkit for Phoenix and Rails

Connect your coding agent to your running app to design, develop, test, and review in the browser. Your agent sees what you see.

Download for macOS

Works with your coding agent:

Claude Code Claude Code
OpenAI Codex OpenAI Codex
OpenCode OpenCode
GitHub Copilot GitHub Copilot
Tidewave
Add chart statistics
<div> Add summary stats above this chart for the last 30 days and the last 7 days.

I’ll inspect the chart and confirm the available data.

Executed browser script
Script 
console.log(await browser.snapshot());
Output 
main
  heading “Growth overview”
  region “Weekly signups”
Executed SQL query
Query 
SELECT
  count(*) FILTER (WHERE created_at >= CURRENT_DATE - 30) AS last_30_days,
  count(*) FILTER (WHERE created_at >= CURRENT_DATE - 7) AS last_7_days
FROM signups;
Output 
last_30_days | last_7_days
12,480       | 3,216

The existing data has everything needed. I’ll derive both totals from the same dataset.

Edited Chart
Patch 
+ <Stat label="Last 30 days" value={last30Days} />
+ <Stat label="Last 7 days" value={last7Days} />
Output 
Updated Chart
Executed browser script
Script 
console.log(await browser.snapshot(stats));
Output 
“Last 30 days”  12,480
“Last 7 days”    3,216

Added the summary stats and verified they update with the chart.

Codex
Claude Code
Codex
GitHub Copilot
OpenCode
Connect any ACP provider
feat/stats
feat/stats
main
feat/dashboard
#1142
Add chart summary statistics
GitHub Actions 4
CI / Unit tests 1m 42s
CI / Browser tests 4m 08s
CI / Build 1m 12s
CI / Lint 52s
Discussion 2 comments
http://localhost:3000
A Acme Analytics
Overview Customers Reports

Analytics

Growth overview

Last 30 days
12,480 +18.4%
Total signups
Last 7 days
3,216 +9.2%
Recent signups
Conversion
8.7%
Visitor to signup

Weekly signups

New accounts created over time

Signups Conversions
div

Meet Tidewave IDE

Design, develop, test, and review alongside your web app in the browser. Your agent sees what you see.

Learn more

Meet Tidewave Toolbar

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

Learn more
Tidewave

Web development has a context-switching problem

Web development has always felt chaotic. We parse requirements, tweak the frontend, wire up the backend, fix CI, and everything in between.

Coding agents have made us more productive, but they’ve also made web development more fragmented. We prompt the agent in the terminal, validate changes in the browser, explore UI components in Claude Design, and review code in a separate GUI. We’re spread across a dozen different directions, constantly translating what we see back to the agent.

Tidewave is our answer to this chaos: a toolkit that connects you and your agent across every facet of web development, from idea to merged code. It understands how your web framework works, so you and your agent spend less time guessing and more time building.

Tidewave is built for Phoenix and Rails by a team that has spent two decades creating developer tools, from programming languages to web frameworks. We use it daily and we hope you’ll love it too.

Try Tidewave now

macOS (Apple Silicon) macOS (Intel) Windows Linux (AppImage, x86_64) Linux (AppImage, ARM64)

If you are using containers, download the tidewave CLI instead.