Blip MCPサーバー：UI変更を説明する代わりにClaudeコードで描画する
Blipが解決する課題
開発者は、AIコーディングアシスタントと作業する際の特定のコミュニケーション問題に対処するためにBlipを構築しました。それは、UI変更を口頭で説明する際のやりとりです。ソースからの例には、「ボタンを20px左に移動」、「いや、別のボタンです」、「2番目と3番目のセクション間のパディング」などがあります。このプロセスは、実際の修正を実装するよりも多くの時間を浪費することがよくあります。
仕組み
Blipは、実行中のアプリケーションを描画ツールがオーバーレイされた状態で開きます。以下のことができます：
- ボタンを丸で囲む
- 矢印を描く
- 「ここにもっとパディングを追加」などのテキストを書く
スクリーンショットに注釈を付けた後、送信を押します。Claude Codeは注釈付き画像を受け取り、あなたが指示した変更を実装するための対応するコードを記述します。
技術詳細
Blipは、Claude Code専用に構築されたMCP（Model Context Protocol）サーバーです。このプロジェクト全体は、週末を使ってClaude Codeで構築されました。無料で、MITライセンスの下でオープンソースであり、データ収集なしで完全にローカルで実行されます。
インストール方法
インストールするには：
claude mcp add blip -- npx blip-mcpプロジェクトリンク
- ランディングページ：https://blip-chi.vercel.app
- GitHubリポジトリ：https://github.com/nebenzu/Blip
- 例のスクリーンショット：https://preview.redd.it/lo07xfhfr7qg1.png?width=2878&format=png&auto=webp&s=c8bad2090f27ec4701375aaf671a49369ce416
開発者は、これが初めてのオープンソースプロジェクトであり、フィードバックを受け取ることを喜んでいると述べています。
📖 Read the full source: r/ClaudeAI
👀 See Also
eコマース研究用の3つのMCPサーバー：Shopify、Amazon、Google Mapsツール（Claude対応）
開発者が、APIキーなしでShopifyストアを分析し、Amazon製品の機会をスコアリングし、Google Mapsからローカルビジネスのリードを見つけてスコアリングするための3つのMCPサーバーをClaude用に構築しました。これらはすべてApifyで利用可能です。
Claudebin: Claudeコードセッションをエクスポートして共有
Claudebinは、Claude Codeセッション全体をエクスポートし、単一のURLを通じて共有や再開を可能にします。
Claude-IDE-Bridgeがリモートサーバーで動作可能に、AI支援開発を実現
Claude-IDE-Bridgeツールは、Claude AIをVPSやクラウドマシン上のリモート開発環境に接続し、ライブ診断、開いているファイル、テスト失敗にどのデバイスからでもアクセスできるようにしました。
ProofShot CLIはAIコーディングエージェントにブラウザ検証機能を提供します
ProofShotは、ブラウザセッションの記録、スクリーンショットの撮影、コンソールエラーの収集を通じて、AIコーディングエージェントがUI機能を検証できるオープンソースのCLIツールです。シェルコマンドを実行できるあらゆるエージェントと連携し、人間によるレビューのための自己完結型HTMLレポートを生成します。