Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/cgoinglove/mcp-client-chatbot

πŸš€ Multi-provider AI chatbot client powered by MCP
https://github.com/cgoinglove/mcp-client-chatbot

ai chatbot mcp mcp-client mcp-server nextjs ollama vercel

Last synced: about 1 year ago
JSON representation

πŸš€ Multi-provider AI chatbot client powered by MCP

Awesome Lists containing this project

README 

          
# MCP Client Chatbot: Local-First AI Assistant App



**English** | [ν•œκ΅­μ–΄](./docs/ko.md)



[![Local First](https://img.shields.io/badge/Local-First-blueviolet)](#)

[![MCP Supported](https://img.shields.io/badge/MCP-Supported-00c853)](https://modelcontextprotocol.io/introduction)



**MCP Client Chatbot** is a versatile chat interface that supports various AI model providers like [OpenAI](https://openai.com/), [Anthropic](https://www.anthropic.com/), [Google](https://ai.google.dev/), and [Ollama](https://ollama.com/). **It is designed for instant execution in 100% local environments without complex configuration**, enabling users to fully control computing resources on their personal computer or server.



> Built with [Vercel AI SDK](https://sdk.vercel.ai) and [Next.js](https://nextjs.org/), this app adopts modern patterns for building AI chat interfaces. Leverage the power of [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) to seamlessly integrate external tools into your chat experience.



> **Our goal:** Build an AI chatbot app that is optimized for personal use and easy for anyone to run.



## Table of Contents



- [MCP Client Chatbot: Local-First AI Assistant App](#mcp-client-chatbot-local-first-ai-assistant-app)

  - [Table of Contents](#table-of-contents)

  - [Demo](#demo)

  - [✨ Key Features](#-key-features)

  - [πŸš€ Getting Started](#-getting-started)

    - [Environment Variables](#environment-variables)

    - [MCP Server Setup](#mcp-server-setup)

  - [πŸ’‘ Use Cases](#-use-cases)

  - [πŸ—ΊοΈ Roadmap: Upcoming Features](#️-roadmap-upcoming-features)

  - [πŸ™Œ Contributing](#-contributing)



-----



## Demo



![playwright-demo](./docs/images/preview.gif)



**Tool Integration Example:** Demonstrates browser control using Microsoft's [playwright-mcp](https://github.com/microsoft/playwright-mcp).



*Prompt Example:* "Go to Reddit, open r/mcp, check the latest post and tell me what it's about β€” then close Reddit."



>This project comes pre-configured with microsoft/playwright-mcp as a default MCP server.

>Try running the prompt above to see it in action!



---



![mention](./docs/images/preview-2.gif)



**Quick Tool Access:** Use the `@` symbol in the message input to quickly select and call available MCP tools.



---



![tool-test](./docs/images/tool-test.gif)



**Standalone Tool Testing:** Test MCP tools independently of the chat flow for easier development and debugging.



---



![prompt-input](./docs/images/provider.gif)



**Model & Tool Selection UI:** Easily switch LLM providers and view tool status directly within the prompt input panel.



-----



## ✨ Key Features



* **πŸ’» 100% Local Execution:** Run directly on your PC or server without complex deployment, fully utilizing and controlling your computing resources.

* **πŸ€– Multiple AI Model Support:** Flexibly switch between providers like OpenAI, Anthropic, Google AI, and Ollama.

* **πŸ› οΈ Powerful MCP Integration:** Seamlessly connect external tools (browser automation, database operations, etc.) into chat via Model Context Protocol.

* **πŸš€ Standalone Tool Tester:** Test and debug MCP tools separately from the main chat interface.

* **πŸ’¬ Intuitive Mentions:** Trigger available tools with `@` in the input field.

* **βš™οΈ Easy Server Setup:** Configure MCP connections via UI or `.mcp-config.json` file.

* **πŸ“„ Markdown UI:** Communicate in a clean, readable markdown-based interface.

* **πŸ’Ύ Zero-Setup Local DB:** Uses SQLite by default for local storage (PostgreSQL also supported).

* **🧩 Custom MCP Server Support:** Modify the built-in MCP server logic or create your own.



## πŸš€ Getting Started



This project uses [pnpm](https://pnpm.io/) as the recommended package manager.



```bash

# 1. Install dependencies

pnpm i



# 2. Initialize project (creates .env, sets up DB)

pnpm initial



# 3. Start dev server

pnpm dev

```



Visit [http://localhost:3000](http://localhost:3000) after starting the server.



-----



### Environment Variables



The `pnpm initial` command generates a `.env` file. Add your API keys there:



```dotenv

GOOGLE_GENERATIVE_AI_API_KEY=****

OPENAI_API_KEY=****

# ANTHROPIC_API_KEY=****

```



SQLite is the default DB (`db.sqlite`). To use PostgreSQL, set `USE_FILE_SYSTEM_DB=false` and define `DATABASE_URL` in `.env`.



-----



### MCP Server Setup



You can connect MCP tools via:



1. **UI Setup:** Go to http://localhost:3000/mcp and configure through the interface.

2. **Direct File Edit:** Modify `.mcp-config.json` in project root.

3. **Custom Logic:** Edit `./custom-mcp-server/index.ts` to implement your own logic.



![mcp-config](./docs/images/mcp-config.gif)



-----



## πŸ’‘ Use Cases



* [Supabase Integration](./docs/use-cases/supabase.md): Use MCP to manage Supabase DB, auth, and real-time features.



-----



## πŸ—ΊοΈ Roadmap: Upcoming Features



We're making MCP Client Chatbot even more powerful with these planned features:



* **🎨 Canvas Mode:** Real-time editing interface for LLM + user collaboration (e.g. code, blogs).

* **🧩 LLM UI Generation:** Let LLMs render charts, tables, forms dynamically.

* **πŸ“œ Rule Engine:** Persistent system prompt/rules across the session.

* **πŸ–ΌοΈ Image & File Uploads:** Multimodal interaction via uploads and image generation.

* **πŸ™ GitHub Mounting:** Mount local GitHub repos to ask questions and work on code.

* **πŸ“š RAG Agent:** Retrieval-Augmented Generation using your own documents.

* **🧠 Planning Agent:** Smarter agent that plans and executes complex tasks.

* **πŸ§‘β€πŸ’» Agent Builder:** Tool to create custom AI agents for specific goals.



πŸ‘‰ See full roadmap in [ROADMAP.md](./docs/ROADMAP.md)



-----



## πŸ™Œ Contributing



We welcome all contributions! Bug reports, feature ideas, code improvements β€” everything helps us build the best local AI assistant.



Let’s build it together πŸš€