reflex-mcp-chat

MCP.Pizza Chef: TimChild

Reflex MCP Chat is a Python-based web client designed to build highly capable and customizable chat applications using large language models (LLMs). It leverages the Model Context Protocol (MCP) to integrate real-time structured context from various MCP servers, enhancing chat interactions. Built with Reflex and LangGraph, it represents a modern approach to LLM application development, enabling developers to create interactive, context-aware chat interfaces.

Use This MCP client To

Build customizable chat interfaces powered by LLMs Integrate multiple MCP servers for enriched chat context Develop interactive web chat applications with Python Leverage LangGraph for advanced LLM workflow orchestration Create real-time context-aware conversational agents Prototype and deploy chatbots with modular MCP integration

README

Reflex MCP Chat App

A starting point for a highly customizable Python web application that uses LLMs with access to MCP (Model context protocol) servers to build a highly capable chat application. (Please leave a ⭐ if you like it!)

The interface is based on the Reflex chat app template.

The inner workings are completely new, utilizing the latest approaches to LLM application development with LangGraph and MCP (Model Context Protocol).

demo.webm

Key Technologies Used

  • Reflex - A Python web framework for building interactive web applications.
  • LangGraph - A framework for building LLM applications
  • MCP - Anthropics open source protocol for providing context to LLM applications.
  • UV - An extremely fast Python project manager.
  • Taskfile - A task runner for automating common tasks in the development process.
  • GitHubActions - GitHub's automation tool for CI/CD.
  • Pyright - A static type checker for Python.
  • Ruff - A fast Python linter and code formatter.
  • Pre-commit - A framework for managing and maintaining multi-language pre-commit hooks.
  • Pytest - A testing framework for Python.
  • Dependency Injector - A dependency injection framework for python that allow for easy management of app configuration and testing.

Getting Started

🧬 1. Clone the Repo

git clone https://github.com/TimChild/reflex-mcp-chat.git

📦 2. Install UV

If you don't already have uv installed, you can follow the instructions here.

For macOS, linux, and wsl2

curl -LsSf https://astral.sh/uv/install.sh | sh

🛠️ 3. (Optionally) Install Taskfile

I recommend installing Taskfile to make it easier to run tasks in the project, but you can also run any necessary commands manually (using the Taskfile.yml as a reference).

On linux (Debian/Ubuntu):

sudo snap install task --classic

On macOS:

brew install go-task/tap/go-task

⚙️ 4. Setup

Create a .env file (or add directly to environment vars):

[!TIP] You can copy the .env.template file to .env and fill in the values there. You can also set any non-empty string if you don't want to use that feature (the app checks that they are not-null for easier debugging).

You can also modify the config.yml file to add/remove MCP servers and change other app behavior.

Currently the config is set to allow the MCP file server to make changes in ~/mcp_allowed (you'll need to create that directory first).

🚀 5. Run the application

task run

Then open localhost:3000 in your browser.

App Features

  • 100% Python-based, including the UI, using Reflex
  • Selectable LLMs (OpenAI and Anthropic implemented, easily extendable) -- Dropdown selection in the UI
  • Runs via LangGraph's standard Graph mode or new Functional API -- Dropdown selection in the UI (note: implemented behavior is identical -- allows you to extend either method)
  • Custom MCP client for easy management of multiple MCP servers
  • Multiple MCP severs included via 4 different modes for easy extension. Examples include:
    • http SSE (Server-Sent Events)
    • local python stdio via uv
    • docker container
    • stdio from github repo via npx
  • The application is fully customizable without typical frontend development experience.
  • Responsive design for various devices

Development Environment

There are many helpful tasks to help with development:

Then, to set up all development dependencies

task install

To run type checking, linting, and testing:

task test

To run tests on any changes:

task watch-tests

To run a jupyter lab with all dependencies:

task jupyter

CI/CD workflows are included for automated testing and deployment. Find them in the .github/workflows directory.

Uses Dependency Injector for easy management of app configuration and testing.

App configuration is managed via a config.yml file and containers.py file.

TODOs:

A few things that could improve the app:

  • Add a mkdocs site
  • Add docker/docker-compose support
  • Add deployment workflow template
  • Add end-to-end tests using playwright
  • Add postgres persistence (partially implemented)
  • Better handling of long conversations
  • Better handling of large content returned from tools
  • Add MCP resource and prompt support
  • Add MCP sampling support

Contributing

If you'd like to contribute, please do the following:

  • Fork the repository and make your changes.
  • Once you're ready, submit a pull request for review.

License

The following repo is licensed under the MIT License.

reflex-mcp-chat FAQ

How does Reflex MCP Chat integrate with MCP servers?
It connects to MCP servers to fetch structured, real-time context for LLM-powered chat applications, enabling dynamic and context-aware conversations.
What frameworks does Reflex MCP Chat use?
It uses Reflex for the web framework and LangGraph for building LLM workflows, combined with MCP for context integration.
Can I customize the chat interface?
Yes, Reflex MCP Chat is highly customizable, allowing developers to tailor the UI and LLM interactions to specific needs.
Is Reflex MCP Chat limited to a specific LLM provider?
No, it is provider-agnostic and can work with various LLMs including OpenAI, Anthropic Claude, and Google Gemini.
What programming language is Reflex MCP Chat built with?
It is built primarily with Python, leveraging modern Python web frameworks and LLM tooling.
Does Reflex MCP Chat support real-time updates?
Yes, it supports real-time context updates from MCP servers to maintain dynamic chat interactions.
How do I get started with Reflex MCP Chat?
You can start by cloning the GitHub repository, installing dependencies, and configuring MCP server endpoints.
Can Reflex MCP Chat be extended with additional MCP servers?
Absolutely, it is designed to integrate multiple MCP servers to enrich chat context and capabilities.