I have a blog post about this project here.

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.

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

• 🧠 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+)

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

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

npm install

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.

sudo npm install -g composio-core
composio login

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

Confirm integrations:

composio integrations

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

npm run dev

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

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

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

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

Read more: modelcontextprotocol.io

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