DevoChat

English | 한국어

Unified AI Chat Platform

DevoChat is a web application that allows you to use various multimodal AI models and MCP (Model Context Protocol) servers through a single interface. Check out the live demo.

Screenshots

Key Features

• Unified Conversation System

  • Uses MongoDB-based unified schema to freely switch between AI models during conversations without losing context.
  • Provides client layers that normalize data to meet the API requirements of each AI provider.
  • Offers an integrated management environment for various media files including images, PDFs, and documents.

• Advanced Conversation Feature

  • Provides parameter controls including temperature, reasoning intensity, response length, and system prompt modification.
  • Supports markdown, LaTeX formula, and code block rendering.
  • Enables streaming responses and simulates streaming for non-streaming models by sending complete responses in chunks.
  • Supports image generation via Text-to-Image and Image-to-Image models.
  • Supports real-time/low-latency STS (Speech-To-Speech) conversations through RealTime API.

• Model Switching Architecture

  • Allows immediate addition of various AI models to the system through JSON modification without code changes.
  • Supports toggling of additional features like reasoning, web search, and research for hybrid models.
  • Enables linking separate provider models (e.g., Qwen3-235B-A22B-Instruct-2507, Qwen3-235B-A22B-Thinking-2507) with a "switch" variant to function as a single hybrid model.

• Web-based MCP Client

  • Connects directly to all types of MCP servers (SSE, Local) from web browsers.
  • Provides simple access to local MCP servers from anywhere on the web using the secure-mcp-proxy package.
  • Supports visual monitoring of real-time tool calls and execution processes.

Project Structure

devochat/
├── frontend/                           # React frontend
│   ├── public/                         # Static public assets
│   ├── src/
│   │   ├── components/                 # UI components
│   │   ├── contexts/                   # State management
│   │   ├── pages/                      # Page components
│   │   ├── resources/                  # Static resources
│   │   ├── styles/                     # CSS stylesheets
│   │   ├── utils/                      # Utility functions
│   │   └── App.js                      # Main app component
│   ├── build/                          # Production build output
│   ├── releases/                       # Archived frontend builds
│   ├── package.json
│   └── package-lock.json
│
├── backend/                            # FastAPI backend
│   ├── config/                         # Configuration files
│   │   ├── chat_models.json            # Text AI model settings
│   │   ├── image_models.json           # Image generation AI model settings
│   │   ├── mcp_servers_example.json    # MCP server config template
│   │   ├── mcp_servers.json            # MCP server settings
│   │   └── realtime_models.json        # Real-time conversation model settings
│   ├── generated/                      # Generated image outputs
│   ├── icons/                          # MCP server icons
│   ├── prompts/                        # System prompts
│   ├── routes/                         # API routers
│   │   ├── chat_clients/               # Text AI model clients
│   │   ├── image_clients/              # Image generation AI model clients
│   │   ├── auth.py                     # Authentication/authorization management
│   │   ├── common.py                   # Common utilities
│   │   ├── conversations.py            # Conversation management API
│   │   ├── realtime.py                 # Real-time communication
│   │   └── uploads.py                  # File upload handling
│   ├── shared_pages/                   # Generated shared conversation pages
│   ├── uploads/                        # Uploaded files and images
│   ├── logging_util.py                 # Logging utility
│   ├── main.py                         # FastAPI application entry point
│   └── requirements.txt                # Python dependencies
├── mcp-proxy/                          # Local MCP proxy package and servers
│   ├── servers/                        # Local MCP server definitions
│   ├── src/                            # Proxy source package
│   ├── servers.json
│   └── pyproject.toml
└── samples/                            # README screenshots

Tech Stack

Installation and Setup

Frontend

Environment Variables

WDS_SOCKET_PORT=0
REACT_APP_FASTAPI_URL=http://localhost:8000

Package Installation and Start

$ cd frontend
$ npm install
$ npm start

Build and Deploy

$ cd frontend
$ npm run build
$ npx serve -s build

Backend

Python Virtual Environment Setup

$ cd backend
$ python -m venv .venv
$ source .venv/bin/activate  # Windows: .venv\Scripts\activate
$ pip install -r requirements.txt

Environment Variables

MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/chat_db
PRODUCTION_URL=https://your-production-domain.com
DEVELOPMENT_URL=http://localhost:3000
AUTH_KEY=your_auth_secret_key

# API Key Configuration
OPENAI_API_KEY=...
ANTHROPIC_API_KEY=...
GEMINI_API_KEY=...
PERPLEXITY_API_KEY=...
HUGGINGFACE_API_KEY=...
XAI_API_KEY=...
MISTRAL_API_KEY=...
OPENROUTER_API_KEY=...
FIREWORKS_API_KEY=...
FRIENDLI_API_KEY=...
FLUX_API_KEY=...
BYTEPLUS_API_KEY=...
ALIBABA_API_KEY=...

Run FastAPI Server

$ uvicorn main:app --host=0.0.0.0 --port=8000 --reload

Usage

chat_models.json Configuration

Define the AI models available in the application and their properties through the chat_models.json file.

