NextChat with MCP Server Builder

This is a customized version of NextChat that adds the ability to create and deploy MCP (Model Context Protocol) servers through chat interactions, using OpenRouter for LLM models.

Features

• Chat-based MCP Server Creation: Create MCP servers by simply chatting with the AI
• Tool Extraction: Automatically extract tools from your description
• One-click Deployment: Deploy your MCP server with a single click
• Integration Guides: Get integration instructions for various AI systems
• OpenRouter Integration: Use a wide range of LLM models through OpenRouter

Getting Started

Prerequisites

• Node.js 18.0.0 or later
• npm or yarn
• An 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 since we'll be 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.

Creating an MCP Server

1. Start a new chat

2. Type "Create an MCP server" or 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'll receive integration instructions for using your MCP server with various AI systems

Implementation 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 user descriptions using pattern matching. The system looks for keywords that indicate specific tool types, such as:

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

Deployment

The current implementation simulates deployment with mock URLs. In a production environment, this would be connected to a real deployment service.

Integration

The system generates integration guides for various AI systems:

• Cursor
• Claude Desktop
• Windsurf
• Direct API access

Project Structure

• `/app/utils/mcp/types.ts`: TypeScript interfaces for MCP servers and tools
• `/app/utils/mcp/storage.ts`: Storage utilities for managing MCP servers
• `/app/utils/mcp/extraction.ts`: Tool extraction functionality
• `/app/utils/mcp/deployment.ts`: Deployment utilities
• `/app/utils/mcp/chat-integration.ts`: Chat integration utilities
• `/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

Future Enhancements

• Enhanced tool extraction using OpenRouter AI models
• Real deployment to serverless functions
• Tool testing interface
• Analytics for deployed servers
• Version control for MCP servers

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

• Based on NextChat
• Inspired by mcpify.ai
• Uses OpenRouter for LLM models
• Implements the Model Context Protocol