Skip to main content
Version: Next

Connect with Your MCP Client

MCPX is essentially a MCP server, just like any other. Connecting to it using the SDK is similar to any MCP integration. Because MCPX adopts a remote-first approach - that is, it is meant to be deployed on the cloud - it accepts SSE connections and not stdio ones.

You may pass extra headers when constructing a Transport in the client app - the one that will be used in order to connect to MCPX. See Basic API Key Auth and ACL for actual extra headers' use-cases.

const client = new Client({ name: "mcpx-client", version: "1.0.0" });
await client.connect(transport);

StreamableHttp Transport​

This is the recommended way to connect the MCP servers.

const transport = new StreamableHTTPClientTransport(
  new URL(`${MCPX_HOST}/mcp`),
  {
    requestInit: {
      headers: {
        "x-lunar-consumer-tag": process.env["CONSUMER_TAG"] || "anonymous",
        "x-lunar-api-key": process.env["API_KEY"] || "",
      },
    },
  }
);

SSE Transport​

This transport is in deprecation, however MCPX still support it to maintain backward compatibility for the time being.

const transport = new SSEClientTransport(new URL(`${MCPX_HOST}/sse`), {
  eventSourceInit: {
    fetch: (url, init) => {
      const headers = new Headers(init?.headers);
      const consumerTag = process.env["CONSUMER_TAG"] || "anonymous";
      headers.set("x-lunar-consumer-tag", consumerTag);
      headers.set("x-lunar-api-key", process.env["API_KEY"] || "");
      return fetch(url, { ...init, headers });
    },
  },
});

Connecting to MCPX with Demo Client​

If you do not have an existing MCP Client you can use our Demo Client to get started.

To profit from MCPX straight away, connect to it with the demo client found under ./demo-client in the mcpx directory. This modest application is included in this repo for demonstrational purposes.

cd demo-client
npm install

The demo client is the component that uses LLM power - currently Gemini by Google or Claude by Anthropic. This is why a relevant API key is required. Obtain your API key, and then run:

# For Gemini:
GEMINI_API_KEY=<your-key> npm run start:gemini

# For Claude:
ANTHROPIC_API_KEY=<your-key> npm run start:claude

Environment variables can also be placed in ./demo-client/.env. See source code for additional env vars to adjust and tweak your experience.

Suggested Example Scenario​

  • Make sure you have all the required environment variables set for MCPX:

    • SLACK_BOT_TOKEN
    • GOOGLE_MAPS_API_KEY
    • SLACK_CHANNEL_IDS
    • SLACK_TEAM_ID

  • Bring up MCPX with only Google Maps - and without Slack.

  • Make sure the GEMINI_API_KEY is set and run npm run start:gemini

  • Try this prompt:

 > Find walking directions from Union Square to Little Island, in NYC, NY, and post it to the Slack channel <available-slack-channel-name>. Format the message nicely and spaced, and add 2-3 relevant emojis.
  • While Google Maps tools are available, there is no way to post the result to Slack.
  • Change MCPX configuration and allow the integration to the Slack MCP Server. Restart MCPX to allow new config to become effective.
  • Restart demo client so it learns about the newly available tools.
  • Prompt demo client again. It is expected to understand that the request is now possible to fulfill, and the message is expected to be sent to Slack. Oh, the route should take about 27 minutes, by the way.