{
  "default": "google/gemini-3-flash-preview",
  "alias": "google/gemini-3.1-flash-lite-preview",
  "models": [
    {
      "model_name": "google/gemini-3-flash-preview",
      "model_alias": "Gemini 3 Flash",
      "description": "Default Gemini model",
      "endpoint": "/chat/openrouter",
      "billing": {
        "in_billing": "0.5",
        "out_billing": "3"
      },
      "capabilities": {
        "stream": true,
        "vision": true,
        "reasoning": "toggle",
        "web_search": "toggle",
        "research": false,
        "mcp": true
      },
      "controls": {
        "instructions": true,
        "temperature": false,
        "reason": {
          "levels": ["low", "medium", "high", "xhigh"],
          "default": "high"
        },
        "verbosity": false
      },
      "admin": false
    },
    {
      "model_name": "gpt-5.5",
      "model_alias": "GPT 5.5",
      "description": "High-performance GPT model",
      "endpoint": "/chat/gpt",
      "billing": {
        "in_billing": "5",
        "out_billing": "30"
      },
      "capabilities": {
        "stream": true,
        "vision": true,
        "reasoning": "toggle",
        "web_search": "toggle",
        "research": false,
        "mcp": true
      },
      "controls": {
        "instructions": true,
        "temperature": false,
        "reason": {
          "levels": ["low", "medium", "high", "xhigh"],
          "default": "medium"
        },
        "verbosity": {
          "levels": ["low", "medium", "high"],
          "default": "medium"
        }
      },
      "admin": true
    },
    {
      "model_name": "grok-4.20-0309-non-reasoning",
      "model_alias": "Grok 4.2",
      "description": "Default Grok model",
      "endpoint": "/chat/grok",
      "billing": {
        "in_billing": "2",
        "out_billing": "6"
      },
      "variants": {
        "reasoning": "grok-4.20-0309-reasoning"
      },
      "capabilities": {
        "stream": true,
        "vision": true,
        "reasoning": "switch",
        "web_search": "toggle",
        "research": false,
        "mcp": true
      },
      "controls": {
        "instructions": true,
        "temperature": true,
        "reason": false,
        "verbosity": false
      },
      "admin": false
    }
  ]
}

Parameter Description

Value Description

true

The feature is always enabled.

false

The feature is not supported.

toggle

Users can turn the feature on or off without changing the selected model.

switch

When a user toggles the feature, the selected model changes to another model defined in the variants object.

image_models.json Configuration

Define the image generation AI models available in the application and their properties through the image_models.json file:

{
  "default": "gemini-2.5-flash-image",
  "alias": "google/gemini-3.1-flash-lite-preview",
  "models": [
    {
      "model_name": "gemini-2.5-flash-image",
      "model_alias": "Nano Banana",
      "description": "Google",
      "endpoint": "/image/google/gemini",
      "billing": {
        "in_billing": "0",
        "out_billing": "0.039"
      },
      "capabilities": { "vision": true, "max_input": 10 },
      "admin": false
    },
    {
      "model_name": "bytedance/seedream-v4.5",
      "model_alias": "Seedream 4.5",
      "description": "BytePlus",
      "endpoint": "/image/wavespeed",
      "billing": {
        "in_billing": "0",
        "out_billing": "0.04"
      },
      "variants": {
        "vision": "bytedance/seedream-v4.5/edit"
      },
      "capabilities": { "vision": "switch" },
      "admin": false
    },
    {
      "model_name": "bytedance/seedream-v4.5/edit",
      "model_alias": "Seedream 4.5",
      "description": "BytePlus",
      "endpoint": "/image/wavespeed",
      "billing": {
        "in_billing": "0",
        "out_billing": "0.04"
      },
      "variants": {
        "base": "bytedance/seedream-v4.5"
      },
      "capabilities": { "vision": "switch", "max_input": 10 },
      "admin": false
    }
  ]
}

Image Model Parameter Description

Model Switching System (Variants)

You can define various variants of models through the variants object.

Example

[
  {
    "model_name": "grok-4.20-0309-non-reasoning",
    "variants": {
      "reasoning": "grok-4.20-0309-reasoning"
    },
    "capabilities": {
      "reasoning": "switch"
    }
  },
  {
    "model_name": "grok-4.20-0309-reasoning",
    "variants": {
      "base": "grok-4.20-0309-non-reasoning"
    },
    "capabilities": {
      "reasoning": "switch"
    }
  }
]

realtime_models.json Configuration

Define the real-time voice models available in the application through the realtime_models.json file.

{
  "default": "gpt-realtime-1.5:coral",
  "models": [
    {
      "model_name": "gpt-realtime-1.5:marin",
      "model_alias": "Marin",
      "model_gender": "female",
      "description": "A warm motivator"
    },
    {
      "model_name": "gpt-realtime-1.5:ash",
      "model_alias": "Ash",
      "model_gender": "male",
      "description": "A steady supporter who believes in you"
    }
  ]
}

Realtime Model Parameter Description

MCP Server Configuration

DevoChat is a web-based MCP (Model Context Protocol) client. You can define external servers to connect to in the mcp_servers.json file.

mcp_servers.json

{
  "server-id": {
    "url": "https://example.com/mcp/endpoint",
    "authorization_token": "your_authorization_token", 
    "name": "Server_Display_Name",
    "admin": false
  }
}

Recommended MCP Servers

• github
• spotify
• arxiv
• perplexity
• apple-mcp
• desktop-commander
• ...

Local MCP Server Integration

To connect local MCP servers, use secure-mcp-proxy:

git clone https://github.com/gws8820/secure-mcp-proxy
cd secure-mcp-proxy
uv run python -m secure_mcp_proxy --named-server-config servers.json --port 3000

Contributing

1. Fork this repository
2. Create a new branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Create a Pull Request

License

This project is distributed under the MIT License.