DEV Community: Tool Smith

JavaScript catches up: 4 modern frameworks for multi-agent LLM orchestration

Tool Smith — Tue, 05 Aug 2025 16:07:12 +0000

The rapid rise of LLM-powered agents has brought new attention to how we orchestrate complex, multi-agent systems—especially in AI-heavy domains like task automation, assistant chaining, and tool-based reasoning.

For a while, Python had a clear head start in this space. Frameworks like LangChain, CrewAI, and LangGraph made it the go-to choice for prototyping multi-agent architectures. But while Python remains dominant in research and backend experimentation, JavaScript has been catching up—fast.

In the past year, several JavaScript-native frameworks have emerged with serious capabilities: modular agent design, message-passing, memory, RAG support, and even live orchestration UIs.

These tools now offer everything needed to build:

Autonomous LLM-driven agents
Workflow engines with shared state
Interactive agent-task boards
Dev-friendly experiences for browser, Node.js, and edge runtimes

This article compares four of the most promising frameworks shaping the JavaScript multi-agent ecosystem:

LangGraph.js – the JavaScript adaptation of LangGraph's powerful graph model
Mastra – TypeScript-native pipelines for AI-native apps
AutogenJS – a lightweight agent chat model for quick experimentation
KaibanJS – a Kanban-style, role-driven orchestration system with a visual playground

LangGraph.js

Type: Graph-based, stateful agent orchestration
Language: JavaScript / TypeScript
GitHub: langchain-ai/langgraphjs
Best for: Complex workflows with branching logic and long-term state tracking

LangGraph.js is the JavaScript/TypeScript counterpart of LangGraph (Python). It lets you define agent workflows as graphs, where each node can represent an agent, tool, or memory unit, and edges define execution flow.

It’s part of the broader LangChain ecosystem, offering full integration with streaming, checkpoints, subgraphs, and memory across runs.

Pros

✅ Great for graph-like logic and control

✅ LangChain-compatible

✅ Good for production-grade orchestration with logging and visibility

✅ Dev UI with LangGraph Studio

Cons

❌ Tied to LangChain philosophy and APIs

❌ Higher learning curve (state machines, graph modeling)

Example usage:

// npm install @langchain-anthropic
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { ChatAnthropic } from "@langchain/anthropic";
import { tool } from "@langchain/core/tools";

import { z } from "zod";

const search = tool(
  async ({ query }) => {
    if (
      query.toLowerCase().includes("sf") ||
      query.toLowerCase().includes("san francisco")
    ) {
      return "It's 60 degrees and foggy.";
    }
    return "It's 90 degrees and sunny.";
  },
  {
    name: "search",
    description: "\"Call to surf the web.\","
    schema: z.object({
      query: z.string().describe("The query to use in your search."),
    }),
  }
);

const model = new ChatAnthropic({
  model: "claude-3-7-sonnet-latest",
});

const agent = createReactAgent({
  llm: model,
  tools: [search],
});

const result = await agent.invoke({
  messages: [
    {
      role: "user",
      content: "what is the weather in sf",
    },
  ],
});

Mastra

Type: AI-native pipelines (RAG, toolchains, evaluations)
Language: TypeScript
GitHub: mastra-ai/mastra
Best for: Teams creating custom LLM workflows, retrieval pipelines, and fast evaluation loops

Mastra is a TypeScript-first framework built around the concept of AI-native workflow composition. It focuses on enabling fast development of things like:

Retrieval-Augmented Generation (RAG)
Prompt chains with memory and logging
Evaluation pipelines and testing loops

It’s developer-friendly and flexible, supporting serverless and local runs, and works well for product teams iterating quickly.

Pros

✅ Built-in support for RAG and tool orchestration

✅ Declarative syntax with fast iteration

✅ Excellent for evaluation/test loops

✅ TypeScript native

Cons

❌ Less visual

❌ Pipeline-focused, not agent-first

❌ Still maturing in the community

Example usage:

import { Mastra } from "@mastra/core";
import { summaryClusteringWorkflow } from "./workflows/summaryClusteringWorkflow";
import { topicClusteringAgent } from "./agents/topicClusteringAgent";

