huuthangntk-claude-vision-mcp-server

Claude Deep Think MCP サーバー

Anthropic の Claude Sonnet 4.5 を使用したプロアクティブな深い分析的思考を提供する、強力な Model Context Protocol（MCP）サーバーです。このツールは、新しい情報が届いたときにコードを書く前に呼び出すよう設計されています。

⚡ 核心となる考え方：コードを書く前に考える

新しい情報が届いたら、コードを書く前に、まずこのツールを使用してください：

• 🐛 エラーメッセージやスタックトレース
• 📝 ユーザー要件や機能リクエスト
• 💬 コードレビューのフィードバック
• 🚀 パフォーマンスの問題
• 🔒 セキュリティアラート
• 📚 組み込む API ドキュメント
• 🗄️ データベースの問題
• 💭 UX/UI のフィードバック
• 🔄 依存関係における破壊的変更
• 🏗️ アーキテクチャ上の意思決定

ワークフロー：新しい情報 → 思考ツール → インサイトを確認 → より良いコードを書く

🌟 機能

深い思考と分析（claude_think）

コードを実装する前に、知的なインサイト、提案、戦略的なガイダンスを提供します。次の用途に最適です：

• ✅ 行動する前にコンテキストを深く理解する
• ✅ 潜在的な落とし穴を事前に特定する
• ✅ 最初からベストプラクティスを提案する
• ✅ 代替アプローチを提示する
• ✅ 効率的な実装に必要な重要情報を抽出する
• ✅ 戦略的な意思決定
• ✅ 問題解決とアーキテクチャの計画

結果：バグの減少、コード品質の向上、開発の高速化！

📋 前提条件

• Node.js 18+ または Bun
• Anthropic Claude API キー（こちらから取得）
• MCP 対応クライアント（Cursor IDE、Claude Desktop など）

🚀 クイックスタート

1. インストール

cd claude-vision-mcp
bun install
# or
npm install

2. 設定

API キーは MCP サーバーへの接続時に設定します（下記の Docker または Cursor のセットアップを参照）。

3. ビルド

bun run build
# or
npm run build

🐳 Docker のセットアップ（推奨）

クイックスタート

cd claude-vision-mcp

# Create .env file with your API key
echo "ANTHROPIC_API_KEY=your-key-here" > .env
echo "CLAUDE_MODEL=claude-sonnet-4-20250514" >> .env

# Start container
docker-compose up -d

# Check status
docker ps | grep claude-vision

Docker Desktop の起動時に、コンテナは自動的に再起動します。

Docker の設定

サーバーは http://localhost:8080/mcp で動作し、次の環境変数を使用します：

• ANTHROPIC_API_KEY - Claude API キー（必須）
• CLAUDE_MODEL - 使用するモデル（デフォルト：claude-sonnet-4-20250514）

🔧 Cursor IDE での使用

Docker 接続（推奨）

~/.cursor/mcp.json または .cursor/mcp.json に追加します：

{
  "mcpServers": {
    "Claude Deep Think": {
      "url": "http://localhost:8080/mcp?apiKey=YOUR_API_KEY&model=claude-sonnet-4-5-20250929"
    }
  }
}

プロアクティブな思考を有効にする

このリポジトリの .cursorrules ファイルをプロジェクトのルートにコピーします。これにより、Cursor AI はコードを書く前に思考ツールを自動的に使用するようになります。

# From your project directory
cp claude-vision-mcp/.cursorrules .cursorrules

ツールの使用パターン

新しい情報が届いたら、常に次のパターンを使用してください：

Use the claude_think tool to analyze: [NEW INFORMATION]

Context: [Current situation, tech stack, constraints]

例：

エラーメッセージ：

Use the claude_think tool to analyze:

Error: "TypeError: Cannot read property 'map' of undefined"

Context: React component rendering users from useState hook

新機能：

Use the claude_think tool:

Requirement: Add dark mode toggle to header

Context: Next.js 14, need to check if ThemeContext exists

パフォーマンスの問題：

Use the claude_think tool:

Issue: Homepage renders 50+ times, parent causing all children to re-render

Context: useState for theme in Header, passed via props to 20+ children

📚 使用例

例 1：技術的な意思決定の分析

Use the claude_think tool to analyze:

