Chat Nextjs Mcp Client

💬 MCP チャットボット – Composio + ローカル MCP サーバー

Composio で構築 🚀

👀 このプロジェクトについてのブログ記事をご覧ください！

このプロジェクトについてのブログ記事はこちらです。

概要

同じようなスタイルの AI チャットボットアプリを作るのに飽きていませんか？これはひと味違います。

Next.js で構築された、すぐに使えるチャットインターフェースです。 Model Context Protocol（MCP） を利用し、Cursor や Windsurf のようなツール呼び出しに対応しており、リモートと ローカルの MCP サーバーの両方に接続できます。

メモ

これは、Next.js で MCP サーバーに接続する方法を紹介するために 作られたシンプルなデモアプリケーションです（本番環境向けの アプリケーションではありません）。

デモはこちら：Composio がホストする MCP サーバー、ローカルファイルシステム MCP サーバー

🚀 特徴

• 🧠 AI モデルを利用したチャットインターフェース
• 🔗 ローカルおよびホスト型の MCP サーバーに対応
• 🛠️ ツール呼び出し（Gmail、Linear、Slack など）
• 💅 Tailwind CSS + Shadcn UI でスタイリング
• ⚡ App Router（Next.js 14+）で構築

📦 技術スタック

• Next.js（App Router、TypeScript）
• Tailwind CSS
• shadcn/ui
• Model Context Protocol（MCP）SDK
• Composio API（ホスト型 MCP サーバーとインテグレーション用）

🛠️ はじめに

1. リポジトリをクローンする

git clone https://github.com/your-username/chat-nextjs-mcp-client.git
cd chat-nextjs-mcp-client

2. 依存関係をインストールする

npm install

3. .env を設定する

ルートディレクトリに .env ファイルを作成し、Composio API キーを追加します。

COMPOSIO_API_KEY=<your_composio_api_key>
OPENAI_API_KEY=sk-<your_openai_api_key>

💡 ローカル MCP サーバーのみを使用する場合は、この手順を省略できます。

4. Composio CLI をセットアップする（リモート MCP 用）

sudo npm install -g composio-core
composio login

# Or, any other integrations you prefer.
composio add gmail
composio add linear

インテグレーションを確認します。

composio integrations

5. ローカルファイルシステム MCP サーバーをセットアップする

Composio がホストするリモート MCP サーバーだけに限定されるわけではありません。 このアプリケーションは、ローカルでホストされる MCP サーバーだけを使って実行できます。

メモ

ローカル MCP サーバーの設定手順は、こちらのブログ記事をご覧ください：リンク

🧪 開発サーバーを実行する

npm run dev

http://localhost:3000 にアクセスして、チャットを始めましょう！

📁 フォルダー構成

.
├── app
│   ├── api
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   ├── autoresize-textarea.tsx
│   └── chat.tsx
├── lib
│   ├── mcp-client
│   └── utils.ts
├── public
├── .env.example
├── ... (other config files)

🧠 MCP とは？

Model Context Protocol（MCP） は、AI モデルをツールやリアルタイムのデータソースに接続するためのプロトコルです。

使用例

• 📧 メールを送信する
• 🗂️ GitHub の Issue を作成する
• 🗓️ 会議をスケジュールする
• 💬 Slack に投稿する

詳細はこちら：modelcontextprotocol.io

🛡️ ライセンス

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