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
Tidewave
Weekly signup totals
What do you want to build?
Type a message below, or start with
Design canvas
Explore design options side by side
Diagram
Map out a flow or architecture
Web accessibility
Find and fix web accessibility issues
<div> add weekly and monthly totals above this chart

Executing SQL query Executed SQL query select count(*) filter (where …
Query
select
count(*) filter (where inserted_at > $1)
as last_30,
count(*) filter (where inserted_at > $2)
as last_7
from signups;
Output
last_30 | last_7
12480 | 3216

Editing Edited lib/acme_web/live/signups_live.ex +18 -2
Changes
41 <div class="space-y-4">
42 + <.stat label="Last 30 days" value={@last_30_days} />
43 + <.stat label="Last 7 days" value={@last_7_days} />
44 <.signups_chart data={@daily} />

Executing browser script Executed browser script
Script
await browser.screenshot();
console.log(await browser.snapshot());
Output
- main:
- heading "Signups" [level=1]
- region "Last 30 days": 12,480
- region "Last 7 days": 3,216
- img "Weekly signups chart"
Last 30 days
12,480
Last 7 days
3,216

Surfing (0s)
Done in 17s
signups_live.ex use tabular-nums for the totals

Zipping
Done in 2s
#412 checks fix the failing checks

Executing shell command Executed shell command gh run view 18402 --log-failed
Output
test/acme_web/live/signups_live_test.exs:24
Assertion with =~ failed
left: "Signups this week"
right: "Last 30 days"
Editing Edited test/acme_web/live/signups_live_test.exs +6 -1
Changes
24 - assert html =~ "Signups this week"
24 + assert html =~ "Last 30 days"
25 + assert html =~ "Last 7 days"

Reeling
Done in 7s
@maria good catch, let's fix that

Editing Edited lib/acme_web/live/signups_live.ex +2 -2
Changes
18 - last_30 = Signups.count_since(month_ago)
18 + last_30 = Signups.count_since(month_ago) || 0
Zipping
Done in 2s
explore a few designs for the signups empty state

Creating design canvas Created design canvas empty-state.html
Variants
1. Minimal
2. Illustration-led
3. Guided checklist
Sketching
Done in 3s
&lt;figure&gt; smaller illustration, and add an import action

Editing design canvas Edited design canvas empty-state.html
Changes
- illustration: 160px
+ illustration: 88px
+ secondary action: "Import CSV"
Sketching
Done in 2s
perfect, implement it

Editing Edited lib/acme_web/live/signups_live.ex +34 -6
Changes
52 + <.empty_state :if={@daily == []}>
53 + <:action>Invite your team</:action>
54 + <:action secondary>Import CSV</:action>

Surfing
Done in 4s
Message the agent <div> signups_live.ex @maria <figure>
Claude Opus 5 12%
Think
#412 Open on GitHub
Add weekly and monthly signup totals
GitHub Actions 2
Fix failures
CI / test 1m 12s
CI / format 24s
Discussion M J
View comments
@maria requested changes 2h ago
signup-totals #412
+18 -2
+19 -3
localhost:4000/signups
A Acme Analytics
Last 30 days

Analytics

Signups

How many people joined Acme this week.

Last 30 days
12,480 +18.4%
Total signups
Last 7 days
3,216 +9.2%
Recent signups
Weekly signups
New accounts created over time
Signups Conversions
MonTueWedThuFriSatSun
<.signups_chart>
div
Captured
Preview
Code review
#412 comments
empty-state.html
Working tree +18 -2 +19 -3
0 1 / 1 files reviewed Commit reviewed
lib/acme_web/live/signups_live.ex +18 -2 +19 -3
1 unreviewed Mark as reviewed
+18 -2
39 def render(assigns) do
40 ~H"""
41 <div class="space-y-4">
42 + <.stat label="Last 30 days" value={@last_30_days} />
43 + <.stat label="Last 7 days" value={@last_7_days} />
44 - <.signups_chart data={@daily} class="mt-2" />
44 + <.signups_chart data={@daily} class="mt-4" />
45 </div>
1 unreviewed Mark as reviewed
+1 -1
42 - <.stat label="Last 30 days" value={@last_30_days} />
42 + <.stat label="Last 30 days" value={@last_30_days} tabular />
1 reviewed Undo
+18 -2
2 reviewed Undo
+19 -3
Working tree clean
M @maria requested changes Changes requested

Nice, this reads much better. One thing on the totals before I approve.

lib/acme_web/live/signups_live.ex Reference
17 socket =
18 + last_30 = Signups.count_since(month_ago)
19 + last_7 = Signups.count_since(week_ago)
M @maria · 2h ago

These come back nil on a fresh install and the template blows up. Can we default both totals to 0?

1 Signups empty state

Three directions for the screen people land on before any data comes in.

1a Minimal
No signups yet
They will show up here.
Invite your team

Copy only, so it never competes with the chart above.

1b Illustration-led
No signups yet
Share your invite link or bring an existing list.
Invite your team Import CSV

Gives the invite action room and hints at what the chart will show.

1c Guided checklist
Get your first signups
Connect your domain
Share the invite link
Import a CSV
Start setup

Turns the wait into setup, at the cost of a busier screen.

div
100% 160% 100%

Precise framework traces

Framework-specific tools

Your agent sees the same page as you

See changes since last review

Pull request actions

Reference pull request discussions in your prompt

Precise designs alongside your app

Deeply integrated into your web framework

Phoenix
Rails
React
Vue
Vite
TanStack Start

Works with your coding agent

Claude Code
OpenAI Codex
OpenCode
GitHub Copilot
and more
Get Tidewave

Works with your coding agent:

Claude Code Claude Code
OpenAI Codex OpenAI Codex
OpenCode OpenCode
GitHub Copilot GitHub Copilot
and more
Tidewave
Weekly signup totals
<div> add weekly and monthly totals above this chart

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

Executed browser script
Script
console.log(await browser.snapshot());
Output
- main:
- heading "Signups" [level=1]
- img "Weekly signups chart"
Executed SQL query select count(*) filter (where …
Query
select
count(*) filter (where inserted_at > $1)
as last_30,
count(*) filter (where inserted_at > $2)
as last_7
from signups;
Output
last_30 | last_7
12480 | 3216

Both totals come from the same table.

Edited lib/acme_web/live/signups_live.ex +18 -2
Changes
41 <div class="space-y-4">
42 + <.stat label="Last 30 days" value={@last_30_days} />
43 + <.stat label="Last 7 days" value={@last_7_days} />
44 <.signups_chart data={@daily} />

Now let me confirm it renders.

Executed browser script
Script
await browser.screenshot();
console.log(await browser.snapshot());
Output
- main:
- heading "Signups" [level=1]
- region "Last 30 days": 12,480
- region "Last 7 days": 3,216
- img "Weekly signups chart"

Both totals render and match the query.

Codex
Claude Code
Codex
GitHub Copilot
OpenCode
Connect any ACP provider
signup-totals
signup-totals
main
#412
Add weekly and monthly signup totals
GitHub Actions 2
CI / test 1m 12s
CI / format 24s
Discussion @maria requested changes
localhost:4000/signups
A Acme Analytics
Last 30 days

Analytics

Signups

How many people joined Acme this week.

Last 30 days
12,480 +18.4%
Total signups
Last 7 days
3,216 +9.2%
Recent signups

Weekly signups

New accounts created over time

Signups Conversions
MonTueWedThuFriSatSun
div

Meet Tidewave IDE

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

Learn more

Supported frameworks & tools

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 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

Download for macOS

Apple Silicon

macOS Intel Windows Linux x86_64 Linux ARM64

Using containers? Install the tidewave CLI instead.