Advanced Usage: Creating a Chat Store

For more control or for using the SDK without framework-specific bindings, you can create a reactive store directly using createChatStore.

Creating a Store

You can define a global store instance that can be imported anywhere in your application.

import { createChatStore } from '@langgraph-js/sdk';

export const globalChatStore = createChatStore(
    'agent', // The default agent ID
    {
        // Custom LangGraph backend URL
        apiUrl: 'http://localhost:8123',

        // Custom headers (e.g., for authentication)
        defaultHeaders: {
            Authorization: 'Bearer token...',
        },

        // Advanced caller options
        callerOptions: {
            // Example: including credentials (cookies) with requests
            // fetch(url: string, options: RequestInit) {
            //     options.credentials = "include";
            //     return fetch(url, options);
            // },
        },
    },
    {
        // Initialization callback
        onInit(client) {
            // Example: bind tools or perform initial setup
            // client.tools.bindTools([...]);
        },
    },
);

Using the Store

The store is a Nano Stores instance. You can subscribe to changes or use it directly.

// Subscribe to changes
globalChatStore.subscribe((state) => {
    console.log('New messages:', state.messages);
});

// Send a message
await globalChatStore.sendMessage('Hello world');

Edit page

SolidJS Integration Database