diff --git a/README.md b/README.md
index 325e49c..67c7990 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,47 @@
-# GenUI Widget
+# Generative UI Widget
 
-An embeddable chat widget that connects to webhook endpoints. Create beautiful chat interfaces powered by your custom workflows from n8n, Make.com, or any custom webhook provider.
+An embeddable chat widget for building Generative UI applications.
+Add buttons, forms, and charts to your existing LangGraph(/LangChain) agents and n8n workflows.
+
+[![Built with Thesys](https://thesys.dev/built-with-thesys-badge.svg)](https://thesys.dev)
 
 ## Features
 
 - 🎨 **Beautiful UI** - Clean, fullscreen chat interface
 - 🚀 **Easy Integration** - Single script tag or npm package
-- 💬 **Session Management** - Automatic session handling
-- 💾 **Persistence** - Optional localStorage support for chat history
+- 💬 **Session Management** - Automatic session handling with persistent threads
+- 💾 **Flexible Storage** - localStorage, LangGraph-managed, or in-memory
 - 🗂️ **Thread Management** - Create, switch, and delete conversation threads
 - 🌓 **Theme Support** - Light and dark mode
 - 📱 **Responsive** - Works perfectly on mobile and desktop
-- 🔌 **Provider Agnostic** - Works with n8n, Make.com, or custom webhooks
+- 🔌 **Multi-Provider** - LangGraph, n8n, Make.com, or custom webhooks
+- 🌊 **Streaming Support** - Real-time streaming responses from your backend
 
 ## Quick Start
 
-Add this script to your HTML:
+### Using LangGraph(/LangChain)
+
+```html
+<link
+  href="https://cdn.jsdelivr.net/npm/genui-widget/dist/genui-widget.css"
+  rel="stylesheet"
+/>
+
+<script type="module">
+  import { createChat } from "https://cdn.jsdelivr.net/npm/genui-widget/dist/genui-widget.es.js";
+
+  createChat({
+    langgraph: {
+      deploymentUrl: "https://your-deployment.langraph.app",
+      assistantId: "your-assistant-id",
+    },
+    storageType: "langgraph", // Use LangGraph's built-in thread management
+    agentName: "Assistant",
+  });
+</script>
+```
+
+### Using n8n or Custom Webhooks
 
 ```html
 <link
@@ -29,7 +55,9 @@ Add this script to your HTML:
   createChat({
     n8n: {
       webhookUrl: "YOUR_WEBHOOK_URL",
+      enableStreaming: true, // Optional: enable streaming responses
     },
+    storageType: "localstorage", // Persist chats locally
     agentName: "Assistant",
   });
 </script>
@@ -47,19 +75,25 @@ See Quick Start above.
 npm install genui-widget
 ```
 
-**Note:** This package requires React 18 or 19 as peer dependencies. Make sure you have React installed in your project:
-
-```bash
-npm install react react-dom
-```
-
 ```javascript
 import { createChat } from "genui-widget";
 
+// With LangGraph
+const chat = createChat({
+  langgraph: {
+    deploymentUrl: "https://your-deployment.langraph.app",
+    assistantId: "your-assistant-id",
+  },
+  storageType: "langgraph",
+});
+
+// OR with n8n/webhooks
 const chat = createChat({
   n8n: {
     webhookUrl: "YOUR_WEBHOOK_URL",
+    enableStreaming: true,
   },
+  storageType: "localstorage",
 });
 ```
 
@@ -67,24 +101,32 @@ const chat = createChat({
 
 ```javascript
 const chat = createChat({
-  // Required: Webhook configuration
+  // Provider configuration (choose one)
+  langgraph: {
+    deploymentUrl: "https://your-deployment.langraph.app",
+    assistantId: "your-assistant-id",
+  },
+  // OR
   n8n: {
     webhookUrl: "https://your-webhook-endpoint.com/chat",
-    enableStreaming: false, // Optional: Enable streaming responses
+    enableStreaming: true, // Optional: Enable streaming responses
   },
 
   // Optional settings
   agentName: "Assistant", // Bot/agent name
   logoUrl: "https://example.com/logo.png", // Logo image URL
   theme: { mode: "light" }, // 'light' or 'dark'
-  storageType: "localstorage", // 'none' or 'localstorage'
+  storageType: "langgraph", // 'none', 'localstorage', or 'langgraph'
   mode: "fullscreen", // 'fullscreen' or 'sidepanel'
   enableDebugLogging: false, // Enable console debug logging
 
-  // Optional: Callback when session starts
+  // Optional: Callbacks
   onSessionStart: (sessionId) => {
     console.log("Session started:", sessionId);
   },
+  onError: (error) => {
+    console.error("Chat error:", error);
+  },
 });
 ```
 
@@ -94,12 +136,22 @@ const chat = createChat({
 
 - Messages work normally during the session
 - All data is lost on page refresh
+- Best for: Simple use cases, demos, or privacy-focused applications
 
 **`storageType: "localstorage"`:**
 
 - Chat conversations persist across page refreshes
 - Users can create and manage multiple threads
 - Thread history is saved to browser localStorage
+- Best for: n8n/webhook integrations without built-in persistence
+
+**`storageType: "langgraph"`:**
+
+- Leverages LangGraph's built-in thread management
+- Conversations persist server-side across devices
+- Requires `langgraph` provider configuration
+- Thread operations (create, delete, update) sync with LangGraph API
+- Best for: LangGraph deployments requiring cross-device sync
 
 ### Programmatic Control
 
@@ -117,6 +169,41 @@ chat.close();
 chat.destroy();
 ```
 
+## Provider Integration
+
+### LangGraph
+
+The widget integrates seamlessly with [LangGraph](https://langchain-ai.github.io/langgraph/) deployments (Cloud or self-hosted).
+
+**Configuration:**
+
+```javascript
+createChat({
+  langgraph: {
+    deploymentUrl: "https://your-deployment.langraph.app",
+    assistantId: "your-assistant-id",
+  },
+  storageType: "langgraph", // Recommended for LangGraph
+});
+```
+
+**Features:**
+
+- ✅ **Automatic Thread Management** - Creates and manages threads via LangGraph API
+- ✅ **Server-Side Persistence** - Conversations persist across devices
+- ✅ **Streaming Support** - Real-time streaming via Server-Sent Events (SSE)
+- ✅ **Message History** - Fetches and displays conversation history
+- ✅ **Thread Operations** - Create, update, delete threads with metadata
+
+**How it works:**
+
+1. Widget calls `POST /threads` to create new conversation threads
+2. Messages sent via `POST /threads/{thread_id}/runs/stream` with streaming enabled
+3. Thread history retrieved via `GET /threads/{thread_id}/history`
+4. Thread list fetched via `POST /threads/search`
+
+The LangGraph provider automatically handles the streaming response format and extracts message content from the SSE events.
+
 ## Webhook Integration
 
 ### Request Format
@@ -154,54 +241,34 @@ Return line-delimited JSON chunks:
 
 ### n8n
 
-1. **Create a Webhook Trigger**
-
-   - Add a Webhook node to your workflow
-   - Set it to accept POST requests
-   - Note your webhook URL
-
-2. **Access the Data**
+Follow the instructions at [thesys.dev/n8n](https://thesys.dev/n8n) to quickly set up your n8n workflow.
 
-   - Message: `{{ $json.chatInput }}`
-   - Session ID: `{{ $json.sessionId }}`
-
-3. **Return a Response**
-
-   - Use "Respond to Webhook" node
-   - Return: `{ "output": "Your response" }`
-
-4. **Configure CORS**
-   - Enable Domain Allowlist in webhook settings
-   - Add your domain(s): `example.com`, `www.example.com`
-   - For local dev: `localhost`, `127.0.0.1`
-
-**Security Note:** The webhook URL is visible in the browser. Use n8n's Domain Allowlist to restrict access.
-
-### Make.com
+## Configuration Reference
 
-1. Create a scenario with a **Webhook** module
-2. Process `chatInput` and `sessionId`
-3. Add your logic (AI, database, etc.)
-4. Use **Webhook Response** to return `{ "output": "Your response" }`
+Complete list of all available options:
 
-### Custom Webhook
+### Provider Configuration
 
-Your endpoint should:
+**You must configure either `langgraph` OR `n8n` (not both):**
 
-1. Accept POST requests with JSON body
-2. Parse `chatInput` and `sessionId`
-3. Return JSON: `{ "output": "Your response" }`
+#### langgraph (optional)
 
-For streaming, return line-delimited JSON chunks.
+```typescript
+langgraph?: {
+  // Required: Your LangGraph deployment URL
+  deploymentUrl: string;
 
-## Configuration Reference
+  // Required: The assistant ID to use
+  assistantId: string;
+}
+```
 
-Complete list of all available options:
+Use this for LangGraph Cloud or self-hosted deployments. When using LangGraph, set `storageType: "langgraph"` to leverage server-side thread management.
 
-### n8n (required)
+#### n8n (optional)
 
 ```typescript
-n8n: {
+n8n?: {
   // Required: Your webhook URL
   webhookUrl: string;
 
@@ -216,6 +283,8 @@ n8n: {
 }
 ```
 
+Use this for n8n, Make.com, or any custom webhook endpoint.
+
 ### agentName (optional)
 
 ```typescript
@@ -253,13 +322,14 @@ Sets the color scheme for the chat interface.
 ### storageType (optional)
 
 ```typescript
-storageType?: 'none' | 'localstorage';  // Default: 'none'
+storageType?: 'none' | 'localstorage' | 'langgraph';  // Default: 'none'
 ```
 
 Controls chat history persistence:
 
 - `'none'` - Messages are kept in memory only, lost on page refresh
 - `'localstorage'` - Messages are saved to browser localStorage, persist across sessions
+- `'langgraph'` - Uses LangGraph's server-side thread management (requires `langgraph` provider)
 
 ### mode (optional)
 
@@ -280,25 +350,58 @@ onSessionStart?: (sessionId: string) => void;
 
 Callback function that fires when a new chat session is created. Receives the session ID as a parameter. Useful for analytics or tracking.
 
+### onError (optional)
+
+```typescript
+onError?: (error: Error) => void;
+```
+
+Callback function that fires when an error occurs during message processing. Useful for logging, analytics, or custom error handling. Note that the widget will still display error states in the chat UI automatically.
+
 ## Troubleshooting
 
 ### Chat doesn't load
 
-- Check browser console for errors
-- Verify webhook URL is correct
-- Ensure webhook endpoint is active and accessible
+- Check browser console for errors (enable `enableDebugLogging: true`)
+- Verify provider configuration is correct (LangGraph URL/assistant ID or webhook URL)
+- Ensure endpoint is active and accessible
 - Check CORS settings
 
-### "Unable to reach the webhook" error
+### Connection errors
+
+**For LangGraph:**
+
+- Verify `deploymentUrl` and `assistantId` are correct
+- Check that the LangGraph deployment is running
+- Ensure your assistant is deployed and accessible
+
+**For n8n/webhooks:**
 
 - Verify webhook URL is correct
 - Check CORS configuration
 - Ensure your domain is allowlisted (for n8n)
+- Test webhook endpoint independently
+
+### Messages not sending or displaying
 
-### Messages not sending
+**For LangGraph:**
+
+- Check that streaming is working (SSE connection)
+- Verify assistant is responding correctly
+- Check thread creation/access permissions
+
+**For n8n/webhooks:**
 
 - Verify response format: `{ "output": "message" }`
+- For streaming, ensure line-delimited JSON format
 - Check webhook execution logs
+- Enable `enableStreaming` if using streaming responses
+
+### Storage issues
+
+- If using `storageType: "langgraph"`, ensure LangGraph provider is configured
+- For localStorage, check browser storage isn't full
+- Clear localStorage if you encounter corrupted state: `localStorage.clear()`
 
 ## Requirements
 
diff --git a/index.html b/index.html
index 2c2631d..eb4dd81 100644
--- a/index.html
+++ b/index.html
@@ -5,20 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Thesys Chat Client Test</title>
   </head>
-  <body>
+  <body style="font-family: 'Inter', sans-serif;">
     <link
       href="https://cdn.jsdelivr.net/npm/genui-widget/dist/genui-widget.css"
       rel="stylesheet"
     />
 
     <script type="module">
-      import { createChat } from "https://cdn.jsdelivr.net/npm/genui-widget/dist/genui-widget.es.js";
+      import { createChat } from "./src/index.ts";
 
       const chat = createChat({
         n8n: {
           webhookUrl: "<YOUR_WEBHOOK_URL>",
           enableStreaming: true,
         },
+        langgraph: {},
         agentName: "Test Bot",
         theme: { mode: "light" },
         mode: "fullscreen", // Options: "fullscreen" (default) | "sidepanel"
@@ -26,6 +27,9 @@
         onSessionStart: (sessionId) => {
           console.log("Chat session started:", sessionId);
         },
+        onError: (error) => {
+          alert(error.message);
+        },
       });
 
       // Expose to window for testing
diff --git a/src/index.ts b/src/index.ts
index 7d0a235..00b74ae 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,15 +8,11 @@ import {
 } from "@thesysai/genui-sdk";
 import type { Thread, UserMessage } from "@crayonai/react-core";
 import "@crayonai/react-ui/styles/index.css";
-import type {
-  ChatConfig,
-  ChatInstance,
-  N8NConfig,
-  WebhookMessage,
-} from "./types";
-import { createStorageAdapter } from "./storage";
+import type { ChatConfig, ChatInstance } from "./types";
+import { createStorageAdapter, LangGraphStorageAdapter } from "./storage";
 import type { StorageAdapter } from "./storage";
-import { log, logError } from "./utils/logger";
+import { createChatProvider, type ChatProvider } from "./providers";
+import { log, handleError, normalizeError } from "./utils/logger";
 import "./styles/widget.css";
 
 /**
@@ -31,177 +27,63 @@ function generateThreadTitle(message: string): string {
   return cleaned.substring(0, maxLength) + "...";
 }
 
-/**
- * Helper function to call webhook endpoint
- * Supports n8n, Make.com, Zapier, and custom webhook providers
- */
-async function callWebhook(
-  n8nConfig: N8NConfig,
-  sessionId: string,
-  prompt: string
-): Promise<Response> {
-  const message: WebhookMessage = {
-    chatInput: prompt,
-    sessionId: sessionId,
-  };
-
-  const webhookMethod = n8nConfig.webhookConfig?.method || "POST";
-  const customHeaders = n8nConfig.webhookConfig?.headers || {};
-
-  const headers = {
-    "Content-Type": "application/json",
-    ...customHeaders,
-  };
-
-  const response = await fetch(n8nConfig.webhookUrl, {
-    method: webhookMethod,
-    headers: headers,
-    body: JSON.stringify(message),
-  });
-
-  if (!response.ok) {
-    throw new Error(`Webhook error: ${response.status} ${response.statusText}`);
-  }
-
-  // Check Content-Type to help determine how to handle the response
-  const contentType = response.headers.get("Content-Type") || "";
-  const isStreamContentType =
-    contentType.includes("text/event-stream") ||
-    contentType.includes("application/x-ndjson");
-
-  // Determine streaming behavior:
-  // - If user explicitly enabled streaming, trust that config (backend may send wrong Content-Type)
-  // - If Content-Type indicates streaming, handle as stream
-  const shouldStream = n8nConfig.enableStreaming || isStreamContentType;
-
-  // If NOT streaming, parse as JSON
-  if (!shouldStream) {
-    const clonedResponse = response.clone();
-    try {
-      const data = await clonedResponse.json();
-      // Successfully parsed JSON - return it
-      return new Response(data.output || data.message || JSON.stringify(data));
-    } catch (error) {
-      // JSON parsing failed - try to handle as stream as fallback
-      if (!response.body) {
-        throw new Error(
-          `Failed to parse response as JSON and no body available: ${error}`
-        );
-      }
-    }
-  }
-
-  // For streaming, transform line-delimited JSON format to plain text stream
-  if (!response.body) {
-    throw new Error("Response body is null");
-  }
-
-  const reader = response.body.getReader();
-  const decoder = new TextDecoder();
-
-  const stream = new ReadableStream({
-    async start(controller) {
-      let buffer = "";
-      let hasStreamedContent = false;
-
-      // Helper to extract content from various JSON formats
-      const extractContent = (data: Record<string, unknown>): string | null => {
-        // NDJSON streaming format: {"type":"item","content":"..."}
-        if (data.type === "item" && typeof data.content === "string") {
-          return data.content;
-        }
-        // Regular JSON response format: {"output":"..."} or {"message":"..."}
-        if (typeof data.output === "string") return data.output;
-        if (typeof data.message === "string") return data.message;
-        return null;
-      };
-
-      try {
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-
-          const chunk = decoder.decode(value, { stream: true });
-          buffer += chunk;
-          const lines = buffer.split("\n");
-
-          buffer = lines.pop() || "";
-
-          for (const line of lines) {
-            if (line.trim()) {
-              try {
-                const data = JSON.parse(line);
-                const content = extractContent(data);
-                if (content) {
-                  controller.enqueue(new TextEncoder().encode(content));
-                  hasStreamedContent = true;
-                }
-              } catch (e) {
-                logError("Failed to parse streaming line:", line, e);
-              }
-            }
-          }
-        }
-
-        // Process remaining buffer
-        if (buffer.trim()) {
-          try {
-            const data = JSON.parse(buffer);
-            const content = extractContent(data);
-            if (content) {
-              controller.enqueue(new TextEncoder().encode(content));
-              hasStreamedContent = true;
-            }
-          } catch (e) {
-            // Buffer might not be valid JSON - could be plain text
-            if (!hasStreamedContent) {
-              // If we haven't streamed anything, send buffer as-is
-              controller.enqueue(new TextEncoder().encode(buffer));
-            } else {
-              logError("Failed to parse final streaming data:", buffer, e);
-            }
-          }
-        }
-      } catch (error) {
-        logError("Streaming error:", error);
-        controller.error(error);
-      } finally {
-        controller.close();
-        reader.releaseLock();
-      }
-    },
-  });
-
-  return new Response(stream, {
-    headers: {
-      "Content-Type": "text/plain",
-    },
-  });
-}
-
 /**
  * React component wrapper that manages thread persistence
  */
 function ChatWithPersistence({
   config,
   storage,
+  provider,
   onSessionIdChange,
 }: {
   config: ChatConfig;
   storage: StorageAdapter;
+  provider: ChatProvider;
   onSessionIdChange: (sessionId: string | null) => void;
 }) {
   const formFactor = config.mode === "sidepanel" ? "side-panel" : "full-page";
 
+  /**
+   * Wrap an async function with error boundary handling
+   * Errors are logged and sent to onError callback in one place
+   */
+  function withErrorBoundary<T, Args extends unknown[]>(
+    fn: (...args: Args) => Promise<T>,
+    context: string,
+    options?: { fallback?: T }
+  ): (...args: Args) => Promise<T> {
+    return async (...args: Args): Promise<T> => {
+      try {
+        return await fn(...args);
+      } catch (error) {
+        const err = handleError(error, context, config.onError);
+        if (options?.fallback !== undefined) {
+          return options.fallback;
+        }
+        throw err;
+      }
+    };
+  }
+
   // Initialize thread list manager
   const threadListManager = useThreadListManager({
-    fetchThreadList: async () => {
-      return await storage.getThreadList();
-    },
-    createThread: async (firstMessage: UserMessage) => {
-      const threadId = crypto.randomUUID();
+    fetchThreadList: withErrorBoundary(
+      () => storage.getThreadList(),
+      "[Storage] fetchThreadList failed",
+      { fallback: [] }
+    ),
+    createThread: withErrorBoundary(async (firstMessage: UserMessage) => {
       const title = generateThreadTitle(firstMessage.message || "New Chat");
 
+      // Use LangGraph API to create thread if using LangGraph storage
+      if (storage instanceof LangGraphStorageAdapter) {
+        const thread = await storage.createThread(title);
+        // Note: First message will be sent via processMessage, not saved here
+        return thread;
+      }
+
+      // Default: create thread locally
+      const threadId = crypto.randomUUID();
       const thread: Thread = {
         threadId,
         title,
@@ -220,14 +102,15 @@ function ChatWithPersistence({
       await storage.saveThread(threadId, [message]);
 
       return thread;
-    },
-    deleteThread: async (threadId: string) => {
-      await storage.deleteThread(threadId);
-    },
-    updateThread: async (thread: Thread) => {
+    }, "[Storage] createThread failed"),
+    deleteThread: withErrorBoundary(
+      (threadId: string) => storage.deleteThread(threadId),
+      "[Storage] deleteThread failed"
+    ),
+    updateThread: withErrorBoundary(async (thread: Thread) => {
       await storage.updateThread(thread);
       return thread;
-    },
+    }, "[Storage] updateThread failed"),
     onSwitchToNew: () => {
       // Called when user switches to new thread
     },
@@ -240,12 +123,16 @@ function ChatWithPersistence({
   // Initialize thread manager
   const threadManager = useThreadManager({
     threadListManager,
-    loadThread: async (threadId: string) => {
-      log("[Storage] loadThread:", threadId);
-      const messages = await storage.getThread(threadId);
-      log("[Storage] Loaded", messages?.length || 0, "messages");
-      return messages || [];
-    },
+    loadThread: withErrorBoundary(
+      async (threadId: string) => {
+        log("[Storage] loadThread:", threadId);
+        const messages = await storage.getThread(threadId);
+        log("[Storage] Loaded", messages?.length || 0, "messages");
+        return messages || [];
+      },
+      "[Storage] loadThread failed",
+      { fallback: [] }
+    ),
     processMessage: async ({
       threadId,
       messages,
@@ -265,18 +152,37 @@ function ChatWithPersistence({
         config.onSessionStart?.(threadId);
       }
 
-      // Save user messages
-      await storage.saveThread(threadId, messages);
-      log("[Storage] Saved user messages");
+      const isLangGraph = storage instanceof LangGraphStorageAdapter;
+
+      // Save user messages (skip for LangGraph - messages are persisted via runs)
+      if (!isLangGraph) {
+        try {
+          await storage.saveThread(threadId, messages);
+          log("[Storage] Saved user messages");
+        } catch (error) {
+          // Log but don't notify - message can still be sent even if save fails
+          normalizeError(error, "[Storage] saveThread (user messages) failed");
+        }
+      }
 
       // Get prompt
       const lastMessage = messages[messages.length - 1];
       const prompt = lastMessage?.content || "";
 
-      // Call webhook
-      const response = await callWebhook(config.n8n, threadId, prompt);
+      // Send message via provider (wrapped with error boundary)
+      const sendMessage = withErrorBoundary(
+        () => provider.sendMessage(threadId, prompt),
+        "[Provider] sendMessage failed"
+      );
+      const response = await sendMessage();
+
+      // For LangGraph, messages are automatically persisted by the run
+      // Just return the response directly
+      if (isLangGraph) {
+        return response;
+      }
 
-      // Wrap stream to save assistant message when complete
+      // For other storage types, wrap stream to save assistant message when complete
       if (response.body) {
         const reader = response.body.getReader();
         const decoder = new TextDecoder();
@@ -300,14 +206,22 @@ function ChatWithPersistence({
                 role: "assistant",
                 content: fullContent,
               };
-              await storage.saveThread(threadId, [
-                ...messages,
-                assistantMessage,
-              ]);
-              log(
-                "[Storage] Saved assistant message, total:",
-                messages.length + 1
-              );
+              try {
+                await storage.saveThread(threadId, [
+                  ...messages,
+                  assistantMessage,
+                ]);
+                log(
+                  "[Storage] Saved assistant message, total:",
+                  messages.length + 1
+                );
+              } catch (error) {
+                // Log but don't notify - response was already streamed successfully
+                normalizeError(
+                  error,
+                  "[Storage] saveThread (assistant message) failed"
+                );
+              }
 
               controller.close();
             } catch (error) {
@@ -354,29 +268,54 @@ function ChatWithPersistence({
  * ```
  */
 export function createChat(config: ChatConfig): ChatInstance {
-  // Validate required config
-  if (!config.n8n.webhookUrl) {
-    throw new Error("n8n.webhookUrl is required");
-  }
-
-  // Set debug logging flag at window level
+  // Set debug logging flag at window level (do this early so logging works)
   if (!window.__THESYS_CHAT__) {
     window.__THESYS_CHAT__ = {};
   }
   window.__THESYS_CHAT__.enableDebugLogging =
     config.enableDebugLogging || false;
 
-  // Create storage adapter
-  const storageType = config.storageType || "none";
-  const storage = createStorageAdapter(storageType);
+  let provider: ChatProvider;
+  let storage: StorageAdapter;
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
 
-  // Create container element
-  const container = document.createElement("div");
-  container.id = "thesys-chat-root";
-  document.body.appendChild(container);
+  try {
+    // Validate required config
+    if (!config.n8n && !config.langgraph) {
+      throw new Error("n8n or langgraph configuration is required");
+    }
 
-  // Create React root
-  const root = createRoot(container);
+    log("[createChat] Initializing with config:", {
+      hasLanggraph: !!config.langgraph,
+      hasN8n: !!config.n8n,
+      storageType: config.storageType,
+    });
+
+    // Create chat provider
+    provider = createChatProvider(config);
+    log("[createChat] Created provider:", provider.name);
+
+    // Create storage adapter
+    // Auto-select "langgraph" storage when langgraph config is present (unless explicitly set)
+    const storageType =
+      config.storageType || (config.langgraph ? "langgraph" : "none");
+    storage = createStorageAdapter(storageType, config.langgraph);
+
+    // Create container element
+    container = document.createElement("div");
+    container.id = "thesys-chat-root";
+    document.body.appendChild(container);
+
+    // Create React root
+    root = createRoot(container);
+  } catch (error) {
+    throw handleError(
+      error,
+      "[createChat] Initialization failed",
+      config.onError
+    );
+  }
 
   // Track current session ID
   let currentSessionId: string | null = null;
@@ -386,6 +325,7 @@ export function createChat(config: ChatConfig): ChatInstance {
     createElement(ChatWithPersistence, {
       config,
       storage,
+      provider,
       onSessionIdChange: (sessionId: string | null) => {
         currentSessionId = sessionId;
       },
diff --git a/src/providers/ChatProvider.ts b/src/providers/ChatProvider.ts
new file mode 100644
index 0000000..d80f88c
--- /dev/null
+++ b/src/providers/ChatProvider.ts
@@ -0,0 +1,20 @@
+/**
+ * Interface for chat backend providers
+ * Implementations handle communication with different chat backends
+ * (LangGraph, n8n webhooks, Make.com, Zapier, etc.)
+ */
+export interface ChatProvider {
+  /**
+   * Unique identifier for this provider type
+   */
+  readonly name: string;
+
+  /**
+   * Send a message to the chat backend and get a streaming response
+   *
+   * @param sessionId - The thread/session ID for the conversation
+   * @param prompt - The user's message
+   * @returns A Response object with a readable stream body
+   */
+  sendMessage(sessionId: string, prompt: string): Promise<Response>;
+}
diff --git a/src/providers/LangGraphProvider.ts b/src/providers/LangGraphProvider.ts
new file mode 100644
index 0000000..17d7112
--- /dev/null
+++ b/src/providers/LangGraphProvider.ts
@@ -0,0 +1,197 @@
+import type { LangGraphConfig } from "../types";
+import type { ChatProvider } from "./ChatProvider";
+import { log, logError } from "../utils/logger";
+
+/**
+ * Chat provider for LangGraph deployments
+ * Handles streaming communication with LangGraph cloud or self-hosted deployments
+ */
+export class LangGraphProvider implements ChatProvider {
+  readonly name = "langgraph";
+
+  constructor(private readonly config: LangGraphConfig) {}
+
+  async sendMessage(sessionId: string, prompt: string): Promise<Response> {
+    const url = `${this.config.deploymentUrl}/threads/${sessionId}/runs/stream`;
+    log("[LangGraph] Sending request:", {
+      url,
+      assistantId: this.config.assistantId,
+      sessionId,
+    });
+
+    let response: Response;
+    try {
+      response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          assistant_id: this.config.assistantId,
+          input: {
+            messages: [
+              {
+                role: "human",
+                content: prompt,
+              },
+            ],
+          },
+          stream_mode: ["values", "messages-tuple", "custom"],
+          stream_subgraphs: true,
+          stream_resumable: true,
+        }),
+      });
+    } catch (error) {
+      // Network error (no internet, DNS failure, CORS, etc.)
+      const message = error instanceof Error ? error.message : "Network error";
+      logError("[LangGraph] Network error:", message);
+      throw new Error(`Failed to connect to LangGraph: ${message}`);
+    }
+
+    log("[LangGraph] Response status:", response.status, response.statusText);
+
+    if (!response.ok) {
+      // Try to get error details from response body
+      let errorMessage = `LangGraph error: ${response.status} ${response.statusText}`;
+      try {
+        const errorBody = await response.json();
+        if (errorBody.detail) {
+          errorMessage = `LangGraph error: ${errorBody.detail}`;
+        } else if (errorBody.message) {
+          errorMessage = `LangGraph error: ${errorBody.message}`;
+        }
+      } catch {
+        // Ignore JSON parsing errors, use default message
+      }
+      logError("[LangGraph] API error:", errorMessage);
+      throw new Error(errorMessage);
+    }
+
+    if (!response.body) {
+      throw new Error("Response body is null");
+    }
+
+    return this.transformStream(response);
+  }
+
+  /**
+   * Transform LangGraph streaming format to plain text stream
+   *
+   * LangGraph uses Server-Sent Events (SSE) format:
+   * - event: <event_type>
+   * - data: <json_line_1>
+   * - data: <json_line_2>
+   * - ...
+   * - id: <id>
+   * - (blank line separates events)
+   *
+   * We extract content from "messages|*" events where data[0].content contains the text.
+   */
+  private transformStream(response: Response): Response {
+    const reader = response.body!.getReader();
+    const decoder = new TextDecoder();
+
+    const stream = new ReadableStream({
+      async start(controller) {
+        let buffer = "";
+        let currentEvent = "";
+        let dataLines: string[] = [];
+        let detectedVersion: string | null = null;
+
+        // Process a complete SSE event
+        const processEvent = (eventType: string, dataLines: string[]) => {
+          // Only process messages events (streaming content)
+          if (!eventType.startsWith("messages|")) {
+            return;
+          }
+
+          try {
+            // Join all data lines (remove "data: " prefix from each)
+            const jsonStr = dataLines
+              .map((line) => {
+                if (line.startsWith("data: ")) return line.slice(6);
+                if (line.startsWith("data:")) return line.slice(5);
+                return line;
+              })
+              .join("\n");
+
+            const data = JSON.parse(jsonStr);
+
+            // Detect and log LangGraph version from metadata (data[1])
+            if (
+              !detectedVersion &&
+              Array.isArray(data) &&
+              data[1]?.langgraph_version
+            ) {
+              detectedVersion = data[1].langgraph_version;
+              log("[LangGraph] Detected version:", detectedVersion);
+            }
+
+            // data is an array: [aiMessage, metadata]
+            // aiMessage.content contains the streaming text
+            if (Array.isArray(data) && data[0]?.content) {
+              const content = data[0].content;
+              if (content) {
+                controller.enqueue(new TextEncoder().encode(content));
+              }
+            }
+          } catch (e) {
+            log("[LangGraph] Failed to parse event:", eventType, e);
+          }
+        };
+
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            const chunk = decoder.decode(value, { stream: true });
+            buffer += chunk;
+
+            // Process complete lines
+            const lines = buffer.split("\n");
+            buffer = lines.pop() || ""; // Keep incomplete line in buffer
+
+            for (const line of lines) {
+              if (line.startsWith("event: ")) {
+                // New event starting - process previous event if we have data
+                if (currentEvent && dataLines.length > 0) {
+                  processEvent(currentEvent, dataLines);
+                }
+                currentEvent = line.slice(7).trim();
+                dataLines = [];
+              } else if (line.startsWith("data:")) {
+                dataLines.push(line);
+              } else if (line.startsWith("id:")) {
+                // End of event block - process it
+                if (currentEvent && dataLines.length > 0) {
+                  processEvent(currentEvent, dataLines);
+                }
+                currentEvent = "";
+                dataLines = [];
+              }
+              // Ignore blank lines and other content
+            }
+          }
+
+          // Process any remaining event
+          if (currentEvent && dataLines.length > 0) {
+            processEvent(currentEvent, dataLines);
+          }
+        } catch (error) {
+          logError("[LangGraph] Streaming error:", error);
+          controller.error(error);
+        } finally {
+          controller.close();
+          reader.releaseLock();
+        }
+      },
+    });
+
+    return new Response(stream, {
+      headers: {
+        "Content-Type": "text/plain",
+      },
+    });
+  }
+}
diff --git a/src/providers/N8NProvider.ts b/src/providers/N8NProvider.ts
new file mode 100644
index 0000000..f92b24e
--- /dev/null
+++ b/src/providers/N8NProvider.ts
@@ -0,0 +1,191 @@
+import type { N8NConfig, WebhookMessage } from "../types";
+import type { ChatProvider } from "./ChatProvider";
+import { log, logError } from "../utils/logger";
+
+/**
+ * Chat provider for n8n webhook-based backends
+ * Supports n8n workflows with webhook triggers
+ */
+export class N8NProvider implements ChatProvider {
+  readonly name = "n8n";
+
+  constructor(private readonly config: N8NConfig) {}
+
+  async sendMessage(sessionId: string, prompt: string): Promise<Response> {
+    const message: WebhookMessage = {
+      chatInput: prompt,
+      sessionId: sessionId,
+    };
+
+    const webhookMethod = this.config.webhookConfig?.method || "POST";
+    const customHeaders = this.config.webhookConfig?.headers || {};
+
+    const headers = {
+      "Content-Type": "application/json",
+      ...customHeaders,
+    };
+
+    log("[Webhook] Sending request:", {
+      url: this.config.webhookUrl,
+      method: webhookMethod,
+      sessionId,
+    });
+
+    let response: Response;
+    try {
+      response = await fetch(this.config.webhookUrl, {
+        method: webhookMethod,
+        headers: headers,
+        body: JSON.stringify(message),
+      });
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Network error";
+      logError("[Webhook] Network error:", errorMessage);
+      throw new Error(`Failed to connect to webhook: ${errorMessage}`);
+    }
+
+    log("[Webhook] Response status:", response.status, response.statusText);
+
+    if (!response.ok) {
+      const errorMessage = `Webhook error: ${response.status} ${response.statusText}`;
+      logError("[Webhook] API error:", errorMessage);
+      throw new Error(errorMessage);
+    }
+
+    // Check Content-Type to help determine how to handle the response
+    const contentType = response.headers.get("Content-Type") || "";
+    const isStreamContentType =
+      contentType.includes("text/event-stream") ||
+      contentType.includes("application/x-ndjson");
+
+    // Determine streaming behavior:
+    // - If user explicitly enabled streaming, trust that config (backend may send wrong Content-Type)
+    // - If Content-Type indicates streaming, handle as stream
+    const shouldStream = this.config.enableStreaming || isStreamContentType;
+
+    // If NOT streaming, parse as JSON
+    if (!shouldStream) {
+      const clonedResponse = response.clone();
+      try {
+        const data = await clonedResponse.json();
+        log("[Webhook] Parsed JSON response");
+        // Successfully parsed JSON - return it
+        return new Response(
+          data.output || data.message || JSON.stringify(data)
+        );
+      } catch (error) {
+        // JSON parsing failed - try to handle as stream as fallback
+        if (!response.body) {
+          throw new Error(
+            `Failed to parse response as JSON and no body available: ${error}`
+          );
+        }
+        log("[Webhook] JSON parse failed, falling back to stream");
+      }
+    }
+
+    // For streaming, transform line-delimited JSON format to plain text stream
+    if (!response.body) {
+      throw new Error("Response body is null");
+    }
+
+    return this.transformStream(response);
+  }
+
+  /**
+   * Transform webhook streaming format (NDJSON) to plain text stream
+   */
+  private transformStream(response: Response): Response {
+    const reader = response.body!.getReader();
+    const decoder = new TextDecoder();
+
+    const stream = new ReadableStream({
+      async start(controller) {
+        let buffer = "";
+        let hasStreamedContent = false;
+
+        // Helper to extract content from various JSON formats
+        const extractContent = (
+          data: Record<string, unknown>
+        ): string | null => {
+          // NDJSON streaming format: {"type":"item","content":"..."}
+          if (data.type === "item" && typeof data.content === "string") {
+            return data.content;
+          }
+          // Regular JSON response format: {"output":"..."} or {"message":"..."}
+          if (typeof data.output === "string") return data.output;
+          if (typeof data.message === "string") return data.message;
+          return null;
+        };
+
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            const chunk = decoder.decode(value, { stream: true });
+            buffer += chunk;
+            const lines = buffer.split("\n");
+
+            buffer = lines.pop() || "";
+
+            for (const line of lines) {
+              if (line.trim()) {
+                try {
+                  const data = JSON.parse(line);
+                  const content = extractContent(data);
+                  if (content) {
+                    controller.enqueue(new TextEncoder().encode(content));
+                    hasStreamedContent = true;
+                  }
+                } catch (e) {
+                  logError(
+                    "[Webhook] Failed to parse streaming line:",
+                    line,
+                    e
+                  );
+                }
+              }
+            }
+          }
+
+          // Process remaining buffer
+          if (buffer.trim()) {
+            try {
+              const data = JSON.parse(buffer);
+              const content = extractContent(data);
+              if (content) {
+                controller.enqueue(new TextEncoder().encode(content));
+                hasStreamedContent = true;
+              }
+            } catch (e) {
+              // Buffer might not be valid JSON - could be plain text
+              if (!hasStreamedContent) {
+                controller.enqueue(new TextEncoder().encode(buffer));
+              } else {
+                logError(
+                  "[Webhook] Failed to parse final streaming data:",
+                  buffer,
+                  e
+                );
+              }
+            }
+          }
+        } catch (error) {
+          logError("[Webhook] Streaming error:", error);
+          controller.error(error);
+        } finally {
+          controller.close();
+          reader.releaseLock();
+        }
+      },
+    });
+
+    return new Response(stream, {
+      headers: {
+        "Content-Type": "text/plain",
+      },
+    });
+  }
+}
diff --git a/src/providers/WebhookProvider.ts b/src/providers/WebhookProvider.ts
new file mode 100644
index 0000000..f92b24e
--- /dev/null
+++ b/src/providers/WebhookProvider.ts
@@ -0,0 +1,191 @@
+import type { N8NConfig, WebhookMessage } from "../types";
+import type { ChatProvider } from "./ChatProvider";
+import { log, logError } from "../utils/logger";
+
+/**
+ * Chat provider for n8n webhook-based backends
+ * Supports n8n workflows with webhook triggers
+ */
+export class N8NProvider implements ChatProvider {
+  readonly name = "n8n";
+
+  constructor(private readonly config: N8NConfig) {}
+
+  async sendMessage(sessionId: string, prompt: string): Promise<Response> {
+    const message: WebhookMessage = {
+      chatInput: prompt,
+      sessionId: sessionId,
+    };
+
+    const webhookMethod = this.config.webhookConfig?.method || "POST";
+    const customHeaders = this.config.webhookConfig?.headers || {};
+
+    const headers = {
+      "Content-Type": "application/json",
+      ...customHeaders,
+    };
+
+    log("[Webhook] Sending request:", {
+      url: this.config.webhookUrl,
+      method: webhookMethod,
+      sessionId,
+    });
+
+    let response: Response;
+    try {
+      response = await fetch(this.config.webhookUrl, {
+        method: webhookMethod,
+        headers: headers,
+        body: JSON.stringify(message),
+      });
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Network error";
+      logError("[Webhook] Network error:", errorMessage);
+      throw new Error(`Failed to connect to webhook: ${errorMessage}`);
+    }
+
+    log("[Webhook] Response status:", response.status, response.statusText);
+
+    if (!response.ok) {
+      const errorMessage = `Webhook error: ${response.status} ${response.statusText}`;
+      logError("[Webhook] API error:", errorMessage);
+      throw new Error(errorMessage);
+    }
+
+    // Check Content-Type to help determine how to handle the response
+    const contentType = response.headers.get("Content-Type") || "";
+    const isStreamContentType =
+      contentType.includes("text/event-stream") ||
+      contentType.includes("application/x-ndjson");
+
+    // Determine streaming behavior:
+    // - If user explicitly enabled streaming, trust that config (backend may send wrong Content-Type)
+    // - If Content-Type indicates streaming, handle as stream
+    const shouldStream = this.config.enableStreaming || isStreamContentType;
+
+    // If NOT streaming, parse as JSON
+    if (!shouldStream) {
+      const clonedResponse = response.clone();
+      try {
+        const data = await clonedResponse.json();
+        log("[Webhook] Parsed JSON response");
+        // Successfully parsed JSON - return it
+        return new Response(
+          data.output || data.message || JSON.stringify(data)
+        );
+      } catch (error) {
+        // JSON parsing failed - try to handle as stream as fallback
+        if (!response.body) {
+          throw new Error(
+            `Failed to parse response as JSON and no body available: ${error}`
+          );
+        }
+        log("[Webhook] JSON parse failed, falling back to stream");
+      }
+    }
+
+    // For streaming, transform line-delimited JSON format to plain text stream
+    if (!response.body) {
+      throw new Error("Response body is null");
+    }
+
+    return this.transformStream(response);
+  }
+
+  /**
+   * Transform webhook streaming format (NDJSON) to plain text stream
+   */
+  private transformStream(response: Response): Response {
+    const reader = response.body!.getReader();
+    const decoder = new TextDecoder();
+
+    const stream = new ReadableStream({
+      async start(controller) {
+        let buffer = "";
+        let hasStreamedContent = false;
+
+        // Helper to extract content from various JSON formats
+        const extractContent = (
+          data: Record<string, unknown>
+        ): string | null => {
+          // NDJSON streaming format: {"type":"item","content":"..."}
+          if (data.type === "item" && typeof data.content === "string") {
+            return data.content;
+          }
+          // Regular JSON response format: {"output":"..."} or {"message":"..."}
+          if (typeof data.output === "string") return data.output;
+          if (typeof data.message === "string") return data.message;
+          return null;
+        };
+
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            const chunk = decoder.decode(value, { stream: true });
+            buffer += chunk;
+            const lines = buffer.split("\n");
+
+            buffer = lines.pop() || "";
+
+            for (const line of lines) {
+              if (line.trim()) {
+                try {
+                  const data = JSON.parse(line);
+                  const content = extractContent(data);
+                  if (content) {
+                    controller.enqueue(new TextEncoder().encode(content));
+                    hasStreamedContent = true;
+                  }
+                } catch (e) {
+                  logError(
+                    "[Webhook] Failed to parse streaming line:",
+                    line,
+                    e
+                  );
+                }
+              }
+            }
+          }
+
+          // Process remaining buffer
+          if (buffer.trim()) {
+            try {
+              const data = JSON.parse(buffer);
+              const content = extractContent(data);
+              if (content) {
+                controller.enqueue(new TextEncoder().encode(content));
+                hasStreamedContent = true;
+              }
+            } catch (e) {
+              // Buffer might not be valid JSON - could be plain text
+              if (!hasStreamedContent) {
+                controller.enqueue(new TextEncoder().encode(buffer));
+              } else {
+                logError(
+                  "[Webhook] Failed to parse final streaming data:",
+                  buffer,
+                  e
+                );
+              }
+            }
+          }
+        } catch (error) {
+          logError("[Webhook] Streaming error:", error);
+          controller.error(error);
+        } finally {
+          controller.close();
+          reader.releaseLock();
+        }
+      },
+    });
+
+    return new Response(stream, {
+      headers: {
+        "Content-Type": "text/plain",
+      },
+    });
+  }
+}
diff --git a/src/providers/index.ts b/src/providers/index.ts
new file mode 100644
index 0000000..d432027
--- /dev/null
+++ b/src/providers/index.ts
@@ -0,0 +1,30 @@
+import type { ChatConfig } from "../types";
+import type { ChatProvider } from "./ChatProvider";
+import { LangGraphProvider } from "./LangGraphProvider";
+import { N8NProvider } from "./N8NProvider";
+
+export type { ChatProvider } from "./ChatProvider";
+export { LangGraphProvider } from "./LangGraphProvider";
+export { N8NProvider } from "./N8NProvider";
+
+/**
+ * Create a chat provider based on the configuration
+ * Automatically selects LangGraph or Webhook provider based on config
+ *
+ * @param config - The chat configuration
+ * @returns A ChatProvider instance
+ * @throws Error if no valid provider configuration is found
+ */
+export function createChatProvider(config: ChatConfig): ChatProvider {
+  if (config.langgraph?.deploymentUrl) {
+    return new LangGraphProvider(config.langgraph);
+  }
+
+  if (config.n8n?.webhookUrl) {
+    return new N8NProvider(config.n8n);
+  }
+
+  throw new Error(
+    "No valid provider configuration found. Provide either langgraph or n8n config."
+  );
+}
diff --git a/src/storage/LangGraphStorageAdapter.ts b/src/storage/LangGraphStorageAdapter.ts
new file mode 100644
index 0000000..071185b
--- /dev/null
+++ b/src/storage/LangGraphStorageAdapter.ts
@@ -0,0 +1,231 @@
+import type { Message } from "@thesysai/genui-sdk";
+import type { Thread } from "@crayonai/react-core";
+import type { StorageAdapter } from "./StorageAdapter";
+import { log, logError } from "../utils/logger";
+
+/**
+ * LangGraph API response types
+ */
+interface LangGraphThread {
+  thread_id: string;
+  created_at: string;
+  updated_at: string;
+  metadata: Record<string, unknown>;
+}
+
+interface LangGraphMessage {
+  type: string;
+  id: string;
+  content: string | { type: string; text?: string }[];
+}
+
+interface LangGraphHistoryEntry {
+  values: {
+    messages?: LangGraphMessage[];
+  };
+}
+
+/**
+ * Storage adapter that integrates with LangGraph's thread management APIs.
+ *
+ * LangGraph automatically persists messages as part of runs, so saveThread
+ * and saveThreadList are no-ops.
+ */
+export class LangGraphStorageAdapter implements StorageAdapter {
+  constructor(private deploymentUrl: string) {}
+
+  /**
+   * Fetch all threads from LangGraph
+   * GET /threads
+   */
+  async getThreadList(): Promise<Thread[]> {
+    try {
+      const res = await fetch(`${this.deploymentUrl}/threads/search`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({}),
+      });
+
+      if (!res.ok) {
+        throw new Error(`Failed to fetch threads: ${res.status}`);
+      }
+
+      const threads: LangGraphThread[] = await res.json();
+      log("[LangGraph] Fetched threads:", threads.length);
+
+      return threads.map((t) => ({
+        threadId: t.thread_id,
+        title: (t.metadata?.title as string) || "New Chat",
+        createdAt: new Date(t.created_at),
+        isRunning: false,
+      }));
+    } catch (error) {
+      logError("[LangGraph] Error fetching thread list:", error);
+      return [];
+    }
+  }
+
+  /**
+   * Get messages for a specific thread
+   * GET /threads/{thread_id}/history
+   */
+  async getThread(threadId: string): Promise<Message[] | null> {
+    try {
+      const res = await fetch(
+        `${this.deploymentUrl}/threads/${threadId}/history`,
+        {
+          method: "GET",
+          headers: { "Content-Type": "application/json" },
+        }
+      );
+
+      if (!res.ok) {
+        if (res.status === 404) {
+          return null;
+        }
+        throw new Error(`Failed to fetch thread: ${res.status}`);
+      }
+
+      const history: LangGraphHistoryEntry[] = await res.json();
+      log("[LangGraph] Fetched history for thread:", threadId);
+
+      // Get the latest state (first entry has most recent messages)
+      const latestEntry = history[0];
+      if (!latestEntry?.values?.messages) {
+        return [];
+      }
+
+      return latestEntry.values.messages.map((msg) => ({
+        id: msg.id,
+        role: this.mapMessageType(msg.type),
+        content: this.extractContent(msg.content),
+      }));
+    } catch (error) {
+      logError("[LangGraph] Error fetching thread:", error);
+      return null;
+    }
+  }
+
+  /**
+   * No-op - LangGraph manages thread list automatically
+   */
+  async saveThreadList(_threads: Thread[]): Promise<void> {
+    // No-op: LangGraph manages thread list through thread creation/deletion
+  }
+
+  /**
+   * No-op - LangGraph persists messages as part of runs
+   */
+  async saveThread(_threadId: string, _messages: Message[]): Promise<void> {
+    // No-op: LangGraph automatically persists messages during /runs/stream
+  }
+
+  /**
+   * Delete a thread
+   * DELETE /threads/{thread_id}
+   */
+  async deleteThread(threadId: string): Promise<void> {
+    try {
+      const res = await fetch(`${this.deploymentUrl}/threads/${threadId}`, {
+        method: "DELETE",
+      });
+
+      if (!res.ok && res.status !== 404) {
+        throw new Error(`Failed to delete thread: ${res.status}`);
+      }
+
+      log("[LangGraph] Deleted thread:", threadId);
+    } catch (error) {
+      logError("[LangGraph] Error deleting thread:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * Update thread metadata (e.g., title)
+   * PATCH /threads/{thread_id}
+   */
+  async updateThread(thread: Thread): Promise<void> {
+    try {
+      const res = await fetch(
+        `${this.deploymentUrl}/threads/${thread.threadId}`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            metadata: { title: thread.title },
+          }),
+        }
+      );
+
+      if (!res.ok) {
+        throw new Error(`Failed to update thread: ${res.status}`);
+      }
+
+      log("[LangGraph] Updated thread:", thread.threadId);
+    } catch (error) {
+      logError("[LangGraph] Error updating thread:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * Create a new thread in LangGraph
+   * POST /threads
+   *
+   * Note: This is called from the threadListManager, not the StorageAdapter interface
+   */
+  async createThread(title: string): Promise<Thread> {
+    const res = await fetch(`${this.deploymentUrl}/threads`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        metadata: { title },
+      }),
+    });
+
+    if (!res.ok) {
+      throw new Error(`Failed to create thread: ${res.status}`);
+    }
+
+    const data: LangGraphThread = await res.json();
+    log("[LangGraph] Created thread:", data.thread_id);
+
+    return {
+      threadId: data.thread_id,
+      title: (data.metadata?.title as string) || title,
+      createdAt: new Date(data.created_at),
+      isRunning: false,
+    };
+  }
+
+  /**
+   * Map LangGraph message type to role
+   */
+  private mapMessageType(type: string): "user" | "assistant" {
+    switch (type) {
+      case "human":
+        return "user";
+      case "ai":
+      case "system":
+      default:
+        return "assistant";
+    }
+  }
+
+  /**
+   * Extract text content from LangGraph message content
+   */
+  private extractContent(
+    content: string | { type: string; text?: string }[]
+  ): string {
+    if (typeof content === "string") {
+      return content;
+    }
+    // Handle array of content blocks (e.g., [{ type: "text", text: "..." }])
+    return content
+      .filter((block) => block.type === "text" && block.text)
+      .map((block) => block.text)
+      .join("");
+  }
+}
diff --git a/src/storage/index.ts b/src/storage/index.ts
index 6fbefcd..b4129d4 100644
--- a/src/storage/index.ts
+++ b/src/storage/index.ts
@@ -1,20 +1,32 @@
 import type { StorageAdapter } from "./StorageAdapter";
+import type { LangGraphConfig } from "../types";
 import { LocalStorageAdapter } from "./LocalStorageAdapter";
 import { NoOpStorageAdapter } from "./NoOpStorageAdapter";
+import { LangGraphStorageAdapter } from "./LangGraphStorageAdapter";
 
 export type { StorageAdapter } from "./StorageAdapter";
 export { LocalStorageAdapter } from "./LocalStorageAdapter";
 export { NoOpStorageAdapter } from "./NoOpStorageAdapter";
+export { LangGraphStorageAdapter } from "./LangGraphStorageAdapter";
 
 /**
  * Factory function to create a storage adapter based on the storage type
  * @param type - The type of storage to use
+ * @param langgraphConfig - LangGraph configuration (required when type is "langgraph")
  * @returns An instance of the appropriate StorageAdapter
  */
 export function createStorageAdapter(
-  type: "none" | "localstorage"
+  type: "none" | "localstorage" | "langgraph",
+  langgraphConfig?: LangGraphConfig
 ): StorageAdapter {
   switch (type) {
+    case "langgraph":
+      if (!langgraphConfig?.deploymentUrl) {
+        throw new Error(
+          "LangGraph deploymentUrl is required when using langgraph storage"
+        );
+      }
+      return new LangGraphStorageAdapter(langgraphConfig.deploymentUrl);
     case "localstorage":
       return new LocalStorageAdapter();
     case "none":
diff --git a/src/types.ts b/src/types.ts
index 4c6dc86..ac85ba4 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,7 +1,21 @@
 /**
  * Storage type for persisting chat data
  */
-export type StorageType = "none" | "localstorage";
+export type StorageType = "none" | "localstorage" | "langgraph";
+
+/**
+ * LangGraph specific configuration
+ */
+export interface LangGraphConfig {
+  /**
+   * The LangGraph deployment URL to use
+   */
+  deploymentUrl: string;
+  /**
+   * The LangGraph assistant ID to use
+   */
+  assistantId: string;
+}
 
 /**
  * n8n/webhook specific configuration
@@ -33,10 +47,15 @@ export interface N8NConfig {
  * Configuration options for the chat widget
  */
 export interface ChatConfig {
+  /**
+   * LangGraph configuration
+   */
+  langgraph?: LangGraphConfig;
+
   /**
    * n8n webhook configuration
    */
-  n8n: N8NConfig;
+  n8n?: N8NConfig;
 
   /**
    * Callback fired when a session starts
@@ -44,6 +63,13 @@ export interface ChatConfig {
    */
   onSessionStart?: (sessionId: string) => void;
 
+  /**
+   * Callback fired when an error occurs during message processing
+   * Useful for logging, analytics, or custom error UI
+   * Note: The SDK will still display error states in the chat UI
+   */
+  onError?: (error: Error) => void;
+
   /**
    * Theme configuration
    */
diff --git a/src/utils/logger.ts b/src/utils/logger.ts
index b307e82..69fb984 100644
--- a/src/utils/logger.ts
+++ b/src/utils/logger.ts
@@ -21,15 +21,57 @@ function isDebugEnabled(): boolean {
  */
 export function log(...args: unknown[]): void {
   if (isDebugEnabled()) {
-    console.log(...args);
+    console.log("[ThesysChat]", ...args);
   }
 }
 
 /**
- * Log an error to console if debug logging is enabled
+ * Log an error to console (always shown, not gated by debug flag)
+ * Errors are important enough to always be visible
  */
 export function logError(...args: unknown[]): void {
+  console.error("[ThesysChat]", ...args);
+}
+
+/**
+ * Log a warning to console if debug logging is enabled
+ */
+export function logWarn(...args: unknown[]): void {
   if (isDebugEnabled()) {
-    console.error(...args);
+    console.warn("[ThesysChat]", ...args);
   }
 }
+
+/**
+ * Normalize an error to an Error instance and log it
+ * Use this for internal logging without notifying consumers
+ *
+ * @param error - The caught error (unknown type)
+ * @param context - Description of where the error occurred
+ * @returns The normalized Error object
+ */
+export function normalizeError(error: unknown, context: string): Error {
+  const err = error instanceof Error ? error : new Error(String(error));
+  logError(`${context}:`, err.message);
+  return err;
+}
+
+/**
+ * Handle an error at a boundary: normalize, log, and notify consumer
+ * Only call this at top-level boundaries (SDK callbacks, initialization)
+ * Inner code should just throw - don't call this in nested handlers
+ *
+ * @param error - The caught error (unknown type)
+ * @param context - Description of where the error occurred
+ * @param onError - Callback to notify consumers
+ * @returns The normalized Error object for re-throwing
+ */
+export function handleError(
+  error: unknown,
+  context: string,
+  onError?: (error: Error) => void
+): Error {
+  const err = normalizeError(error, context);
+  onError?.(err);
+  return err;
+}