The UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces
npm install @langgraph-js/sdk> The missing UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces
Building AI agent applications is complex, especially when you need to bridge the gap between LangGraph agents and interactive user interfaces. This SDK solves the critical challenges of frontend integration:
- Provides a complete UI integration layer - no more complex custom code to handle tools, streaming, and state management
- Simplifies human-in-the-loop interactions - easily incorporate user feedback within agent workflows
- Handles edge cases automatically - interruptions, errors, token management and more
- Offers a rich set of UI components - ready-to-use elements to display agent interactions
``bashUsing npm
npm install @langgraph-js/sdk
Key Features
$3
- ✅ Custom Tool Messages
- ✅ Token Counter
- ✅ Stop Graph Progress
- ✅ Interrupt Handling
- ✅ Error Handling
- ✅ Spend Time Tracking
- ✅ Time Persistence
$3
- ✅ Definition of Union Tools
- ✅ Frontend Functions As Tools
- ✅ Human-in-the-Loop Interaction
- ✅ Interrupt Mode
$3
- ✅ Cookie-Based Authentication
- ✅ Custom Token Authentication
$3
- ✅ Read History from LangGraph
Legacy Mode
Legacy mode is designed to be compatible with environments that don't support
AsyncGeneratorFunction (such as WeChat Mini Programs). In these environments, standard async iterators may not work properly.$3
`typescript
import { TestLangGraphChat, createChatStore, createLowerJSClient } from "@langgraph-js/sdk";const client = await createLowerJSClient({
apiUrl: "http://localhost:8123",
defaultHeaders: {
Authorization: "Bearer 123",
},
});
createChatStore(
"graph",
{
defaultHeaders: {
Authorization: "Bearer 123",
},
client,
legacyMode: true,
},
{}
);
`Advanced Usage
$3
You can easily create a reactive store for your LangGraph client:
`typescript
import { createChatStore } from "@langgraph-js/sdk";export const globalChatStore = createChatStore(
"agent",
{
// Custom LangGraph backend interaction
apiUrl: "http://localhost:8123",
// Custom headers for authentication
defaultHeaders: JSON.parse(localStorage.getItem("code") || "{}"),
callerOptions: {
// Example for including cookies
// fetch(url: string, options: RequestInit) {
// options.credentials = "include";
// return fetch(url, options);
// },
},
},
{
onInit(client) {
client.tools.bindTools([]);
},
}
);
`$3
First, install the nanostores React integration:
`bash
pnpm i @nanostores/react
`Then use the ChatProvider in your components:
`tsx
import { ChatProvider, useChat } from "@langgraph-js/sdk/react";
`Use it in your components:
`tsx
export const MyChat = () => {
return (
defaultAgent="agent"
apiUrl="http://localhost:8123"
defaultHeaders={{}}
withCredentials={false}
showHistory={true}
showGraph={false}
onInitError={(error, currentAgent) => {
console.error(Failed to initialize ${currentAgent}:, error);
// Handle initialization error
}}
>
);
};function ChatComp() {
const chat = useChat();
// Use chat store methods and state here
}
`$3
First, install the nanostores Vue integration:
`bash
pnpm i @nanostores/vue
`Then use the ChatProvider in your components:
`typescript
import { ChatProvider, useChat, useChatProvider } from "@langgraph-js/sdk/vue";
`#### Option 1: Using ChatProvider Component
Use it in your components:
`vue
:default-agent="'agent'"
:api-url="'http://localhost:8123'"
:default-headers="{}"
:with-credentials="false"
:show-history="true"
:show-graph="false"
:on-init-error="
(error, currentAgent) => {
console.error(Failed to initialize ${currentAgent}:, error);
// Handle initialization error
}
"
>
`#### Option 2: Using useChatProvider Hook Directly
For more flexibility, you can use the hook directly in your setup:
`vue
``For complete documentation, visit our official docs.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the Apache-2.0 License.