ChatWeb リニューアル — ブラウザだけでAI開発ターミナル

Claude Code をブラウザから使える開発ターミナル「ChatWeb」を大幅にリニューアルした。インストール不要、ログインするだけで AI 駆動の開発環境が手に入る。

以前の記事で紹介した claudeterm をベースに、プロダクトとして必要なものをすべて積み込んだ。今回はその全貌を書く。

ChatWeb とは

ChatWeb は Claude Code がブラウザ上で動く開発ターミナル だ。

ローカルに何もインストールしなくていい。ブラウザで chatweb.ai を開いて、Google アカウントかメールアドレスでログインするだけ。あとは「Todo アプリを作って」と打てば、ファイル作成からビルド、デプロイまで AI が一気通貫でやってくれる。

ターミナルの向こう側で動いているのは本物の Claude Code CLI。ファイル編集、コマンド実行、Git 操作、すべてがリアルタイムでストリーミングされる。

新機能一覧

今回のリニューアルで追加した機能をまとめる。

ランディングページ（ライブデモ付き）

chatweb.ai にアクセスすると、実際のターミナル操作をシミュレートするライブデモが動く。「百聞は一見にしかず」をそのまま実装した。デモはトークンを消費しないので安心して試せる。

インタラクティブチュートリアル

初回ログイン後、ステップバイステップのチュートリアルが始まる。基本操作からプロジェクト作成まで、実際に手を動かしながら覚えられる。こちらもトークン消費なし。

プロジェクトフォルダ管理

複数のプロジェクトを管理できるようになった。

新規作成: テンプレートから一発でプロジェクトを作成
切り替え: プロジェクト間をワンクリックで移動
マージ: 別プロジェクトの成果物を統合

「Web アプリのフロントエンド」と「API サーバー」を別プロジェクトで開発して、最後にマージするような使い方ができる。

セッション共有

セッションを URL で共有できる。

共同編集: リアルタイムで同じセッションを操作
フォーク: 他人のセッションをコピーして自分の環境で続行

ペアプログラミングや、「この状態からバグを再現できる」というイシュー報告に使える。

定期実行（cron ジョブ）

AI タスクを定期実行できる。間隔は 5 分から 24 時間まで設定可能。

毎朝 9 時にテストスイートを実行して結果をレポート
1 時間おきに依存パッケージの脆弱性チェック
毎日デプロイ前の自動 lint + 型チェック

「人間が毎日やっていた定型作業」を AI に任せられる。

月額プラン

従量課金に加えて、月額プランを導入した。

プラン	月額	内容
Starter	$9	ライトな個人利用向け
Pro	$29	本格的な開発者向け
Power	$79	ヘビーユーザー・チーム向け

自分の Anthropic API キーを持ち込む（BYOK）ことも引き続き可能。

その他の改善

モバイル最適化ヘッダー: ハンバーガーメニューでスマホからも快適に操作
セッション履歴: 過去の会話をいつでも再開できる
画像生成: /image コマンドで Imagen による画像生成
OGP / ファビコン / SNS 共有対応: セッションを SNS でシェアしたときにプレビューが出る

他サービスとの比較

AI コーディングツールは群雄割拠の時代。ChatWeb の立ち位置を整理する。

vs GitHub Copilot

Copilot は「コード補完」に特化している。エディタの中で次の行を提案してくれる優秀なツールだが、ファイルを跨いだ大規模な変更や、ビルド・デプロイの実行はできない。

ChatWeb は ファイル編集 + コマンド実行 + デプロイまで一気通貫。「React アプリを作って Fly.io にデプロイして」と言えば、全工程を AI が実行する。

vs Cursor

Cursor は素晴らしいローカル IDE だが、インストールが必要。ChatWeb は ブラウザ完結 なので、iPad からでも、借り物の PC からでも、同じ開発環境にアクセスできる。

vs Replit

Replit もブラウザ開発環境だが、ChatWeb は Claude Code を搭載 しているのが最大の違い。コード生成の品質が段違いで、複雑なリファクタリングやバグ修正も自然言語の指示だけで完了する。

vs Claude.ai

Claude.ai は会話ベースの AI アシスタント。コードを書いてくれるが、そのコードを 実行する環境がない。ChatWeb は実行環境を内蔵しているので、コード生成 → 実行 → エラー修正 → テスト → デプロイまでループが回る。

具体的にできること

実際のユースケースをいくつか紹介する。

5 分で Web アプリを公開

> Todo アプリを React で作って、Fly.io にデプロイして

ChatWeb が React プロジェクトを生成し、ビルドし、Dockerfile を書き、fly deploy を実行する。5 分後には公開 URL が手に入る。

バグ修正

> このエラーログを分析して原因を特定し、修正して
[エラーログを貼り付け]

スタックトレースから原因を追い、該当ファイルを修正し、テストを実行して修正を検証する。

iOS アプリ開発

> シンプルなメモアプリを SwiftUI で作って

Swift コードの生成からビルドまで対応。Xcode プロジェクトの設定も AI が面倒を見る。

定期タスクの自動化

> 毎日朝 9 時にテストスイートを実行して、結果を Slack に通知して

cron 機能で定期実行を設定。テスト結果のサマリーを自動で生成してくれる。

技術スタック

層	技術
Backend	Rust (axum 0.7)
Frontend	バニラ JS（単一 HTML、include_str! で埋め込み）
DB	SQLite (rusqlite, WAL mode)
リアルタイム	WebSocket + PTY ストリーミング
認証	Google OAuth + メール OTP (Resend)
課金	Stripe Checkout + Webhook
AI	Claude Code CLI (PTY) + Gemini 2.5 Pro (REST)
画像生成	Imagen (Gemini API)
ストレージ	R2 対応（ファイル永続化）
デプロイ	Fly.io Tokyo + Docker + GitHub Actions CI/CD

アーキテクチャはシンプルだ:

Browser <--WS--> Rust (axum) <--PTY--> Claude Code CLI (Node.js)
                     |
                  SQLite (users, sessions, otps, credits)

ブラウザと Rust サーバーが WebSocket でつながり、サーバー側で Claude Code CLI を PTY（仮想端末）経由で操作する。CLI の出力はリアルタイムでブラウザにストリーミングされる。

料金

新規ユーザーには 450 円分（$3 相当）のクレジットを無料付与。まずは試してみてほしい。

その後は 3 つの選択肢がある:

月額プラン: Starter $9 / Pro $29 / Power $79
都度チャージ: 必要な分だけクレジットを購入（1 credit = $1）
BYOK: 自分の Anthropic API キーを設定して使う（プラットフォーム手数料なし）

スケーリング対応

現時点では単一の Fly.io VM で運用しているが、将来のスケーリングに備えた設計をしている。

R2 ストレージ抽象化: ユーザーのプロジェクトファイルをオブジェクトストレージに保存する仕組みを実装済み。VM を増やしてもデータが分散しない
マルチ VM 対応準備: セッションのルーティングとステート管理を分離済み。負荷が増えたらスケールアウトできる

使ってみる

https://chatweb.ai

ブラウザで開いて、Google でログインして、何か作ってみてほしい。「Hello World を表示する Web サーバーを Rust で作って」くらいから始めると、ChatWeb の力が分かるはずだ。

フィードバックは X (@yukihamada) か、ChatWeb 内のチャットで直接どうぞ。