どんなLLMとも連携できる、VS Code向けのビジュアル・スペック駆動開発拡張を作りました
課題
GitHubのSpec Kitを試したことがあるなら、スペック駆動開発の価値は分かっているはずです。コードを書く前に要件を定義し、AIに構造化された仕様（spec）・計画（plan）・タスクを生成させます。とても良いワークフローです。
しかし、ギャップがあります。
Spec Kitはチャット内のスラッシュコマンドで動作します。視覚的なUIがなく、進捗の追跡もなく、承認ワークフローもありません。/speckit.specifyと入力して出力を読み、/speckit.planと入力して…という具合です。動きますが、ビジュアルではありません。
Kiro（AmazonのVS Codeフォーク）はビジュアル体験を提供しますが、特定のLLMにロックされ、カスタムフォークのためにVS Codeから離れる必要があります。
私は両方を実現したかったのです。つまり、VS Code内でのビジュアルなワークフローであり、かつ自分が選ぶどんなLLMとも動作すること。
そこでCarameloを作りました。
Carameloでできること
CarameloはVS Code拡張で、スペック駆動開発のための完全なビジュアルUIを提供します：
1. どんなLLMとも接続 — あなたの社内プロキシを含めて
プリセットをクリックして資格情報を入力するだけです。CLIツールは不要です。
標準でサポート：
- GitHub Copilot — 既存のサブスクリプションを使います。APIキーは不要
- Local: Ollama、LM Studio（APIキー不要）
- Cloud: Claude、OpenAI、Gemini、Groq（APIキー）
- Custom: OpenAI互換の任意のエンドポイント
- 社内プロキシ: Azure API Manager、AWS API Gatewayなどに対するカスタム認証ヘッダー
同じ種類のプロバイダーを複数持つことができます。たとえば「Claude Personal」（自分のAPIキー）と「Claude MyCompany」（会社のプロキシ経由）を、それぞれ異なるエンドポイントや認証設定で用意します。ドットのインジケータをクリックして切り替え可能です。利用可能な場合はAPIからモデルを取得し、難しい場合は自動バリデーション付きで手動入力もできます。
2. 承認ゲート付きのビジュアル・ワークフロー
次にどのスラッシュコマンドを実行すべきかを覚える代わりに、Carameloはワークフローをビジュアルで表示します：
次のフェーズを解放する前に、各フェーズを承認する必要があります：
- Requirements → spec.mdを生成
- Design → plan.md + research.md + data-model.mdを生成
- Tasks → tasks.mdを生成
LLMがドキュメントを書いていく様子を、リアルタイムでストリーミング表示で確認できます。満足したら承認するか、先に手動で編集します。前のフェーズを再生成した場合、下流のフェーズは「古い（stale）」としてフラグが立ちます。
3. 憲法（Constitution）に基づく生成
いかなる仕様（spec）を作る前にも、プロジェクトの憲法（conceptions）を定義します。これは譲れない原則です：
「すべての機能にはエラーハンドリングを含めること。」「TDDは必須。」「正当化なしに外部依存を追加しないこと。」
手動で書いてもいいし、"Generate with AI"をクリックしても構いません。プロジェクトを説明すると、LLMが原則を提案します。これらは、すべての生成のコンテキストとして自動的に含められます。
4. Jiraから仕様を取り込む
Jiraで計画を立てるチーム向けに：
- Jira Cloudのボードを接続（組織名で検索。ボードが2000以上の組織）
- 仕様（spec）を作成するときに「From Jira」をクリック
- 課題（issue）を検索するか、キーを直接入力（例：PROJ-123）
- タイトル、説明、受け入れ基準、コメントが仕様の入力になる
スペックカードには連携されたJiraバッジが表示されます。クリックすると該当のissueへジャンプします。
5. エディタからのタスク実行
生成されたタスクは単なるドキュメントではなく、実行可能なものです：
- Run Task — ボタンをクリックすると、LLMがコードを生成
-
Run All Tasks — すべてを実行。並列マーカー
[P]を尊重 - Output Channel — LLMの推論をリアルタイムで確認
- 進捗の追跡 — サイドバーに完了率を表示（すべてのタスクが完了したときのみ100%）
- インラインのチェックリスト — サイドバーでタスクを直接切り替え
6. 品質ツール
先に進む前に、自分の作業を検証します：
- Clarify — LLMがあいまいさを特定し、質問をQuickPickダイアログとして提示します
- Analyze — すべてのアーティファクト間の一貫性をチェックし、重大度レベル付きで結果を報告します
- Fix Issues — 分析レポートからワンクリックで自動修正
- Checklists — コンテンツ固有の検証項目を生成します
すべてCarameloメニュー（エディタツールバーの猫アイコン）からアクセスできます。ツールバーをすっきり保つための、単一のグループ化されたドロップダウンです。
Architecture: How It Works
この拡張機能は意外とシンプルです（~170KBのバンドル）：
-
No LLM SDKs — 共有SSEパーサーを使ったネイティブの
fetch、さらにCopilotにはvscode.lm - No React — ネイティブのVS Code API（WebviewView、CodeLens、QuickPick）
-
No external CLI —
specifyCLIや、PATH上の任意のツールを必要としません -
Spec Kit compatible —
specs/を読み書きし、GitHubリリースからテンプレートを同期します - State-driven UI — インライン編集はすべて再レンダリングのパターンを使用し、脆いDOM操作は行いません
What I Learned Building This
VS CodeのWebviewView APIは強力です。 単一のWebviewパネルが、3つの別々のTreeViewを置き換え、フォーム、プログレスリング、タスクのチェックリスト、インライン編集をすべて—シンプルなHTML/CSSだけで—実現してくれました。
SSEストリーミングはシンプルです。 LLMプロバイダーの2種類（OpenAI互換 + Anthropic）と、Copilotの
vscode.lmAPIにより、約150行のストリーミングコードで利用ケースの95%をカバーできます。企業向けのLLMアクセスはごちゃごちゃしています。 異なるAPIマネージャーが、異なる認証ヘッダー名やプレフィックスを使います。プロバイダーごとにこれらを設定可能にすることが、エンタープライズでの導入に不可欠でした。
状態駆動の再レンダリングは、DOM操作に勝ります。 早期の試みとして、
postMessageでフォーム要素を注入しようとしましたが、refresh()がイベントリスナーを破壊してしまうため動きませんでした。editingStateを保持し、編集を組み込んだエディタ込みで完全なHTMLを再レンダリングすることが、確実な解決策でした。仕様（Spec）駆動の開発は機能します。 Carameloを使ってCarameloを作ったことで、ワークフローが証明できました。各機能は、specify → clarify → plan → tasks → implement を通して進めました。
Try It
- Install：VS Codeの拡張機能で「Caramelo」を検索するか、Marketplaceを訪れてください
- Source：github.com/fsilvaortiz/caramelo
- License：MIT
ご協力歓迎です！Contributing Guideをご確認ください。
仕様（spec）駆動の開発で作られており、選んだ任意のLLMによって動作します。
