DevoChat

DevoChat

English | [한국어](README.ko.md)

Unified AI Chat Platform

DevoChat is a web application that allows you to use various multimodal AI models and tools through a single interface. Check out the live demo.

Screenshots

Main Page

Model Selection

File Upload

Image Upload

Tool Selection

Tool Usage

Code Highlighting

Formula Rendering

URL Processing

Real-time Conversation

Image Generation

Image Editing

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 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 text-to-image and image-editing models (e.g., bytedance/seedream-v5.0-lite, bytedance/seedream-v5.0-lite/edit) with a "switch" variant to function as a single 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.json            # MCP server settings
│   │   └── realtime_models.json        # Real-time conversation model settings
│   ├── generated/                      # Generated outputs
│   ├── 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
│   ├── 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
│   ├── src/                            # Proxy source package
│   ├── servers.json                    # Local MCP server definitions
│   └── 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=...
OPENROUTER_API_KEY=...
XAI_API_KEY=...
GROK_API_KEY=...
FLUX_API_KEY=...
WAVESPEED_API_KEY=...
GOOGLE_STT_API_KEY=...
REALTIME_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.5-flash",
  "alias": "google/gemini-3.1-flash-lite",
  "models": [
    {
      "model_name": "google/gemini-3.5-flash",
      "model_alias": "Gemini 3.5 Flash",
      "description": "Default Gemini model",
      "endpoint": "/chat/openrouter",
      "billing": {
        "in_billing": "1.5",
        "out_billing": "9"
      },
      "capabilities": {
        "stream": true,
        "vision": true,
        "reasoning": true,
        "web_search": "toggle",
        "research": false,
        "mcp": true
      },
      "controls": {
        "instructions": true,
        "reason": {
          "levels": ["low", "medium", "high", "xhigh"],
          "default": "medium"
        },
        "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,
        "reason": {
          "levels": ["low", "medium", "high", "xhigh"],
          "default": "medium"
        },
        "verbosity": {
          "levels": ["low", "medium", "high"],
          "default": "medium"
        }
      },
      "admin": true
    },
    {
      "model_name": "mistralai/mistral-large-2512",
      "model_alias": "Mistral Large 3",
      "description": "Default Mistral model",
      "endpoint": "/chat/openrouter",
      "billing": {
        "in_billing": "0.5",
        "out_billing": "1.5"
      },
      "capabilities": {
        "stream": true,
        "vision": true,
        "reasoning": false,
        "web_search": "toggle",
        "research": false,
        "mcp": true
      },
      "controls": {
        "instructions": true,
        "reason": false,
        "verbosity": false
      },
      "admin": false
    }
  ]
}

Parameter Description

| Parameter | Description | |---------|------| | default | Default chat model selected when the app initializes | | alias | Model used to generate conversation aliases/titles | | model_name | The actual identifier of the model used in API calls | | model_alias | User-friendly name displayed in the UI | | description | Brief description of the model for reference when selecting | | endpoint | API path for handling model requests in the backend (e.g., /chat/gpt, /chat/claude, /chat/gemini, /chat/grok, /chat/openrouter) | | billing | Object containing model usage cost information | | billing.in_billing | Billing cost for input tokens (prompts). Unit: USD per million tokens | | billing.out_billing | Billing cost for output tokens (responses). Unit: USD per million tokens | | variants | Defines target models for "switch" capability values. Keys such as reasoning, web_search, and research point to the feature-specific model; base points back to the normal model | | capabilities | Defines the features supported by the model | | capabilities.stream | Whether streaming response is supported. Possible values: true, false | | capabilities.vision | Whether image input is supported. Possible values: true, false | | capabilities.reasoning | Whether reasoning is supported. Possible values: true, false, "toggle", "switch" | | capabilities.web_search | Whether web search is supported. Possible values: true, false, "toggle", "switch" | | capabilities.research | Whether research mode is supported. Possible values: true, false, "toggle", "switch" | | capabilities.mcp | Whether MCP server integration is supported. Possible values: true, false | | controls | Defines user control options supported by the model | | controls.instructions | Whether custom instructions setting is possible. Possible values: true, false | | controls.reason | Defines selectable reasoning intensity levels. Possible values: false or an object | | controls.reason.levels | String array defining the selectable options shown in the UI | | controls.reason.default | Default value applied when the model is selected | | controls.verbosity | Defines selectable response length levels. Possible values: false or an object | | controls.verbosity.levels | String array defining the selectable options shown in the UI | | controls.verbosity.default | Default value applied when the model is selected | | admin | If true, only admin users can access/select this model |

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",
  "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-v5.0-lite",
      "model_alias": "Seedream 5.0 Lite",
      "description": "BytePlus",
      "endpoint": "/image/wavespeed",
      "billing": {
        "in_billing": "0",
        "out_billing": "0.04"
      },
      "variants": {
        "vision": "bytedance/seedream-v5.0-lite/edit"
      },
      "capabilities": { "vision": "switch" },
      "admin": false
    },
    {
      "model_name": "bytedance/seedream-v5.0-lite/edit",
      "model_alias": "Seedream 5.0 Lite",
      "description": "BytePlus",
      "endpoint": "/image/wavespeed",
      "billing": {
        "in_billing": "0",
        "out_billing": "0.04"
      },
      "variants": {
        "base": "bytedance/seedream-v5.0-lite"
      },
      "capabilities": { "vision": "switch", "max_input": 10 },
      "admin": false
    }
  ]
}

Image Model Parameter Description

| Parameter | Description | |---------|------| | default | Default image model selected when the image page initializes | | alias | Model used to generate image conversation aliases/titles | | variants | Defines target models for "switch" capability values. vision points to the image-editing model; base points back to the text-to-image model | | capabilities.vision | Whether image input is supported. true: supported, false: not supported, "switch": switch to variant model | | capabilities.max_input | Maximum number of images that can be input simultaneously |

Model Switching System (Variants)

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

Example

[
  {
    "model_name": "bytedance/seedream-v5.0-lite",
    "variants": {
      "vision": "bytedance/seedream-v5.0-lite/edit"
    },
    "capabilities": {
      "vision": "switch"
    }
  },
  {
    "model_name": "bytedance/seedream-v5.0-lite/edit",
    "variants": {
      "base": "bytedance/seedream-v5.0-lite"
    },
    "capabilities": {
      "vision": "switch"
    }
  }
]

realtime_models.json Configuration

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

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

Realtime Model Parameter Description

| Parameter | Description | |---------|------| | default | Default real-time voice model selected when the real-time page initializes | | model_name | Actual voice/model identifier used by the real-time API | | model_alias | User-friendly voice name displayed in the UI | | model_gender | UI grouping/style hint for the voice. Current values use female or male | | description | Short voice/personality description displayed in the model picker |

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",
    "description": "Short description shown in the server picker",
    "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
``

…

## Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [gws8820](https://github.com/gws8820)
- **Source:** [gws8820/DevoChat](https://github.com/gws8820/DevoChat)
- **License:** MIT
- **Homepage:** https://devochat.com

Install and usage instructions live in the source repository linked above.