概要
https://qiita.com/the_haigo/items/5d4dbb63ee5595ced33a
詳細内容
## AIコーディングツール Tidewaveを使ってアプリを作ってもらう #Elixir
https://qiita.com/the_haigo/items/5d4dbb63ee5595ced33a
Elixirの作者が所属するdashbit社が開発したAIコーディングツールTidewave WebをPhoenixプロジェクトに導入し、ブラウザ上でUI状態を理解するエージェントを活用してアプリ開発を行う手順を解説します。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:4/5 | Depth:3/5 | Unique:3/5 | Practical:4/5 | Anti-Hype:3/5
**Main Journal**: 97/100 | **Annex Potential**: 90/100 | **Overall**: 68/100
**Topics**: [[Elixir, Phoenix, AI Coding Tools, Tidewave, Agent-based Development]]
この記事では、Elixirの作者José Valim氏が所属するdashbit社が開発したAIコーディングツール「Tidewave Web」をElixir/Phoenixプロジェクトに導入し、実際にアプリケーションを開発する手順を詳細に解説しています。Tidewave Webは、従来のコーディングエージェントと異なり、開発環境のブラウザ内で直接動作し、UIの状態やフレームワークを理解します。これにより、画面の説明やスタックトレースのコピー＆ペーストが不要になり、ツール間の文脈の断絶を防ぐことができると筆者は強調しています。また、ブラウザ上でインスペクタ経由で直接指示が出せる点や、アプリとエージェントの間に立って指示を最適化し、トークン使用量を大幅に削減できる点が強みとされています。
具体的な手順として、筆者はまずTidewave WebのCodex CLIをセットアップし、Phoenixプロジェクトを作成します。次に、`mix.exs`ファイルに`tidewave`依存関係を追加し、`endpoint.ex`ファイルにプラグを組み込みます。サーバーを起動後、TidewaveのUIでコーディングエージェント（本記事ではOpenAI Codex）を設定し、自然言語でアプリの要望（例: 「本棚アプリを作りたい」）を入力すると、Tidewaveが提案する構成を基にアプリケーションのコードを自動生成する様子が示されています。
さらに、筆者はTidewave Webの強力な機能である「インスペクタモード」の活用方法を実演しています。このモードでは、ブラウザのインスペクタを通じて特定のUI要素を直接選択し、「消してください」といった指示をチャットで送ることで、選択した要素を正確に削除できることを確認しました。この機能は、従来のAIエージェントでは難しかった、視覚的なフィードバックに基づいた直感的なUI変更を可能にし、開発効率を大幅に向上させると筆者は評価しています。
最後に、筆者はTidewaveが実際のページのタグを指定しながら指示を出せる点を特に評価しており、今後テストコードの生成やレビュー機能なども試してみたいと述べています。