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.

Unmaintained · No commits in 13 months.

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

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.