Tidewave IDE

The agentic dev environment for

Phoenix and Rails

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

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

Designed for Phoenix and Rails, with additional support for:

React

Vite

Vue

TanStack Start

Features

Augment every step of your workflow

From spec to code review, you and the agent work in tandem.

Development

Your agent sees what you see

Your agent works across your stack, from UI to the database, and you see every change as it happens. No more translating between what you're looking at and what your agent knows.

Both totals come from the same table, so I can render them above the chart.

Edited signups_live.ex

41 <div class="space-y-4">

42 + <.stat label="Last 30 days" …

43 + <.stat label="Last 7 days" …

44 <.signups_chart …

Both totals render above the chart.

Done in 17s

localhost:4000/signups

Analytics

Signups

Last 30 days

12,480 +18.4%

Last 7 days

3,216 +9.2%

Weekly signups

Point and click

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

Analytics

Signups

Weekly signups

New accounts created over time

Signups

<.signups_chart>

<.signups_chart> add weekly and monthly totals above this chart

Claude Opus 5

Git integration and pull request status

Swap branches, push/pull, and check pull request status directly from Tidewave. Reference pull request comments or fix CI by clicking one button. Learn more

#412 Open on GitHub

Add signup totals above the chart

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 2

+18 -2

Voice input

Talk to your coding agent instead of typing. Inspect page elements and reference files as you speak to insert them into the conversation. Learn more

signups_live.ex make the totals responsive

They stack below sm now. Anything else?

the totals look cramped on mobile, give <.stat> a bit more room and

Claude Opus 5 12%

Think

Transcribing · click the page to reference an element

Testing

Verify changes in your browser

You and your agent share the same browser window. When your agent makes a change, it navigates your app to verify it works. When something breaks, it sees the same error page you do.

localhost:4000/signups/new

New signup

maria@acme.com

Create signup

Executed browser script

await browser.click("New signup");

console.log(await browser.snapshot());

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

check the totals render after a signup, and record it for the PR

Captured screenshot

A Acme Analytics Signups

Signups

Last 30 days

12,480

Last 7 days

3,216

Recorded screen

A Acme Analytics Signups

Signups

Last 30 days

12,480

Last 7 days

3,216

signup-totals.webm 0:12

Both totals render and match the query.

Code Review

Review as you go

Review code while your agent works. Mark sections as reviewed, and future changes show as diffs on top of what you've already seen. Stop reviewing the same code multiple times. Learn more

Working tree +19 -3 1 / 2 files reviewed

signups_live.ex +19 -3

1 unreviewed Mark as reviewed +1 -1

42 - <.stat label="Last 30 days" />

42 + <.stat label="Last 30 days" tabular />

2 reviewed Undo +18 -2

signups_live_test.exs +6 -1

1 reviewed Undo +6 -1

Real-time feedback

Comment on any change and send it to your agent as feedback. The agent can tackle it immediately or queue it until it finishes its current turn.

12 defp assign_totals(socket) do

13 today = Date.utc_today()

14 month_ago = Date.add(today, -30)

15 week_ago = Date.add(today, -7)

16 socket =

17 + last_30 = Signups.count_since(month_ago)

18 + last_7 = Signups.count_since(week_ago)

19 assign(socket, ...)

20 end

Queued messages (1 of 1)

Send now

signups_live.ex these come back nil on a fresh install, default both to 0

Spec

Task boards

Break down work into tasks and track progress across sessions. Your agent picks up where you left off and knows what to tackle next. Learn more

Pending

Cache the weekly rollup

Signups are recounted on every mount.

Empty state for new accounts

Alert on signup drop-off

In Progress

Add weekly and monthly totals

Above the chart, derived in the mount.

Assigned to: agent

Completed

Extract Signups context

Backfill inserted_at index

Seed signup fixtures

Add signups table

Diagrams for planning and understanding

Ask your agent to diagram architecture, data flows, or planned changes. Renders right next to your chat, no need to switch between tools. Learn more

Called tool get_ecto_schemas

Read accounts/team.ex

Read accounts/user.ex

Read signups/signup.ex

Here's the schema as it stands, with the table we discussed drawn in:

Proposed schema evolution

Mermaid diagram

View

Done in 9s

Mermaid diagram

Diagram Code

Design

UI variants

Compare multiple versions of a component directly inside your web app. Pick your favorite or ask your coding agent to keep iterating. 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

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, never competes with the chart.

1b Illustration-led

No signups yet

Share your invite link.

Invite your team

Gives the invite action room to breathe.

1c Guided checklist

Get your first signups

Connect your domain

Share the invite link

Import a CSV

Start setup

Turns the wait into setup, busier screen.

100%

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.

Works with the agents you already use

You can also use ACP-compatible coding agents or use OpenCode to connect to 75+ different providers.

Tidewave enhances Claude Code, making it 2× more accurate and 45% faster on average for full-stack changes.

Read our report →

% of accessibility issues solved

Tidewave +
Claude Code

↓158s · ↓25.1k tokens

Claude Code

290s · 27.7k tokens

Try Tidewave now

Download for macOS

Apple Silicon

macOS Intel Windows Linux x86_64 Linux ARM64

Using containers? Install the tidewave CLI instead.

Tidewave IDE The agentic dev environment for Phoenix and Rails

Signups

Features

Augment every step of your workflow

Development

Your agent sees what you see

Point and click

Git integration and pull request status

Voice input

Testing

Verify changes in your browser

Vision mode

Code Review

Review as you go

Real-time feedback

Spec

Task boards

Pending

In Progress

Completed

Diagrams for planning and understanding

Design

UI variants

Canvas

Deep integration with your web framework

Works with the agents you already use

Try Tidewave now

Tidewave IDE

The agentic dev environment for

Phoenix and Rails