ハクソク

世界を動かす技術を、日本語で。

Tidewave Web: RailsおよびPhoenix用のブラウザ内コーディングエージェント

2025年8月20日原文(tidewave.ai)

概要

Tidewave Webは、RailsおよびPhoenix向けの 新しいコーディングエージェント。 ブラウザ上で直接動作 し、UIやコードの文脈を保持。 従来のエージェントのような ツール間の行き来が不要。 ページとコードの共有文脈 により、開発効率を大幅に向上。 今後はさらに多くの フレームワーク対応や機能拡張 を予定。

Tidewave Webとは

  • Rails および Phoenix アプリケーション向けのコーディングエージェント
  • ブラウザ上 でアプリと並行して動作し、 開発環境と完全連携
  • UI状態 や コードコンテキスト を自動把握、エージェントが画面やコードを理解
  • GitHub Copilot または Anthropicアカウント と連携可能

主な特徴

  • 共有ページ文脈

    • 現在のUI状態を直接取得し、 コントローラー・ビュー・テンプレート に自動マッピング
    • 手動で画面説明やコード追跡をする必要なし

  • 深いフレームワーク統合

    • Rails/Phoenixアプリ 内でコード実行、DBクエリ、ログ監視、ドキュメント参照が可能
    • 開発者と同じツールセットをエージェントが利用

  • 協調的なブラウザテスト

    • 新機能を アプリ上で構築＆即時検証
    • ポイント＆クリックインスペクタ でUI要素を選択し、改善や変更を指示可能

  • 開発環境で直接動作

    • パッケージ追加のみで導入、 /tidewave ルートから利用開始
    • 無料トライアル （月20メッセージ）、Proプラン（月額$10）で無制限利用

共有文脈による開発効率化

  • 従来はAIエージェントと 文脈が分断 され、何度も説明や切り替えが必要
  • Tidewave Webは UI要素を直接選択 し、指示可能
    • 例：「このメニューにCSVエクスポートボタンを追加して、ページデータをエクスポートする機能を実装」
  • エージェントは 選択内容を自動でテンプレート・コントローラ・ビューにマッピング
  • DBクエリやモデル参照、動作テスト、エラーログ確認 まで自動対応
  • 開発者・エージェント・Webアプリ間で文脈を共有 し、反復作業を大幅削減

パッケージ内容と利用条件

  • Rails/Phoenixパッケージ として提供
  • GitHub Copilot または Anthropic APIキー が必要
  • /tidewaveルート から利用開始、 無料トライアル （20メッセージ/月）
  • Tidewave Pro （月額$10）で無制限メッセージ
  • 初期リリースでは Webアプリ連携とフレームワーク統合 に注力
  • 今後の予定： TODO管理・サブエージェント などの機能追加
  • ReactやVue などのクライアントサイドフレームワークは現在未対応（React対応は近日予定）
  • Django、Flask、Next.js などへの対応も計画中

次世代AI開発者ツールの展望

  • 開発元 Dashbit は、 開発ツールやWebフレームワーク の豊富な経験を持つチーム
  • 従来のAIコーディングアシスタントは 汎用的 で、実行環境や生成物を理解できない課題
  • 次世代AIツール は、ドメイン固有の文脈や実行環境を理解する必要性
    • Web開発では ページ・コード・実行環境 を一体化したエージェントが理想
    • モバイル開発では デバイスAPIやシミュレータ との連携が必須
  • ゲーム開発やIoT など各分野ごとの特有文脈や検証フローにも対応予定
  • Tidewave Web はその第一歩であり、今後さらなる展開を予定

参加・今後の案内

  • 新フレームワーク対応時の 優先案内リスト や Discordサーバー 参加可能
  • 最新情報やリリース案内を希望する場合は 登録推奨

Tidewave Team

Hackerたちの意見

このアーキテクチャの詳細ははっきりしないけど、ブラウザへの統合が深いのが大きな特徴だね。これがコーディングエージェントの進むべき明らかな方向だと思う。今のところ、カーソルクロームブラウザのMCPサーバーはあまりうまく動いてないけど、これが必要な方向性だってのは明らかだよ。フレームワークに焦点を当てることで、ブラウザから直接良いコンテキストを得る一般的なアプローチよりも根本的に良くなる理由がわからないな。

└