"I'm building a real-time chat application. Should I use WebSockets, SSE, or HTTP polling?"

Context: Need to support 100K concurrent users, prioritize ease of implementation

期待される出力：長所、短所、推奨事項を含む包括的な比較

例 2：アーキテクチャの計画

Use the claude_think tool to evaluate:

"What's the best way to structure a multi-tenant SaaS application?"

Context: PostgreSQL database, Node.js backend, 50-100 tenants expected

例 3：ベストプラクティス

Use the claude_think tool:

"Review this approach to handling user sessions in a Next.js app"

Context: Using JWT tokens, storing in localStorage, concerned about security

🛠️ 開発

プロジェクト構成

claude-vision-mcp/
├── src/
│   └── index.ts              # Main MCP server implementation
├── .smithery/
│   └── index.cjs            # Built server (generated)
├── package.json              # Dependencies and scripts
├── tsconfig.json            # TypeScript configuration
├── smithery.yaml            # Smithery deployment config
├── Dockerfile               # Docker container definition
├── docker-compose.yml       # Docker Compose configuration
└── README.md               # This file

利用可能なスクリプト

• bun run build / npm run build - TypeScript をコンパイル
• bun run dev / npm run dev - ホットリロード対応の開発サーバー

🔒 セキュリティのベストプラクティス

1. API キーをコミットしない - 常に環境変数を使用してください
2. .gitignore を使用する - .env ファイルが無視されるようにしてください
3. キーを定期的にローテーションする - API キーを定期的に更新してください
4. ツール呼び出しを確認する - Cursor で手動承認を有効にしておいてください
5. 開発環境を使用する - 本番環境以外のデータでテストしてください

📦 Docker の管理

# Start container
docker-compose up -d

# View logs
docker logs claude-vision-mcp-server -f

# Restart container
docker-compose restart

# Stop container
docker-compose down

# Rebuild and restart
docker-compose up -d --build

🐛 トラブルシューティング

問題：Cursor でサーバーに接続できない

解決策：

1. Docker コンテナが実行中であることを確認します：docker ps | grep claude-vision
2. コンテナログを確認します：docker logs claude-vision-mcp-server
3. Cursor IDE を完全に再起動します
4. URL 内の API キーが正しいことを確認します

問題：API キーのエラー

解決策：

1. キーが sk-ant- で始まっていることを確認します
2. キーをこちらでテストします：https://console.anthropic.com/
3. コンテナ内の環境変数を確認します
4. URL パラメーターの形式を確認します

問題：コンテナが起動しない

解決策：

# Check logs
docker logs claude-vision-mcp-server

# Verify .env file
cat .env

# Rebuild from scratch
docker-compose down -v
docker-compose up -d --build

💡 パフォーマンス

Bun ランタイムを使用する場合：

• ⚡ パッケージのインストールが 4 倍高速
• ⚡ スクリプトの実行が 3〜4 倍高速
• 📦 Docker イメージのサイズを削減
• 🚀 コールドスタートが高速化

📖 充実したガイド

• PROACTIVE_THINKING_WORKFLOW.md - 使用前と使用後の例を含むワークフローの完全ガイド
• THINK_TOOL_EXAMPLES.md - 実際の使用例 10 件
• .cursorrules - コードを書く前に自動で考えるパターンを適用する Cursor IDE のルール

💡 このワークフローを使う理由

Think ツールを使わない場合：

1. User reports error
2. AI writes quick fix
3. Fix creates new bug
4. Multiple iterations needed
⏱️ Total: 30 minutes, 3 iterations

Claude_Think ツールを使う場合：

1. User reports error
2. AI analyzes with claude_think tool (20s)
3. AI writes comprehensive fix
4. Works correctly first time
⏱️ Total: 5 minutes, 1 iteration

結果：6 倍高速で、品質が向上し、バグも減少します！🎉

📄 ライセンス

MIT

🤝 貢献

貢献を歓迎します！お気軽にプルリクエストをお送りください。

📞 サポート

問題や質問がある場合：

• GitHub で issue を作成してください
• MCP Documentation をご確認ください
• このリポジトリのワークフローガイドをお読みください

🙏 謝辞

• Anthropic Claude API を使用して構築
• Model Context Protocol を基盤として使用
• Bun でコンテナ化