About Chat Nextjs MCP Client
Chat Nextjs MCP Client is an MCP server published by shricodev in the AI category: β‘ Chat MCP Client for Remote hosted MCP Servers (with Composio) and locally hosted MCP servers. π‘.
The repository has 37 stars and 10 forks, with the last commit a year ago. Six months or more without a commit doesn't mean the server is broken, but check the open issues before depending on it in production.
Install
git clone https://github.com/shricodev/chat-nextjs-mcp-clientThis server has no ConduID identity, so agent calls to it are not receipted. Pin the version you install and review the source before granting it credentials.
Ask AI
Ask AI about Chat Nextjs MCP Client
Powered by Claude · Grounded in docs
Security checks
Static checks derived from the repository yesterday. Heuristics on the source, not an audit.
- βREADME presentThe repository ships documentation.
- βLicense declaredUsable under a stated license.
- !Tests presentNo tests found. Behaviour changes may go unnoticed between versions.
- βDependencies pinnedA lockfile pins dependency versions.
- βNo dynamic code executionSource scan found no eval, dynamic Function, or shell execution.
- !Scoped permissionsDoesn't declare a permission scope. Assume it can do anything its process can.
README
π¬ MCP Chatbot β Composio + Local MCP servers
Built with Composio π
π 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.
README fetched from the repository yesterday. The original is authoritative.