English | 한국어
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.
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 |
-
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.
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
WDS_SOCKET_PORT=0
REACT_APP_FASTAPI_URL=http://localhost:8000
$ cd frontend
$ npm install
$ npm start$ cd frontend
$ npm run build
$ npx serve -s build$ cd backend
$ python -m venv .venv
$ source .venv/bin/activate # Windows: .venv\Scripts\activate
$ pip install -r requirements.txtMONGODB_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=...
$ uvicorn main:app --host=0.0.0.0 --port=8000 --reloadDefine 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 |
|---|---|
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 |
The feature is always enabled.
The feature is not supported.
Users can turn the feature on or off without changing the selected model.
When a user toggles the feature, the selected model changes to another model defined in the variants object.
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
}
]
}| 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 |
You can define various variants of models through the variants object.
[
{
"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"
}
}
]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"
}
]
}| 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 |
DevoChat is a web-based MCP (Model Context Protocol) client.
You can define external servers to connect to in the mcp_servers.json file.
{
"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
}
}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- 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
This project is distributed under the MIT License.