import { openai } from "@ai-sdk/openai";
import { Agent } from "@mastra/core/agent";
import { createGmailTool } from "./tools/gmailTool";

 const emailSummaryAgent = new Agent({
  name: "Email Summary Agent",
  instructions: `Process support emails for an AI video generation SaaS platform. IMPORTANT: Be thorough in identifying categories - if there's ANY indication of these issues, include the email:`,
  model: openai("gpt-4o"),
  tools: {
    gmailTool: createGmailTool({
      clientEmail: process.env.GMAIL_CLIENT_EMAIL || "",
      privateKey: process.env.GMAIL_PRIVATE_KEY || "",
      subject: process.env.GMAIL_SUBJECT || ""
    })
  },
});

// Create and export the Mastra instance
export const mastra = new Mastra({
  agents: {
    emailSummaryAgent,
    topicClusteringAgent
  },
  workflows: {
    summaryClusteringWorkflow
  },
});

OpenAI Agents JS

Type: Plugin-based multi-agent orchestration
Language: JavaScript / TypeScript
GitHub: openai/openai-agents-js
Best for: Agent handoffs, tool integrations, and traceable workflows

OpenAI Agents JS is a lightweight, provider-agnostic JavaScript SDK for orchestrating agents around OpenAI models. It includes abstractions for tool handoffs, conversational memory, safety guards, and built-in tracing.

Pros

Agent orchestration with tool integration and handoffs
Built-in logging, tracing, and error recovery
Extensible middleware and memory system

Cons

Requires OpenAI API access
Minimal visual tooling or UI

Example usage:

import { z } from 'zod';
import { Agent, run, tool } from '@openai/agents';

const getWeatherTool = tool({
  name: 'get_weather',
  description: 'Get the weather for a given city',
  parameters: z.object({ city: z.string() }),
  execute: async (input) => {
    return `The weather in ${input.city} is sunny`;
  },
});

const agent = new Agent({
  name: 'Data agent',
  instructions: 'You are a data agent',
  tools: [getWeatherTool],
});

async function main() {
  const result = await run(agent, 'What is the weather in Tokyo?');
  console.log(result.finalOutput);
}

main().catch(console.error);

KaibanJS

Type: Kanban-style, modular, role-based orchestration
Language: JavaScript / TypeScript
GitHub: kaiban-ai/kaibanjs
Best for: Visual, role-driven orchestration with board-like task coordination

KaibanJS offers a completely different way to think about multi-agent systems.

Inspired by Kanban boards, it treats agents as roles and tasks as cards that flow through predefined stages. This model makes complex orchestrations easy to reason about, observe, and debug — especially when collaborating agents have different responsibilities.

KaibanJS provides:

A fully interactive Playground to visualize agent flow live
A clear separation of roles/stages/cards for readability
Integration-ready APIs for React, Next.js, and browser apps

Pros

✅ Intuitive, human-readable orchestration model

✅ Built-in observability and agent logs

✅ Playground with live board view

✅ Seamless integration with frontend stacks

✅ Great for LLM agents with tools or async behavior

Cons

❌ Different mental model vs pipelines or graphs

❌ Not designed for RAG pipelines (but can be extended)

🔗 Try the Playground → https://www.kaibanjs.com/playground

Example usage:


import { Agent, Task, Team } from 'kaibanjs';

// Define agents with specific roles and goals
const profileAnalyst = new Agent({
    name: 'Zoe', 
    role: 'Profile Analyst', 
    goal: 'Extract structured information from conversational user input.', 
    background: 'Data Processor',
    tools: []
});

const resumeWriter = new Agent({
    name: 'Alex Mercer', 
    role: 'Resume Writer', 
    goal: `Craft compelling, well-structured resumes 
    that effectively showcase job seekers qualifications and achievements.`,
    background: `Extensive experience in recruiting, 
    copywriting, and human resources, enabling 
    effective resume design that stands out to employers.`,
    tools: []
});

// Define the tasks for each agent
const processingTask = new Task({ 
    description: `Extract relevant details such as name, 
    experience, skills, and job history from the user's 'aboutMe' input. 
    aboutMe: {aboutMe}`,
    expectedOutput: 'Structured data ready to be used for a resume creation.', 
    agent: profileAnalyst
});

