Skip to main content
Supported Regions:上海

LangChain TS Adapter

Enable LangChain Agent to support the AG-UI Protocol.

What is AG-UI?​

AG-UI is an open, lightweight, event-based protocol for standardizing interactions between AI Agents and user interfaces. It enables Agents to:

  • Real-time streaming conversations
  • Bidirectional state synchronization
  • Frontend tool integration (Client Tools)
  • Human-in-the-loop collaboration

What does this package solve?​

  • Enable LangChain Agent to support AG-UI protocol: Adapts the Agent created by LangChain's createAgent() to be AG-UI compatible
  • Client tool support: Provides clientTools() middleware, allowing the frontend to dynamically inject tools into Agent calls

Used Together With​

PackagePurpose
@cloudbase/agent-serverDeploy Agent as an AG-UI compatible HTTP service
langchainLangChain Agent framework
@langchain/openaiOpenAI compatible model integration
@langchain/langgraphAgent session memory (MemorySaver)

Architecture Diagram​

Installation​

pnpm add @cloudbase/agent-adapter-langchain @cloudbase/agent-server langchain @langchain/openai @langchain/langgraph

Quick Start​

1. Create LangChain Agent​

// agent.ts
import { createAgent as createLangchainAgent } from "langchain";
import { MemorySaver } from "@langchain/langgraph";
import { ChatOpenAI } from "@langchain/openai";
import { clientTools } from "@cloudbase/agent-adapter-langchain";

const checkpointer = new MemorySaver();

export function createAgent() {
  // Configure the model
  const model = new ChatOpenAI({
    model: process.env.OPENAI_MODEL!,
    apiKey: process.env.OPENAI_API_KEY!,
    configuration: {
      baseURL: process.env.OPENAI_BASE_URL!,
    },
  });

  // Create Agent with clientTools middleware to support client tools
  return createLangchainAgent({
    model,
    checkpointer,
    middleware: [clientTools()],
  });
}

2. Wrap and Deploy as HTTP Service​

// index.ts
import { createExpressRoutes } from "@cloudbase/agent-server";
import { LangchainAgent } from "@cloudbase/agent-adapter-langchain";
import { createAgent as createLangchainAgent } from "./agent.js";
import express from "express";

function createAgent() {
  const lcAgent = createLangchainAgent();

  return {
    agent: new LangchainAgent({
      agent: lcAgent,
    }),
  };
}

const app = express();

createExpressRoutes({
  createAgent,
  express: app,
});

app.listen(9000, () => console.log("Listening on 9000!"));

3. Configure Environment Variables​

Create a .env file:

OPENAI_API_KEY=your-deepseek-api-key
OPENAI_BASE_URL=https://api.deepseek.com/v1
OPENAI_MODEL=deepseek-chat

4. Start the Service​

npx tsx src/index.ts

For complete project configuration (tsconfig.json, package.json, etc.), please refer to the example project.

API Reference​

LangchainAgent​

Wraps a LangChain Agent as an AG-UI compatible Agent, making it deployable through @cloudbase/agent-server.

import { LangchainAgent } from "@cloudbase/agent-adapter-langchain";

const agent = new LangchainAgent({
  agent: lcAgent,  // LangChain Agent returned by createAgent()
});

Constructor Parameters:

ParameterTypeDescription
agentReturnType<typeof createAgent>Return value of LangChain's createAgent()

clientTools()​

Creates middleware that allows the client to dynamically inject tools into Agent calls.

import { clientTools } from "@cloudbase/agent-adapter-langchain";

const agent = createAgent({
  model,
  checkpointer,
  middleware: [clientTools()],
});

Purpose:

  • Allows frontend clients to define tools and dynamically pass them to the Agent during calls
  • The Agent merges client tools with server-side tools for use