Content
# MCP Client Chatbot
**English** | [한국어](./docs/ko.md)
MCP Client Chatbot is a chat interface that allows you to easily utilize various AI providers ([OpenAI](https://openai.com/), [Anthropic](https://www.anthropic.com/), [Google](https://ai.google.dev/), [Ollama](https://ollama.com/), etc.) while connecting powerful AI tools through [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction).
> This project was developed using Vercel's open source libraries such as [Next.js](https://nextjs.org/) and [AI SDK](https://sdk.vercel.ai/)[shadcn/ui](https://ui.shadcn.com/), and is designed to run immediately in local environments or personal servers without complex setup. You can easily add and experiment with AI tools through file-based MCP management.
*Demo showcasing the MCP Client Chatbot with [Microsoft's playwright-mcp](https://github.com/microsoft/playwright-mcp) integration*
**with the prompt:**
`"Go to Reddit, open r/mcp, take a look at the newest post and tell me what it's about — then close Reddit when you're done."`
## Installation
This project uses [pnpm](https://pnpm.io/) as the recommended package manager.
### Quick Start
```bash
# Install dependencies
pnpm i
# Initialize the project (creates .env file from .env.example and sets up the database)
pnpm initial
# Start the development server
pnpm dev
```
After running these commands, you can access the application at http://localhost:3000.
### Environment Setup
After running `pnpm initial`, make sure to edit your `.env` file to add the necessary API keys for the providers you want to use:
```
GOOGLE_GENERATIVE_AI_API_KEY=****
OPENAI_API_KEY=****
```
By default, the application uses SQLite for data storage. If you prefer to use PostgreSQL, you can modify the `USE_FILE_SYSTEM_DB` value in your `.env` file and set up your database connection string.
### Setting Up MCP Servers
You can add MCP servers in two ways:
1. Using the UI: Navigate to http://localhost:3000/mcp in your browser and use the interface to add and configure MCP servers.
2. Editing the config file: Directly modify the `mcp.config.json` file in the project root directory.
3. Custom server logic: A customizable MCP server is already included in the project at `./custom-mcp-server/index.ts`.
You can modify this file to implement your own server logic or connect external tools as needed.
### Let's gooo 🚀
---
## Contributing
👉 Check out our [Roadmap](./docs/ROADMAP.md) to see what’s coming up!
> Contributions to MCP Client Chatbot are welcome and appreciated! Whether it's bug reports, feature suggestions, or code contributions, your help makes this project better.