const resumeCreationTask = new Task({ 
    description: `Utilize the structured data to create 
    a detailed and attractive resume. 
    Enrich the resume content by inferring additional details from the provided information.
    Include sections such as a personal summary, detailed work experience, skills, and educational background. Please use markdown format for the output.`,
    expectedOutput: `A professionally formatted resume in markdown format, 
    ready for submission to potential employers.`, 
    agent: resumeWriter 
});

// Create and start the team
const team = new Team({
    name: 'Resume Creation Team',
    agents: [profileAnalyst, resumeWriter],
    tasks: [processingTask, resumeCreationTask],
    inputs: { aboutMe: `My name is David Llaca. 
    JavaScript Developer for 5 years. 
    I worked for three years at Disney, 
    where I developed user interfaces for their primary landing pages
    using React, NextJS, and Redux. Before Disney, 
    I was a Junior Front-End Developer at American Airlines, 
    where I worked with Vue and Tailwind. 
    I earned a Bachelor of Science in Computer Science from FIU in 2018, 
    and I completed a JavaScript bootcamp that same year.` },
    env: {OPENAI_API_KEY: 'ENV_OPENAI_API_KEY'}
});

team.start();

🧠 Final Thoughts

Each of these frameworks has a distinct approach to multi-agent orchestration:

LangGraph.js → Precise graph-based orchestration, ideal for LangChain users
Mastra → Rapid iteration on AI pipelines, RAG-native and TypeScript friendly
OpenAI Agents JS: Traceable, tool-integrated agent workflows
KaibanJS → Role-first orchestration with Kanban clarity and dev tooling built-in

Whether you're building an LLM assistant network, a multi-agent research tool, or just exploring autonomous workflows — the JavaScript ecosystem now has serious tools to match Python’s early lead.

💬 What’s your preferred orchestration style?

Do you prefer graph edges, pipeline chains, or task boards? Are you already working with one of these tools—or rolling your own? I’d love to hear your approach 👇

JavaScript catches up: 4 modern frameworks for multi-agent LLM orchestration

Tool Smith — Fri, 01 Aug 2025 19:44:57 +0000

In the past year, several JavaScript-native frameworks have emerged with serious capabilities: modular agent design, message-passing, memory, RAG support, and even live orchestration UIs.

These tools now offer everything needed to build:

Autonomous LLM-driven agents
Workflow engines with shared state
Interactive agent-task boards
Dev-friendly experiences for browser, Node.js, and edge runtimes

This article compares four of the most promising frameworks shaping the JavaScript multi-agent ecosystem:

LangGraph.js – the JavaScript adaptation of LangGraph's powerful graph model
Mastra – TypeScript-native pipelines for AI-native apps
AutogenJS – a lightweight agent chat model for quick experimentation
KaibanJS – a Kanban-style, role-driven orchestration system with a visual playground

LangGraph.js

Type: Graph-based, stateful agent orchestration
Language: JavaScript / TypeScript
GitHub: langchain-ai/langgraphjs
Best for: Complex workflows with branching logic and long-term state tracking

It’s part of the broader LangChain ecosystem, offering full integration with streaming, checkpoints, subgraphs, and memory across runs.

Pros

✅ Great for graph-like logic and control

✅ LangChain-compatible

✅ Good for production-grade orchestration with logging and visibility

✅ Dev UI with LangGraph Studio

Cons

❌ Tied to LangChain philosophy and APIs

❌ Higher learning curve (state machines, graph modeling)

Example usage:

// npm install @langchain-anthropic
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { ChatAnthropic } from "@langchain/anthropic";
import { tool } from "@langchain/core/tools";

import { z } from "zod";

const search = tool(
  async ({ query }) => {
    if (
      query.toLowerCase().includes("sf") ||
      query.toLowerCase().includes("san francisco")
    ) {
      return "It's 60 degrees and foggy.";
    }
    return "It's 90 degrees and sunny.";
  },
  {
    name: "search",
    description: "Call to surf the web.",
    schema: z.object({
      query: z.string().describe("The query to use in your search."),
    }),
  }
);

const model = new ChatAnthropic({
  model: "claude-3-7-sonnet-latest",
});

const agent = createReactAgent({
  llm: model,
  tools: [search],
});

