Happy slice of mcp pizzaMCP.pizza

chat-nextjs-mcp-client

MCP.Pizza Chef: shricodev

chat-nextjs-mcp-client is a Next.js-based chat interface client for the Model Context Protocol (MCP). It connects seamlessly to both remote hosted MCP servers and locally hosted MCP servers, enabling real-time AI-powered chat experiences. The client supports tool calling integrations such as Cursor and Windsurf, allowing enhanced interactive workflows. Designed as a demo to showcase MCP connectivity in Next.js, it provides a flexible foundation for building AI chat applications with multi-server support and tool integration.

Use This MCP client To

Connect to remote MCP servers for AI chat interactions Interface with local MCP servers for private data access Invoke external tools like Gmail and Slack via MCP tool calling Build custom AI chatbots with Next.js and MCP integration Demonstrate multi-server MCP client capabilities in web apps

README

💬 MCP Chatbot – Composio + Local MCP servers

👀 Check Out My Blog Post on this Project!

I have a blog post about this project here.

Brief

Tired of building the same styled AI chatbot apps? This one's different.

It is a fully working chat interface built using Next.js, powered by Model Context Protocol (MCP), capable of connecting to both remote and local MCP servers, with tool-calling support like Cursor and Windsurf.

Note

This is just a simple demo application designed to show you how you can connect to MCP servers in Next.js (Not a production ready application)

Link to the demo: Composio hosted MCP servers, Local filesystem MCP server

🚀 Features

  • 🧠 Chat interface powered by AI models
  • 🔗 Support for both local and hosted MCP servers
  • 🛠️ Tool calling (Gmail, Linear, Slack, etc.)
  • 💅 Styled with Tailwind CSS + Shadcn UI
  • ⚡ Built with App Router (Next.js 14+)

📦 Tech Stack

  • Next.js (App Router, TypeScript)
  • Tailwind CSS
  • shadcn/ui
  • Model Context Protocol (MCP) SDK
  • Composio API (for hosted MCP server + integrations)

🛠️ Getting Started

1. Clone the repo

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

2. Install dependencies

npm install

3. Configure .env

Create a .env file in the root and add your Composio API key:

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

💡 You can skip this if you're only using local MCP servers.

4. Set up Composio CLI (for remote MCP)

sudo npm install -g composio-core
composio login

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

Confirm integrations:

composio integrations

5. Set up local file system MCP server

You are not limited to working with remotely hosted MCP servers from Composio. You can run this application entirely with locally hosted MCP servers.

Note

You can find the steps on how to set local MCP servers on the blog here: Link

🧪 Run the Dev Server

npm run dev

Visit http://localhost:3000 to start chatting!

📁 Folder Structure

.
├── 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)

🧠 What is MCP?

Model Context Protocol (MCP) is a protocol for connecting AI models to tools and real-time data sources.

Example Use Cases

  • 📧 Send emails
  • 🗂️ Create GitHub issues
  • 🗓️ Schedule meetings
  • 💬 Post to Slack

Read more: modelcontextprotocol.io

🛡️ License

This project is licensed under the MIT License. See the LICENSE file for more details.

chat-nextjs-mcp-client FAQ

How do I connect chat-nextjs-mcp-client to a remote MCP server?
Configure the client with the remote server URL and authentication details to establish connection.
Can chat-nextjs-mcp-client work with local MCP servers?
Yes, it supports connecting to locally hosted MCP servers for private or development use.
What tool integrations does chat-nextjs-mcp-client support?
It supports tool calling for tools like Gmail, Linear, Slack, Cursor, and Windsurf.
Is chat-nextjs-mcp-client production ready?
No, it is a demo application intended to showcase MCP client capabilities in Next.js.
Which AI models can be used with chat-nextjs-mcp-client?
It can work with any MCP-compatible AI models, including OpenAI, Anthropic Claude, and Google Gemini.
How can I customize the chat interface?
Since it is built with Next.js, you can modify the React components and styles to fit your needs.
Does chat-nextjs-mcp-client support multi-tool calling in a single session?
Yes, it supports invoking multiple tools through MCP's tool calling features.
Where can I find more information or tutorials?
Check the developer's blog post linked in the GitHub readme for detailed guidance.