🚀 Embracing MCP in KaibanJS: A Leap Forward in Multi-Agent AI Systems

The AI landscape is evolving rapidly, and with it, the tools and protocols that empower developers to build more efficient and scalable systems. One such advancement is the integration of the Model Context Protocol (MCP) into KaibanJS, our JavaScript framework for building multi-agent AI systems.

---

🔍 What is MCP?

The Model Context Protocol (MCP) is an open standard developed by Anthropic to streamline the interaction between AI models and external tools or data sources. Think of MCP as the USB-C of AI integrations—providing a universal, standardized way for AI agents to connect with various services without bespoke connectors.

Key Features:

• Standardized Communication: MCP offers a structured framework for AI models to interact with tools and services.
• Tool Access & Expansion: AI assistants can utilize external tools for real-time insights.
• Secure & Scalable: Facilitates safe and scalable integration with enterprise applications.

By adopting MCP, developers can build AI systems where multiple specialized agents work together coherently, sharing relevant information without redundancy or conflicts.

---

🛠️ Implementations in JavaScript

In the JavaScript ecosystem, the primary implementation of MCP is the @modelcontextprotocol/sdk library. While it's comprehensive, building a custom wrapper around it for KaibanJS would entail significant maintenance overhead, including:

• Continuous tracking of the evolving MCP standard.
• Conversion of tools to match KaibanJS's architecture.
• Allocation of resources for ongoing support and updates.

Instead, we've opted to leverage the @langchain/mcp-adapters, which seamlessly integrates MCP tools into LangChain.js applications. Given that KaibanJS is built atop LangChain.js, this adapter ensures compatibility and reduces the need for additional support.

---

🔄 Importance of Updating LangChainJS Dependencies

To facilitate the integration of MCP, it's crucial to update LangChainJS dependencies. In KaibanJS v0.20.0, we've upgraded all @langchain dependencies in both the core and tools packages. This ensures:

• Full compatibility with the latest LangChain APIs.
• Enhanced performance and stability across agent workflows.
• Access to new features and configuration options in LangChain.

---

🧪 Using MCP in KaibanJS

Integrating MCP into your KaibanJS project is straightforward. Here's how you can set it up:

1. Install the MCP Adapter:

   npm install @langchain/mcp-adapters
   

2. Configure the MCP Client:

   import { MultiServerMCPClient } from "@langchain/mcp-adapters";
   
   const mcpClient = new MultiServerMCPClient({
     prefixToolNameWithServerName: false,
     additionalToolNamePrefix: "",
     mcpServers: {
       tavily: {
         command: "npx",
         args: ["-y", "[email protected]"],
         env: {
           TAVILY_API_KEY: process.env.TAVILY_API_KEY || "",
           PATH: process.env.PATH || ""
         }
       },
       weather: {
         transport: "sse",
         url: "https://example.com/mcp-weather",
         headers: {
           Authorization: "Bearer token123"
         },
         useNodeEventSource: true,
         reconnect: {
           enabled: true,
           maxAttempts: 5,
           delayMs: 2000
         }
       }
     }
   });
   

3. Access MCP Tools:

   const mcpTools = await mcpClient.getTools();
   console.log(mcpTools);
   

4. Integrate with KaibanJS Agents:

   import { Agent } from "kaibanjs";
   
   const searchAgent = new Agent({
     name: "Scout",
     role: "Information Gatherer",
     goal: "Find up-to-date information about the given sports query.",
     background: "Research",
     tools: [...mcpTools]
   });
   

This setup allows your KaibanJS agents to utilize tools exposed via MCP servers, enhancing their capabilities and interoperability.

---

🌐 The Browser Conundrum

While MCP's integration into server-side environments is robust, client-side support—particularly in browsers—is still lacking. The @modelcontextprotocol/sdk currently supports only server-side environments, limiting the deployment of MCP-enabled agents in browser-based applications.

Some developers have explored workarounds, such as using WebSockets or WebAssembly, but these solutions are neither standardized nor officially supported. The absence of stable client-side support hinders the development of fully decentralized, browser-based AI agents—a direction KaibanJS is keen to pursue.

---

🚀 Conclusion

The adoption of MCP in KaibanJS marks a significant step forward in building more modular and interoperable multi-agent AI systems. By leveraging existing tools like the @langchain/mcp-adapters, we ensure seamless integration without the overhead of maintaining custom wrappers.

However, the journey doesn't end here. As the AI ecosystem evolves, so too must our tools and protocols. We're eagerly awaiting stable client-side support for MCP to unlock new possibilities in browser-based AI applications.

Stay tuned, and keep building! 💪

---

🙋‍♂️ Disclaimer

This post was created in collaboration with Alex Anthony X/twitter.

🔗 Connect with Us

• X (Twitter): https://x.com/kaibanjs
• Official Page: https://www.kaibanjs.com/
• Discord: https://discord.gg/Na83SNUB