const result = await agent.invoke({
  messages: [
    {
      role: "user",
      content: "what is the weather in sf",
    },
  ],
});

Mastra

Type: AI-native pipelines (RAG, toolchains, evaluations)
Language: TypeScript
GitHub: mastra-ai/mastra
Best for: Teams creating custom LLM workflows, retrieval pipelines, and fast evaluation loops

Mastra is a TypeScript-first framework built around the concept of AI-native workflow composition. It focuses on enabling fast development of things like:

Retrieval-Augmented Generation (RAG)
Prompt chains with memory and logging
Evaluation pipelines and testing loops

It’s developer-friendly and flexible, supporting serverless and local runs, and works well for product teams iterating quickly.

Pros

✅ Built-in support for RAG and tool orchestration

✅ Declarative syntax with fast iteration

✅ Excellent for evaluation/test loops

✅ TypeScript native

Cons

❌ Less visual

❌ Pipeline-focused, not agent-first

❌ Still maturing in the community

Example usage:

import { Mastra } from "@mastra/core";
import { summaryClusteringWorkflow } from "./workflows/summaryClusteringWorkflow";
import { topicClusteringAgent } from "./agents/topicClusteringAgent";

import { openai } from "@ai-sdk/openai";
import { Agent } from "@mastra/core/agent";
import { createGmailTool } from "./tools/gmailTool";

 const emailSummaryAgent = new Agent({
  name: "Email Summary Agent",
  instructions: `Process support emails for an AI video generation SaaS platform. IMPORTANT: Be thorough in identifying categories - if there's ANY indication of these issues, include the email:`,
  model: openai("gpt-4o"),
  tools: {
    gmailTool: createGmailTool({
      clientEmail: process.env.GMAIL_CLIENT_EMAIL || "",
      privateKey: process.env.GMAIL_PRIVATE_KEY || "",
      subject: process.env.GMAIL_SUBJECT || ""
    })
  },
});

// Create and export the Mastra instance
export const mastra = new Mastra({
  agents: {
    emailSummaryAgent,
    topicClusteringAgent
  },
  workflows: {
    summaryClusteringWorkflow
  },
});

OpenAI Agents JS

Type: Plugin-based multi-agent orchestration
Language: JavaScript / TypeScript
GitHub: openai/openai-agents-js
Best for: Agent handoffs, tool integrations, and traceable workflows

Pros

Agent orchestration with tool integration and handoffs
Built-in logging, tracing, and error recovery
Extensible middleware and memory system

Cons

Requires OpenAI API access
Minimal visual tooling or UI

Example usage:

import { z } from 'zod';
import { Agent, run, tool } from '@openai/agents';

const getWeatherTool = tool({
  name: 'get_weather',
  description: 'Get the weather for a given city',
  parameters: z.object({ city: z.string() }),
  execute: async (input) => {
    return `The weather in ${input.city} is sunny`;
  },
});

const agent = new Agent({
  name: 'Data agent',
  instructions: 'You are a data agent',
  tools: [getWeatherTool],
});

async function main() {
  const result = await run(agent, 'What is the weather in Tokyo?');
  console.log(result.finalOutput);
}

main().catch(console.error);

KaibanJS

Type: Kanban-style, modular, role-based orchestration
Language: JavaScript / TypeScript
GitHub: kaiban-ai/kaibanjs
Best for: Visual, role-driven orchestration with board-like task coordination

KaibanJS offers a completely different way to think about multi-agent systems.

KaibanJS provides:

A fully interactive Playground to visualize agent flow live
A clear separation of roles/stages/cards for readability
Integration-ready APIs for React, Next.js, and browser apps

Cons

❌ Different mental model vs pipelines or graphs

❌ Not designed for RAG pipelines (but can be extended)

🔗 Try the Playground → https://www.kaibanjs.com/playground

Example usage:


import { Agent, Task, Team } from 'kaibanjs';

// Define agents with specific roles and goals
const profileAnalyst = new Agent({
    name: 'Zoe', 
    role: 'Profile Analyst', 
    goal: 'Extract structured information from conversational user input.', 
    background: 'Data Processor',
    tools: []
});

