ハクソク

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

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

278日前原文(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が出るのを待つよ。

AI製品を作ってる者として、エージェントコーディングツールを出たときから使ってるけど（主にRailsプロジェクトで）、これが理解できない。似たようなプロジェクトでRails MCP Serverってのがあって、そこではこう言ってた：>「このRails MCP ServerはMCP仕様を実装して、AIモデルにRailsプロジェクトへのコード分析、探索、支援のアクセスを提供します。」でも、その価値がわからない。ブラウザ統合の利点は少し見えるけど、IDEやCLIツール、そしてそれらがもたらすワークフローを離れるほどの価値はないと思う。Playwright MCPを使ったり、スクリーンショットを簡単に取ったりしても、もっと文脈が得られるし。Claude Codeは今やサーバーをバックグラウンドで動かして、ログも見れるよ。完璧な世界ではLLMが一発で機能を作れるかもしれないけど、Claude Codeを10分も放置すると悪いパターンを生み出して止めなきゃいけなくなる。これでさらに可視性が減るのは良い組み合わせには思えない。ほかのプロジェクトを否定するつもりはないけど、自分の視点を伝えたかっただけ。実際に試してみてどうなるか見てみるべきだけど、CopilotのライセンスやAnthropic APIキーが必要なのも、プロジェクト特有の依存関係があるのも気になる。

└

君が言った通り、実際に試してみて、どんなメリットがあるかを見るのが一番だね（もしあれば）。それに加えて、君が挙げた2つのポイントを追加するよ。まず、Playwright MCPは本当に不十分だよ。例えば、プロジェクト管理ソフトを作っていて、プロジェクト間でタスクを移動する機能を作っていると想像してみて。これをテストするには、少なくとも管理者ユーザーと2つのプロジェクトが必要なんだ。Playwrightがこの機能をテストする時、アカウント作成を自動化し、2つのプロジェクトを設定して、タスクを追加する必要があって、しばしば詰まっちゃう。Tidewaveを使っていると、この設定を開発の一部として自然に行えるから、テスト中にTidewaveが直接アクセスできるんだ。だから、同じページとやり取りするだけ。さらに、バグや改善できるところを見つけても、Playwrightや通常のコーディングエージェントに直してもらうことはできないから、自分の意図を翻訳しなきゃいけない。Tidewaveなら、ただポイントしてクリックすれば、ブラウザ間で動作するんだ。このことについては、発表記事でも詳しく話してるよ：https://tidewave.ai/blog/tidewave-web-phoenix-rails それ以外にも、君が言ってたTidewaveとエディタの連携についてもすごく興味がある。いずれエディタは必要になるけど、このやり取りをどうやって最適に行うか？最初にTidewave内でレビューして小さな調整をするべきかな？とにかく、ウェブアプリケーションのためにエージェントをブラウザに移動させることには、十分なメリットがあると思うよ。

└

何時間か使ってみたけど、時々指示に苦労することがあって、モーダルを完全にぶっ壊しちゃったりした。大きなタスクにはあまり信頼できないなって感じたけど、コンソールでClaude Codeを使ったり、ブラウザでTidewaveを使ったりしたら、ワークフローがすごく良くなったよ。UIの部分だけTidewaveに任せてるけど、うまく動いてる。要素を選んでUIのリファクタリングの指示を出せるのがいいね…これはほんの2、3時間のテストからの感想だけど。

これについてはすごく悩んでる。Tidewave MCPが出た日から大好きで、仕事のためにそれがあればいいのにって思ってる。毎日Playwright MCPを使ってウェブブラウザを操作するのが辛いし、すごく助かるけど、めちゃくちゃ遅くてコンテキストウィンドウを潰しちゃう。これらの問題を解決してほしい。でも、一つのスタックに特有の方法で解決してほしくない。だって、ずっと自分の好きなElixirスタックにこだわる余裕はないから。AIの使い方で大きな後退を強いられるような解決策も避けたい。10ドルのサブスクリプションはそんなに高くないけど、これが完全な解決策じゃないから、CursorやMax、Phoenix.newなどの他のサブスクリプションの上に乗っかることになって、結局は千切りのように負担が増えていく。ちょっと落ち着いて、全か無かで考えないようにしないといけないかも。確かに、これにフルタイムで切り替えるのは無理だろうけど、ツールボックスの一部として、10ドル払って時々使う、難しいことをやるときにAPIトークンに10〜20ドル使う価値があるかもしれない。ソフトウェア開発がどんどん「お金を払わないと遊べない」/「お金を払わないと勝てない」になってきてるのが心配で、それがすぐに「チキン化」につながるかもしれない。つまり、価格が慎重に調整されて、ツール提供者にほとんどの価値が移ってしまう。インフラやツールでこれが起こっているのを見てきたし、今やほとんどの組織が利益の大部分をAWSに「寄付」してる。

└

ソフトウェア開発がどんどん「お金を払わないと遊べない」/「お金を払わないと勝てない」になってきてる それは人々自身がそうしたんだよ。こういうことを学ぶために時間を投資する代わりに、人々は（いつものように）近道を取りたがる。大企業はその怠惰を利用することに非常に積極的で、未来永劫続くだろう—ダイエットピル、AI、時々よだれを垂らすけどGoogleマップより100倍正確な道案内をする脳チップなど。

└

その気持ちわかるよ。どんなモデルのサブスクリプションでも統合できたらいいんだけど、MaxをClaude製品以外で使うのは規約違反みたいだね。Anthropicに連絡して、Maxのサブスクリプションを他のコーディングエージェントで使いたいって伝えてみるのがいいと思うよ。

Maxプランで使えないなら、話にならないね。

初めて使ってみたけど、GitHub Copilotのサブスクリプションと統合できるのを見て嬉しかった！それからClaude Sonnet 3.7（GitHub Copilot提供のモデル）を使って、アプリにいくつかクールな変更を加えたよ。今のところ、すごくいい感じ。