# Chat Nextjs Mcp Client

> ⚡ Chat MCP Client for Remote hosted MCP Servers (with Composio) and locally hosted MCP servers. 📡

- **Type:** MCP server
- **Install:** `agentstack add mcp-shricodev-chat-nextjs-mcp-client`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [shricodev](https://agentstack.voostack.com/s/shricodev)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [shricodev](https://github.com/shricodev)
- **Source:** https://github.com/shricodev/chat-nextjs-mcp-client

## Install

```sh
agentstack add mcp-shricodev-chat-nextjs-mcp-client
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 💬 MCP Chatbot – Composio + Local MCP servers

> Built with [Composio](https://composio.dev) 🚀

## 👀 Check Out My Blog Post on this Project!

> I have a blog post about this project [here](https://dev.to/composiodev/build-your-own-chat-mcp-client-with-nextjs-4a0k).

## 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](https://youtu.be/dvGf4mpnmH4), [Local filesystem MCP server](https://youtu.be/GBH_WfYu2_4)

## 🚀 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

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

### 2. Install dependencies

```bash
npm install
```

### 3. Configure `.env`

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

```env
COMPOSIO_API_KEY=
OPENAI_API_KEY=sk-
```

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

### 4. Set up Composio CLI (for remote MCP)

```bash
sudo npm install -g composio-core
composio login

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

Confirm integrations:

```bash
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](https://dev.to/composiodev/build-your-own-chat-mcp-client-with-nextjs-4a0k)

## 🧪 Run the Dev Server

```bash
npm run dev
```

Visit [http://localhost:3000](http://localhost:3000) to start chatting!

## 📁 Folder Structure

```text
.
├── 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](https://modelcontextprotocol.io/introduction)

## 🛡️ License

This project is licensed under the MIT License. See the [LICENSE](LICENSE)
file for more details.

## Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [shricodev](https://github.com/shricodev)
- **Source:** [shricodev/chat-nextjs-mcp-client](https://github.com/shricodev/chat-nextjs-mcp-client)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-shricodev-chat-nextjs-mcp-client
- Seller: https://agentstack.voostack.com/s/shricodev
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.