const resumeWriter = new Agent({
    name: 'Alex Mercer', 
    role: 'Resume Writer', 
    goal: `Craft compelling, well-structured resumes 
    that effectively showcase job seekers qualifications and achievements.`,
    background: `Extensive experience in recruiting, 
    copywriting, and human resources, enabling 
    effective resume design that stands out to employers.`,
    tools: []
});

// Define the tasks for each agent
const processingTask = new Task({ 
    description: `Extract relevant details such as name, 
    experience, skills, and job history from the user's 'aboutMe' input. 
    aboutMe: {aboutMe}`,
    expectedOutput: 'Structured data ready to be used for a resume creation.', 
    agent: profileAnalyst
});

const resumeCreationTask = new Task({ 
    description: `Utilize the structured data to create 
    a detailed and attractive resume. 
    Enrich the resume content by inferring additional details from the provided information.
    Include sections such as a personal summary, detailed work experience, skills, and educational background. Please use markdown format for the output.`,
    expectedOutput: `A professionally formatted resume in markdown format, 
    ready for submission to potential employers.`, 
    agent: resumeWriter 
});

// Create and start the team
const team = new Team({
    name: 'Resume Creation Team',
    agents: [profileAnalyst, resumeWriter],
    tasks: [processingTask, resumeCreationTask],
    inputs: { aboutMe: `My name is David Llaca. 
    JavaScript Developer for 5 years. 
    I worked for three years at Disney, 
    where I developed user interfaces for their primary landing pages
    using React, NextJS, and Redux. Before Disney, 
    I was a Junior Front-End Developer at American Airlines, 
    where I worked with Vue and Tailwind. 
    I earned a Bachelor of Science in Computer Science from FIU in 2018, 
    and I completed a JavaScript bootcamp that same year.` },
    env: {OPENAI_API_KEY: 'ENV_OPENAI_API_KEY'}
});

team.start();

🧠 Final Thoughts

Each of these frameworks has a distinct approach to multi-agent orchestration:

LangGraph.js → Precise graph-based orchestration, ideal for LangChain users
Mastra → Rapid iteration on AI pipelines, RAG-native and TypeScript friendly
OpenAI Agents JS: Traceable, tool-integrated agent workflows
KaibanJS → Role-first orchestration with Kanban clarity and dev tooling built-in

💬 What’s your preferred orchestration style?

Do you prefer graph edges, pipeline chains, or task boards? Are you already working with one of these tools—or rolling your own? I’d love to hear your approach 👇

Human in the Loop (HITL) in Multi-Agent Systems: The KaibanJS Approach

Tool Smith — Thu, 19 Jun 2025 19:52:01 +0000

Explore how KaibanJS enables dynamic, modular, and human-aware AI workflows with built-in support for Human in the Loop (HITL).

Introduction: Multi-Agent Systems and Human Oversight

The rise of multi-agent systems (MAS) — AI-powered collections of collaborating agents — is transforming how we automate complex processes. These frameworks, also known as agent orchestration tools, allow agents to delegate, validate, and complete tasks cooperatively.

Popular platforms like CrewAI, LangGraph, and KaibanJS support this collaborative design. Yet, in real-world applications, full autonomy isn't always ideal. Tasks involving ethics, compliance, or nuanced judgment demand human supervision. This is where the concept of Human in the Loop (HITL) comes into play.

What is HITL?

Human in the Loop refers to systems where human input is embedded within automated decision-making processes. In MAS, HITL empowers operators to:

Validate outputs
Request revisions
Provide ethical or domain-specific oversight

Implementation Models

Manual validation checkpoints
UI feedback panels
Task status routing
Post-completion feedback cycles

📊 Comparing HITL in Leading MAS Frameworks

Framework	HITL Support	Key Features	Notes
CrewAI	Basic (via callbacks)	Agents pause for manual checks	Callback-style validation
LangGraph	Robust (via branching)	Human-in-the-loop state transitions	Python-first, LangChain-based
KaibanJS	Native & Dynamic	HITL states, React UIs, validation & feedback tools	Modular, JS-first, designed for HITL

Introducing KaibanJS

KaibanJS is an open-source, JavaScript-based orchestration framework designed for building and visualizing multi-agent workflows. Inspired by Kanban boards, it offers:

Developer-first design with JS/TS + React
Modular architecture for agents, tools, and workflows
Visual task tracking via status columns
Full support for HITL, both mid-workflow and post-completion

