AIコーディングツール Tidewaveを使ってアプリを作ってもらう

Last updated at 2025-12-05Posted at 2025-11-29

はじめに

この記事はElixirアドベントカレンダー2025シリーズ２の5日目の記事です。

本記事はAIコーディングツールTidewave Wabをセットアップし、実際に作っていく方法を解説していきます

Tidewave Webとは？

Elixirの作者のJosé Valimさんが所属している会社のdashbitが開発した
開発環境のブラウザ内で直接動作するコーディングエージェントです

特徴としては以下のようです

Unlike traditional coding agents that require constant back-and-forth, Tidewave Web knows your UI state, understands your framework, and runs within your actual development environment. No more describing what’s on your screen, copying stacktraces, or losing context between tools.

従来のコーディングエージェントとは異なり、Tidewave WebはあなたのUIの状態を理解し、あなたの使っているフレームワークを理解し、実際の開発環境の中で動作します。
つまり、画面の説明を書いたり、スタックトレースをコピペしたり、ツール間で文脈が切れることがなくなります。

つまりブラウザ上で動作しているので、インスペクタ経由でこの場所をこうしてと直接指示がしやすいのと、アプリとエージェントの間に立って指示を最適化して使用トークンを大幅に減らせるのが強みのようです

料金

FreeはDBアクセス等をしてデータを取得してくれたりするMCPでコードは別に書いてくれません

Proからコーディングをしてくれます
Try it For Freeで２０回まで無料でお試しができます

月額１５００円くらいですし、トークン使用の効率がめっちゃ上がるとのことなので、実質０円！

今回はProをお試しで使っていきます

対応しているフレームワーク

最初はPhoenixとRailsだけでしたが現在は以下のプロジェクトで使用できます

Phoenix
Rails
Django
FastAPI
Flask
Next.js
React

本記事ではPhoenixを使用します

対応Coding Agent

現在以下のサービスに対応しています

Claude Code
OpenAI Codex
Github Copiot

この他にもFigma dev modeでも使えるようです

本記事では OpenAI Codexを使用します

codex setup

こちらを参考にcodex cliをセットアップします

npm install -g @openai/codex

インストールしたら以下のコマンドを実行して認証します

codex

enter押せば認証ページを開くので認証してください

install

サイトからインストールバイナリをダウンロードして、追加します

実装はRustのようです

Phoenix project作成

今回は本棚アプリをsqliteでDBを作成します

mix phx.new bookshelf --database sqlite3

dektopアプリ化します

mix.exs

  def deps
-     {:bandit, "~> 1.5"},  
+     {:bandit, "~> 1.5"},
+     {:desktop_setup, github: "thehaigo/desktop_setup", only: :dev}
  end

mix deps.get
mix desktop.install

setup

次にPhoenixにtidewaveを追加します

mix.exs

  defp deps do
    [
      {:tidewave, "~> 0.5", only: [:dev]},
      ...
    ]
  end

mix deps.get

追加が完了したらendpoint.exの if code_reloadingの前にいかのように追加します

lib/bookshelf_web/endpoint.ex:L29

+ if Code.ensure_loaded?(Tidewave) do
+   plug Tidewave
+ end

  # Code reloading can be explicitly enabled under the
  # :code_reloader configuration of your endpoint.
  if code_reloading? do
    socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
    plug Phoenix.LiveReloader
    plug Phoenix.CodeReloader
    plug Phoenix.Ecto.CheckRepoStatus, otp_app: :bookshelf
  end