Is it possible to pre-configure a set of MCP tools in the code?

[boulevard-h]

Thank you so much for providing the MCP example in Chainlit! It has significantly facilitated my learning process. However, I still have one question:

Is it possible to pre-configure a set of MCP tools in the code so that users can directly see and use these predefined tools on the web interface after starting the app via chainlit run app.py, without needing to manually add them?

I would greatly appreciate your response and guidance on this.

Thank you again!

[PoliteApps]

Open since April and not a single soul has said anything, this is just sad...

[sherifattia]

This is possible, but it relies on a "hack" rather than a documented API. So this will break if Chainlit changes how it stores MCP configs.

For now, you can run some custom JS to inject a default MCP entry into localStorage

public/mcp-autoload.js

(() => {
  "use strict";

  const MCP_KEY = "mcp_storage_key";

  // Default config to inject
  const MCP_CONFIG = [
    {
      name: "My Preloaded MCP",
      tools: [],              // Populated by Chainlit on connect
      clientType: "sse",
      command: null,
      url: "http://localhost:8765/sse",
      headers: null,
      status: "disconnected", // Do not auto-connect
    },
  ];

  const existing = localStorage.getItem(MCP_KEY);
  console.log("MCP autoload: checking localStorage…");

  if (!existing || existing === "[]") {
    localStorage.setItem(MCP_KEY, JSON.stringify(MCP_CONFIG));
    console.log("MCP autoload: injected default config");
  } else {
    console.log("MCP autoload: config already present; leaving as-is");
  }
})();

.chainlit/config.toml

# Specify a JavaScript file that can be used to customize the user interface.
custom_js = "/public/mcp-autoload.js"

[PoliteApps]

Thanks a lot @sherifattia for your insight! With this script I managed to add the MCP server but the error that I am trying to fix unfortunately persists. If you want to give some insight please feel free to access: issue 2147