NextChat with MCP Server Builder

MCP サーバービルダーを備えた NextChat

これは、OpenRouter を使って LLM モデルを利用し、チャットを通じて MCP（Model Context Protocol）サーバーを作成、デプロイする機能を追加した、NextChat のカスタマイズ版です。

機能

• チャットによる MCP サーバーの作成：AI とチャットするだけで MCP サーバーを作成できます
• ツールの抽出：説明からツールを自動的に抽出します
• ワンクリックデプロイ：ワンクリックで MCP サーバーをデプロイできます
• 連携ガイド：さまざまな AI システムとの連携手順を確認できます
• OpenRouter との連携：OpenRouter を通じて幅広い LLM モデルを利用できます

はじめに

前提条件

• Node.js 18.0.0 以降
• npm または yarn
• OpenRouter API キー

インストール

1. リポジトリをクローンします：

git clone https://github.com/vredrick2/NextChat.git
cd NextChat

2. 依存関係をインストールします：

npm install
# or
yarn

3. 次の内容で .env.local ファイルを作成します：

# Enable MCP functionality
ENABLE_MCP=true

# OpenRouter API key
OPENAI_API_KEY=your_openrouter_api_key

# Set OpenRouter as the base URL
BASE_URL=https://openrouter.ai/api/v1

# Default model (can be changed to any OpenRouter model)
DEFAULT_MODEL=openrouter/anthropic/claude-3-opus

# Hide user API key input since we'll be using OpenRouter
HIDE_USER_API_KEY=1

# Enable custom models
CUSTOM_MODELS=+openrouter/anthropic/claude-3-opus,+openrouter/anthropic/claude-3-sonnet,+openrouter/google/gemini-pro

4. 開発サーバーを起動します：

npm run dev
# or
yarn dev

5. ブラウザーで http://localhost:3000 を開きます。

MCP サーバーの作成

1. 新しいチャットを開始します
2. 「Create an MCP server」などのフレーズを入力します
3. プロンプトに従ってサーバー名を指定し、機能を説明します
4. システムが説明からツールを抽出し、サーバーをデプロイします
5. さまざまな AI システムで MCP サーバーを使用するための連携手順が表示されます

実装の詳細

MCP サーバー作成インターフェース

MCP サーバー作成インターフェースは、MCP サーバーの作成とデプロイの手順を案内する React コンポーネントとして実装されています。インターフェースには次の機能があります：

• 名前の入力
• 説明の入力
• ツールの抽出
• デプロイ
• 連携ガイドの生成

ツールの抽出

ユーザーの説明からパターンマッチングを使ってツールを抽出します。システムは、次のような特定のツール種別を示すキーワードを検索します：

• 計算ツール
• 変換ツール
• 天気ツール
• 検索ツール
• 翻訳ツール

デプロイ

現在の実装では、モック URL を使ってデプロイをシミュレートします。本番環境では、実際のデプロイサービスに接続します。

連携

システムは、さまざまな AI システム向けの連携ガイドを生成します：

• Cursor
• Claude Desktop
• Windsurf
• API への直接アクセス

プロジェクト構成

• /app/utils/mcp/types.ts：MCP サーバーとツールの TypeScript インターフェース
• /app/utils/mcp/storage.ts：MCP サーバーを管理するためのストレージユーティリティ
• /app/utils/mcp/extraction.ts：ツール抽出機能
• /app/utils/mcp/deployment.ts：デプロイ用ユーティリティ
• /app/utils/mcp/chat-integration.ts：チャット連携用ユーティリティ
• /app/api/mcp/create/route.ts：MCP サーバーを作成する API エンドポイント
• /app/components/mcp/server-creation.tsx：MCP サーバー作成コンポーネント
• /app/components/mcp/server-list.tsx：MCP サーバー一覧コンポーネント

今後の機能強化

• OpenRouter AI モデルを使ったツール抽出機能の強化
• サーバーレス関数への実際のデプロイ
• ツールのテストインターフェース
• デプロイ済みサーバーの分析
• MCP サーバーのバージョン管理

ライセンス

このプロジェクトは MIT ライセンスの下でライセンスされています。詳細は LICENSE ファイルをご覧ください。

謝辞

• NextChat をベースにしています
• mcpify.ai に着想を得ています
• LLM モデルに OpenRouter を使用しています
• Model Context Protocol を実装しています