Claude Code の質問と承認にブラウザのフォームで答える — md を一次記録にしたまま応答ループを閉じる
TL;DR Claude Codeからの質問は、いったんMarkdownファイルに書いてもらって、その中にある回答欄に私が直接書き込む運用にしている。チャットのスクロールを行き来しながらターミナル上に長文回答を書くよりも、マシにはなったけど、やっぱりしんどい。（ファイルを開く・選択肢を書き写す・Claudeに書き終わったことを伝える、など、あまり本質的ではない操作が多い） そこで、前回の記事で作ってもらったWeb UIに、ブラウザのフォームで回答・承認できる機能を載せてもらった。質問mdに :::form と書けば、ラジオボタンやチェックボックスとして表示されて、まとめて送信すれば...
背景と概要
Claude Codeをターミナルで使用する開発者は、AIが質問や承認要求を投げかけるたびに、手動で回答を入力するか、エディターに切り替えてファイルを編集し、AIに続行を通知するという非効率なループに悩まされていた。このプロセスは集中力を削ぎ、入力ミスによるコンテキスト汚染のリスクも伴う。ある開発者は、Claude Codeに質問をMarkdownファイルへ書き出させ、その中に直接回答を記入する運用で一時的に対処したが、ファイルを開き、質問を探し、選択肢を書き写し、保存して完了を伝えるという手間は依然として大きかった。
この課題を解決するため、開発者は以前に構築したWeb UIにブラウザフォーム機能を追加した。質問用のMarkdownに:::formというマーカーを埋め込むことで、AIの問いかけがブラウザ上でラジオボタンやチェックボックスとして自動レンダリングされる。ユーザーが選択して送信ボタンを押すと、回答が即座にClaude Codeへフィードバックされ、人とAIの応答ループが最小限の操作で閉じられる。これにより、断片的な複数ステップの作業がシームレスなワンクリック操作へと変貌し、開発者の集中力が保たれる。
深掘り分析
技術的な巧妙さは、非構造的なMarkdownテキスト内に構造化されたフォームデータを埋め込み、Web層で解析・レンダリングする点にある。Claude Codeは、質問タイプ（単一選択・複数選択）、選択肢、デフォルト値をYAMLライクな簡潔な構文で定義した:::formコードブロックを含むMarkdownファイルを生成する。軽量なNode.jsサービスがファイルシステムを監視し、新たな質問ファイルを検出すると、:::formブロックをHTMLフォームにパースし、WebSocket経由でブラウザにプッシュする。ユーザーが送信すると、サービスは選択された回答をMarkdownファイルに書き戻すか、Claude CodeのAPIを通じて注入し、AIの実行を再開させる。
このMarkdownベースのフォームパターンは、ターミナルやIDE組み込みのインタラクションと比較して明確な利点を持つ。Markdownファイルはバージョン管理との親和性が高く、すべてのQ&A履歴が追跡可能かつdiff表示に適しており、チームコラボレーションや監査に役立つ。ブラウザフォームはラジオボタンやチェックボックスに加え、将来的にドロップダウンやテキスト入力などへ拡張可能で、モバイル端末からも操作しやすい。さらに「ドキュメントがインターフェース」となるモデルにより、Markdownファイルが人とAIの単一の信頼できる情報源となり、チャネル間の不整合を防ぐ。GitHub Copilot ChatのサイドバーやCursorのインラインパネルとは異なり、このソリューションは軽量で特定のIDEに依存せず、ファイルI/Oが可能なあらゆるAIツールとHTTPサービスで統合できる高い移植性を備える。
業界への影響
Claude Codeにとって、このイノベーションは単なるコマンドラインツールから、プログラマブルなAIエージェントのコアへと昇華させ、開発者が自身のワークフローに合わせたカスタムインタラクションシェルを構築する道を開く。これは、JetBrains AI AssistantやGitHub Copilotなど他のAIコーディングツールにインタラクションデザインの再考を促す可能性がある。これらのツールもグラフィカルな承認カードを提供しているが、多くはIDEと強固に結びついており、Markdownベースのプロトコルがクロスプラットフォームで普遍的な人-AIインタラクション層として浮上するかもしれない。
開発者、特にターミナル中心のエンジニアにとって、AIとのコラボレーションにおける認知的負荷は大幅に低下する。意思決定が必要な時だけブラウザフォームに目をやり、すぐにコードへ戻ることでフロー状態を維持できる。より深遠な影響として、承認や選択といったメタ操作を独立したWeb UIにオフロードすることは、高度なワークフロー自動化への道を整える。例えば、特定の変更タイプを自動承認するルールを事前設定し、リスクの高い操作のみをフォームにプッシュしたり、フォーム結果を直接CI/CDパイプラインに送り込み、要件からデプロイまでのループを閉じたりすることが可能になる。
今後の展望
技術的な拡張は容易であり、入力フィールド、日付ピッカー、ファイルアップロード、条件付きロジックなどのフォームコンポーネントを追加することで、より複雑な設定や承認シナリオに対応できる。製品面では、AnthropicがこのパターンをClaude Codeのオプションフロントエンドや標準化されたプロトコルとして公式に採用するかどうかが注目される。公式APIやプラグインマーケットプレイスが提供されれば、コミュニティ主導で類似ツールのエコシステムが活性化するだろう。
「Markdownをインタラクションプロトコルとして」というコンセプトは、コーディング分野を超えて、ドキュメント生成やデータ分析などの領域に波及する可能性がある。例えば、AIがレポート生成時にフォームを埋め込み、ユーザーフィードバックを収集してコンテンツを動的に調整するといった応用が考えられる。しかし、自動化が深まるにつれ、人間の監視が弱まるリスクも高まる。承認レベルや二重確認、操作リプレイ機構などを導入し、利便性と安全性のバランスを取ることが不可欠だ。開発者体験を重視するチームにとって、今はこうした軽量なインタラクション最適化を実験する好機であり、それがAIコラボレーションの効率を高める重要なレバレッジとなるかもしれない。