Using LibreChat to run your own chatbot connected to your MCP's

Having Claude Desktop or Cline reach out to external services via MCP is powerful for development, but what if you want to deploy a specialized chatbot for end users? Imagine:

• A customer service bot with access to your product catalog and documentation to give high quality answers
• Your users spend no time setting anything up to get this
• They can control their accounts through your service

And it all only takes less than a day worth of effort to build and deploy!

Enter LibreChat: a fantastic open-source AI chat platform that makes this possible. It provides a production-ready interface with built-in support for Model Context Protocol (MCP) servers, allowing you to create custom AI assistants that connect to your business data and services.

By the end of this guide, you'll have:

• A self-hosted LibreChat instance with OAuth authentication
• MCP servers connected to your business data sources
• A chatbot accessible to users through a web interface
• Enhanced knowledge of your system through pre-existing documentation and anything else you want your users to know about

Requirements

• Docker Desktop installed on your system
• OAuth Provider (Google, GitHub, Auth0, etc.) for user authentication
• API Keys for your chosen LLM provider (OpenAI, Anthropic, etc.)
• Basic familiarity with command line and YAML configuration

LibreChat uses Docker for easy initial setup so we'll use it to get started

Download and Install

Clone the LibreChat repository:

git clone https://github.com/danny-avila/LibreChat.git cd LibreChat

Configure secrets and settings

Copy the example environment file and configure your settings:

cp .env.example .env

Edit .env to add your LLM provider API keys. At minimum, you'll need:

OPENAI_API_KEY=your_openai_key_here ANTHROPIC_API_KEY=your_anthropic_key_here MONGO_URI=mongodb://mongodb:27017/LibreChat CREDS_KEY=your_32_char_key_here CREDS_IV=your_16_char_key_here JWT_SECRET=your_jwt_secret_here JWT_REFRESH_SECRET=your_refresh_secret_here

Use LibreChat's credentials generator tool to generate secure keys.

3. Launch LibreChat

Start the application with Docker:

docker compose up -d

LibreChat will be available at http://localhost:3080 .

By default you can sign up with any email address and no verification.

For production deployments, configure OAuth to allow users to sign in with existing accounts:

Google OAuth Example

There are more detailed instructions on how to do this on the librechat site, but a quick summary is as follows:

1. Create OAuth credentials in Google Cloud Console
2. Add authorized redirect URI: http://localhost:3080/oauth/google/callback
3. Add to your .env:

DOMAIN_CLIENT=http://localhost:3080 DOMAIN_SERVER=http://localhost:3080 GOOGLE_CLIENT_ID=your_client_id GOOGLE_CLIENT_SECRET=your_client_secret GOOGLE_CALLBACK_URL=/oauth/google/callback

Restart LibreChat to apply changes.

docker compose restart

Users can now sign in with Google.

MCP servers extend your chatbot's capabilities by connecting to external tools and data sources. LibreChat supports MCP through its librechat.yaml configuration file.

MCP Configuration

Create or edit librechat.yaml in your LibreChat directory:

version: 1.1.7 mcpServers: business-api: type: streamable-http url: https://api.yourbusiness.com/mcp headers: X-User-ID: "{{LIBRECHAT_USER_ID}}" Authorization: "Bearer ${API_TOKEN}" timeout: 30000 serverInstructions: true

The key authentication piece here is to pass in the user credentials that were obtained during user login to LibreChat via the business-api.headers object. This shares the credentials with the MCP for use by the upstream service.

After adding MCP servers, restart LibreChat.

Creating Agents with MCP Tools

To keep all of the agent configuration in one place (ie docs, instructions, MCP configurations, etc), you should create an Agent in LibreChat:

1. Navigate to the Agents section on the right sidebar
2. Click Create Agent
3. Select Add Tools and choose your MCP servers that you want it to reach out to
4. Configure which specific tools from each server to enable (suggested to just enable all)
5. Be sure to click the "Share" button, and ensure that all users have the ability to see this agent. Without this, only you have access to this agent.
6. [Optional] Add documents to your agent that will be used for additional knowledge obtained during every chat request if needed.
7. Save your agent

Users can then select this agent from the chat interface to access the connected MCP tools and documentation.

Artifacts enable your chatbot to generate interactive content like React components, HTML pages, and Mermaid diagrams that users can view, edit, and download.

Enabling Artifacts

Configure artifacts at the agent level for granular control:

1. Create or edit an agent
2. Enable the Artifacts toggle
3. Save the agent

When users interact with this agent, generated code and diagrams will appear in a side panel where they can be previewed, edited, and exported.

Use Cases for Artifacts

• Code Generation: Create React components or HTML templates
• Data Visualization: Generate charts and graphs with Mermaid
• Prototyping: Rapidly iterate on UI designs
• Documentation: Create interactive examples and tutorials

• Deploy to production through your server provider of choice (Digital Ocean, AWS, GCP)
• Explore the LibreChat documentation for advanced configuration
• Join the LibreChat discord for support and ideas
• Build custom MCP servers for your specific use cases

Start building your AI-powered chatbot today with LibreChat and MCP!