DevoChat
English | 한국어
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
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:[email protected]/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
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
- Fork this repository
- Create a new branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Create a Pull Request
License
This project is distributed under the MIT License.
No comments yet
Be the first to share your take.