HITL in Action with KaibanJS

KaibanJS implements HITL natively through a flexible state-based task system. Tasks can be flagged to require human validation before continuing. Here's how it works step-by-step:

Task Lifecycle in HITL

Task Creation: Tasks are created with the option externalValidationRequired: true.
Agent Execution: Agents move tasks from TODO to DOING, then complete the task.
Awaiting Validation: If validation is required, the task moves to AWAITING_VALIDATION instead of DONE.
Human Intervention:

A human reviewer can validate the task with validateTask(task.id), advancing it to VALIDATED, then DONE.
Alternatively, they can submit feedback using provideFeedback(task.id, "...comments..."), transitioning the task to REVISE.
1. Task Revision: Agents re-process the task, incorporating the feedback, and return it to AWAITING_VALIDATION or DONE.
2. Workflow Completion: Tasks with no validation required go directly from DOING to DONE. Once all tasks are completed, the workflow finishes.

Workflow State Transitions

Tasks move dynamically between these statuses depending on validation requirements and human feedback. Agents track the feedbackHistory, allowing transparency in decision paths:

{
  content: "Expand on competitor analysis",
  status: "PENDING",
  timestamp: "2025-06-19T14:22:00Z"
}

Sample HITL Logic in JS

team.onWorkflowStatusChange((status) => {
  if (status === 'BLOCKED') {
    const tasksAwaitingValidation = team.getTasksByStatus('AWAITING_VALIDATION');
    tasksAwaitingValidation.forEach(task => {
      team.validateTask(task.id);
    });
  }
});

Kanban-style Flow Diagram

                 +---------+
                 |   TODO  |
                 +---------+
                      |
                      v
                 +---------+
            +--->|  DOING  |
            |    +---------+
            |         |
            v         v
     +-------------+ +------------------+
     |   BLOCKED   | | AWAITING_        |
     +-------------+ | VALIDATION       |
            |        +------------------+
            |                |
            |                v
            |         +--------------+
            |         |  VALIDATED   |
            |         +--------------+
            |                |
            |                v
            +------------>+---------+
                          |   DONE  |
                          +---------+

Real-Time Feedback UI (React Example)

{tasks.filter(t => t.status === 'AWAITING_VALIDATION').map(task => (
  <div key={task.id}>
    <h3>{task.title}</h3>
    <button onClick={() => store.getState().validateTask(task.id)}>Validate</button>
    <button onClick={() => store.getState().provideFeedback(task.id, "Needs edits")}>Feedback</button>
  </div>
))}

Reactivating Workflows After Completion

KaibanJS supports feedback even after a workflow has finished. If a completed task receives feedback:

That task is reactivated and rerun
All downstream tasks depending on it are also recalculated
Previous results are considered to generate an updated outcome

This powerful mechanism ensures workflows can evolve based on new insights, without restarting everything.

When to Use HITL in KaibanJS

Use it when:

Compliance or legal checks are required
Outputs demand human judgment
You need post-analysis revisions

Avoid it when:

You need high-speed, low-risk automation
Feedback would delay rather than enrich the outcome

🎬 Watch the Demo

Video: See how KaibanJS workflows re-execute after human feedback
👉 KaibanJS HITL Feedback. Reactivating Workflows After Completion

💡 Conclusion

HITL is essential for building safe, adaptive, and accurate AI systems. With KaibanJS, it's not an afterthought — it's a core feature.

Start building agentic workflows that integrate the best of both worlds: autonomous agents and human expertise.

🔗 KaibanJS Website | 🧑‍💻 GitHub | 📚 Docs for LLMs

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

Tool Smith — Fri, 16 May 2025 13:52:37 +0000

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:

Install the MCP Adapter:

   npm install @langchain/mcp-adapters

Configure the MCP Client:

   import { MultiServerMCPClient } from "@langchain/mcp-adapters";

   const mcpClient = new MultiServerMCPClient({
     prefixToolNameWithServerName: false,
     additionalToolNamePrefix: "",
     mcpServers: {
       tavily: {
         command: "npx",
         args: ["-y", "tavily-mcp@0.2.0"],
         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
         }
       }
     }
   });

Access MCP Tools:

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

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