Chat Nextjs Mcp Client

💬 MCP 聊天机器人 – Composio + 本地 MCP 服务

使用 Composio 构建 🚀

👀 查看我关于此项目的博客文章！

我写了一篇关于此项目的博客文章，点击此处查看。

简介

厌倦了构建风格千篇一律的 AI 聊天机器人应用？这款不一样。

这是一个功能完备的聊天界面，使用 Next.js 构建，由 Model Context Protocol（MCP） 提供支持，可连接远程和本地 MCP 服务， 并支持类似 Cursor 和 Windsurf 的工具调用。

说明

这只是一个简单的演示应用，旨在展示如何在 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 问题
• 🗓️ 安排会议
• 💬 在 Slack 中发布消息

了解更多：modelcontextprotocol.io

🛡️ 许可证

此项目采用 MIT 许可证。详情请参阅 LICENSE 文件。