browser-tools-mcpを使うと、要素を指して「この要素の色を赤に変えて」とエージェントに頼めるんだ。HTMLの部分をコピーして、コードベースを検索してくれる。ブラウザ内でフレームワークレベルのツールがあれば、どのコントローラーとどのテンプレートがこの要素を生成したのかを正確に把握できて、より精密にターゲットできると思う。ツールコールやトークンを減らしながらね。まだ試してないけど、それが期待してることだよ。

└

フレームワーク特化が大きな利点になる理由は2つあるよ：1. テンプレート言語を注釈付けして理解してるから、要素を選択すると、そのタグや属性だけでなく、どのテンプレートファイルがそれをレンダリングしたのかもわかる。テンプレート言語が構造化されているほど（JSX、HEExなど）、より良い仕事ができるから、LLMが推測する必要がなくなる。2. ウェブフレームワーク内でコードを実行するから、データベースアクセスや、プロジェクト内の正確なバージョンを使ったドキュメントへのアクセス、言語やフレームワークのリフレクション/イントロスペクションAPIへのアクセスが可能になる。だからエージェントにはもっと自由度があるんだ。これで少しはわかりやすくなったかな！

昨晩、数時間かけて試してみたよ。ログインプロセスはうまくいかなかったけど、これは僕のブラウザがGithub用の別のコンテナを持ってたからなんだ。Railsで書いたシンプルなギャラリーページに、Stimulus.jsを使って機能を追加してもらうよう頼んだんだ。ギャラリーの画像にカーソルを合わせるとアイコンが表示され、アイコンをクリックするとトリミングできるモーダルがポップアップするっていう内容ね。データベースのモデルをちゃんと拾って、すごく良い結果が出たんだけど、解決策の検証に問題があったみたいで、「ホバー時」の処理が特に苦戦してた。出てきた解決策はclaude-codeのよりずっと良かったし、インターフェースも気に入ったよ。それに、Anthropic APIの制限に達しちゃったんだけど、その場合どうすればいいのかはっきりしなかったな。これはTidewaveのせいじゃないと思うけど、コンテキストウィンドウの使用量が最大200.0kっていうのも高すぎる気がするし、それが制限に達した原因かもしれない。

└

フィードバックありがとう、kawsper！コンテキスト制限についてもっと見えるようにして、要約しやすくする予定だよ。「ホバー時」に関して、試したスニペットはまだ残ってる？モデルには適切なブラウザAPIを使ってイベントを発信するよう指示してるから、何をしようとしたのか気になるな。もっと聞かせてほしい！TidewaveのDiscordでメッセージしてくれてもいいし（https://discord.gg/5GhK7E54yA）、メールでもOKだよ（github.com/josevalimを見てね）。

みんな、こんにちは！私たちの仕事がフロントページに載ってて嬉しいよ。質問があれば喜んで答えるよ。次のステップについてだけど、今はReactの統合に取り組んでて、次はPythonとJavaScriptのサーバーサイドウェブフレームワークを予定してるよ。興味があれば、こちらがアンケート/待機リストだよ：https://forms.gle/8MeXwGjpBFDeGNQw9

└

すごくクールだね、Claude Codeを使って開発する時にMCPサーバーとして使ってるんだけど… Tidewave Webを使うことで私たちのワークフローはどう変わるの？

ねえ、Jose、これはPhoenix.newとどう違うの？

└

Phoenix.newはリモートエージェントについてだけど、Tidewaveは自分のマシンで動いてるアプリと統合できるよ！

ちょっと前からTidewaveプラグイン使ってるけど、このブラウザの追加機能は結構クールだね。価格が気になるな。自分でGitHub CopilotやAnthropicのキーを用意しなきゃいけないって書いてあるけど、使用回数に制限があって、その後はお金が必要になるのはなんでだろう？データがTidewaveサーバーを通ってるから？それとも「今は無料だけど、そろそろお金払ってね」って感じの試用版みたいなもの？

└

両方だよ。Tidewaveサーバーがあって（エージェントの調整を導入したらもっと重要な役割を果たす予定）、でもその制限があれば、ツールの価値を実感して有料ユーザーに転換してくれることを期待してるんだ（そうすれば改善を続けられるから）。

かっこいいね、買う前にローカルのLLMサポート、例えばOllamaが出るのを待つよ。

Hacker Newsで議論の続きを見る