Nextchat MCP

🚀 NextChat with MCP Server Builder

This is a customized version of NextChat that adds the functionality to create and deploy MCP (Model Context Protocol) servers using large language models from OpenRouter through chat interactions.

✨ Features

• Chat-based MCP Server Creation: Create MCP servers through simple chat.
• Tool Extraction: Automatically extract tools from your descriptions.
• One-click Deployment: Deploy your MCP servers with a single click.
• Integration Guide: Get a complete set of integration instructions for various AI systems.
• OpenRouter Integration: Utilize a wide range of large language models via OpenRouter.

🚀 Quick Start

Prerequisites

• Node.js version 18.0.0 or higher.
• npm or yarn.
• OpenRouter API key.

📦 Installation

1. Clone the repository:

git clone https://github.com/vredrick2/NextChat.git
cd NextChat

2. Install dependencies:

npm install
# or
yarn

3. Create a .env.local file with the following content:

# Enable MCP functionality
ENABLE_MCP=true

# OpenRouter API key
OPENAI_API_KEY=Your OpenRouter API key

# Set OpenRouter as the base URL
BASE_URL=https://openrouter.ai/api/v1

# Default model (can be changed to any OpenRouter model)
DEFAULT_MODEL=openrouter/anthropic/claude-3-opus

# Hide user API key input as we are using OpenRouter
HIDE_USER_API_KEY=1

# Enable custom models
CUSTOM_MODELS=+openrouter/anthropic/claude-3-opus,+openrouter/anthropic/claude-3-sonnet,+openrouter/google/gemini-pro

4. Start the development server:

npm run dev
# or
yarn dev

5. Open http://localhost:3000 in your browser.

💻 Usage Examples

Creating an MCP Server

1. Start a new chat.
2. Enter "Create an MCP server" or a similar phrase.
3. Follow the prompts to name your server and describe its functionality.
4. The system will extract tools from your description and deploy the server.
5. You will receive instructions for integrating with various AI systems.

🔧 Technical Details

MCP Server Creation Interface

The MCP server creation interface is implemented as a React component that guides users through the process of creating and deploying an MCP server. The interface includes:

• Name input
• Description input
• Tool extraction
• Deployment
• Integration guide generation

Tool Extraction

Tools are extracted from the user's description through pattern matching. The system looks for keywords indicating specific tool types, such as:

• Calculator tools
• Conversion tools
• Weather tools
• Search tools
• Translation tools

Deployment

The current implementation uses simulated deployment and mock URLs. In a production environment, this will connect to an actual deployment service.

Integration

The system generates integration guides for various AI systems:

• Cursor
• Claude Desktop
• Windsurf
• Direct API access

📚 Documentation

Project Structure

• /app/utils/mcp/types.ts: TypeScript interfaces for MCP servers and tools.
• /app/utils/mcp/storage.ts: Utility for managing MCP server storage.
• /app/utils/mcp/extraction.ts: Tool extraction functionality.
• /app/utils/mcp/deployment.ts: Deployment utility.
• /app/utils/mcp/chat-integration.ts: Chat integration utility.
• /app/api/mcp/create/route.ts: API endpoint for creating MCP servers.
• /app/components/mcp/server-creation.tsx: MCP server creation component.
• /app/components/mcp/server-list.tsx: MCP server list component.

📄 License

No license information provided in the original document, so this section is skipped.

⚠️ Important Note

• Ensure that all dependencies are installed and environment variables are correctly configured.
• Test all functions to ensure proper operation before deploying to a production environment.
• Adhere to OpenRouter's terms and conditions.

Hope this guide helps you! If you have any questions, feel free to check the documentation or contact the support team.