integrate-sdk 0.5.5 → 0.5.6

package/dist/react.js

@@ -11,18 +11,15 @@ var __export = (target, all) => {
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 
 // src/react/hooks.ts
-import { useState, useEffect, useMemo, useCallback } from "react";
+import { useState, useEffect } from "react";
 function getSafeFallback() {
   return {
     tokens: {},
-    headers: {},
-    isLoading: false,
-    fetch: globalThis.fetch?.bind(globalThis) || (async () => new Response),
-    mergeHeaders: (existingHeaders) => new Headers(existingHeaders)
+    isLoading: false
   };
 }
 function isReactHooksAvailable() {
-  if (!useState || !useEffect || !useMemo || !useCallback) {
+  if (!useState || !useEffect) {
     return false;
   }
   if (typeof window === "undefined") {
@@ -82,39 +79,83 @@ function useIntegrateTokens(client) {
       return;
     }
   }, [client]);
-  const headers = useMemo(() => {
-    if (Object.keys(tokens).length === 0) {
-      return {};
-    }
-    return {
-      "x-integrate-tokens": JSON.stringify(tokens)
-    };
-  }, [tokens]);
-  const fetchWithHeaders = useCallback(async (input, init) => {
-    const mergedHeaders = new Headers(init?.headers);
-    if (headers["x-integrate-tokens"]) {
-      mergedHeaders.set("x-integrate-tokens", headers["x-integrate-tokens"]);
-    }
-    return fetch(input, {
-      ...init,
-      headers: mergedHeaders
-    });
-  }, [headers]);
-  const mergeHeaders = useCallback((existingHeaders) => {
-    const merged = new Headers(existingHeaders);
-    if (headers["x-integrate-tokens"]) {
-      merged.set("x-integrate-tokens", headers["x-integrate-tokens"]);
-    }
-    return merged;
-  }, [headers]);
   return {
     tokens,
-    headers,
-    isLoading,
-    fetch: fetchWithHeaders,
-    mergeHeaders
+    isLoading
   };
 }
+function useIntegrateAI(client, options = {}) {
+  const { apiPattern = /\/api\/chat/, debug = false } = options;
+  useEffect(() => {
+    if (!client || typeof window === "undefined") {
+      if (debug && !client) {
+        console.warn("[useIntegrateAI] No client provided, skipping interceptor setup");
+      }
+      return;
+    }
+    const originalFetch = window.fetch;
+    let currentTokens = {};
+    try {
+      currentTokens = client.getAllProviderTokens();
+      if (debug) {
+        console.log("[useIntegrateAI] Initial tokens loaded:", Object.keys(currentTokens));
+      }
+    } catch (error) {
+      console.error("[useIntegrateAI] Failed to get initial tokens:", error);
+    }
+    const updateTokens = () => {
+      try {
+        currentTokens = client.getAllProviderTokens();
+        if (debug) {
+          console.log("[useIntegrateAI] Tokens updated:", Object.keys(currentTokens));
+        }
+      } catch (error) {
+        console.error("[useIntegrateAI] Failed to update tokens:", error);
+      }
+    };
+    const handleLogout = () => {
+      currentTokens = {};
+      if (debug) {
+        console.log("[useIntegrateAI] Tokens cleared (logout)");
+      }
+    };
+    client.on("auth:complete", updateTokens);
+    client.on("auth:disconnect", updateTokens);
+    client.on("auth:logout", handleLogout);
+    const interceptedFetch = async (input, init) => {
+      const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+      const shouldIntercept = typeof apiPattern === "string" ? url.includes(apiPattern) : apiPattern.test(url);
+      if (shouldIntercept && Object.keys(currentTokens).length > 0) {
+        if (debug) {
+          console.log("[useIntegrateAI] Intercepting request to:", url);
+          console.log("[useIntegrateAI] Injecting tokens:", Object.keys(currentTokens));
+        }
+        const headers = new Headers(init?.headers);
+        headers.set("x-integrate-tokens", JSON.stringify(currentTokens));
+        return originalFetch(input, {
+          ...init,
+          headers
+        });
+      }
+      return originalFetch(input, init);
+    };
+    window.fetch = interceptedFetch;
+    if (debug) {
+      console.log("[useIntegrateAI] Global fetch interceptor installed");
+      console.log("[useIntegrateAI] Pattern:", apiPattern);
+    }
+    return () => {
+      window.fetch = originalFetch;
+      client.off("auth:complete", updateTokens);
+      client.off("auth:disconnect", updateTokens);
+      client.off("auth:logout", handleLogout);
+      if (debug) {
+        console.log("[useIntegrateAI] Global fetch interceptor removed");
+      }
+    };
+  }, [client, apiPattern, debug]);
+}
 export {
-  useIntegrateTokens
+  useIntegrateTokens,
+  useIntegrateAI
 };

package/dist/src/react/hooks.d.ts

@@ -1,8 +1,7 @@
 /**
  * React hooks for integrate-sdk
  *
- * Provides React hooks for managing provider tokens and headers
- * in client-side applications.
+ * Provides React hooks for managing provider tokens in client-side applications.
  */
 import type { MCPClient } from "../client.js";
 /**
@@ -13,82 +12,117 @@ export interface UseIntegrateTokensResult {
      * Current provider tokens (e.g., { github: 'token123', gmail: 'token456' })
      */
     tokens: Record<string, string>;
-    /**
-     * Headers object ready to spread into fetch/useChat options
-     * Includes 'x-integrate-tokens' header with JSON-stringified tokens
-     */
-    headers: Record<string, string>;
     /**
      * Whether tokens are currently being loaded
      */
     isLoading: boolean;
-    /**
-     * Custom fetch function with integrate tokens automatically included
-     * Use this with libraries that accept a custom fetch function (like Vercel AI SDK's useChat)
-     */
-    fetch: (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>;
-    /**
-     * Helper function to merge integrate headers with existing headers
-     * Useful for manual fetch calls where you need to combine headers
-     */
-    mergeHeaders: (existingHeaders?: HeadersInit) => Headers;
 }
 /**
- * React hook to access integrate-sdk provider tokens and headers
+ * React hook to access integrate-sdk provider token status
  *
  * Automatically listens for authentication events and updates when tokens change.
- * Returns tokens and formatted headers ready to pass to API requests.
+ * Use this hook to display connection status in your UI.
+ *
+ * **For automatic token injection**, use `useIntegrateAI()` instead.
  *
  * **Note:** This hook must be called inside a React component. It will return safe
  * fallback values during SSR or if the client is not ready.
  *
  * @param client - MCP client instance created with createMCPClient() (optional)
- * @returns Object with tokens, headers, loading state, fetch function, and mergeHeaders helper
+ * @returns Object with tokens and loading state
  *
  * @example
  * ```tsx
  * import { createMCPClient, githubPlugin } from 'integrate-sdk';
  * import { useIntegrateTokens } from 'integrate-sdk/react';
- * import { useChat } from 'ai/react';
  *
  * const client = createMCPClient({
  *   plugins: [githubPlugin({ clientId: '...' })],
  * });
  *
- * function ChatComponent() {
- *   const { fetch: fetchWithTokens, isLoading } = useIntegrateTokens(client);
+ * function ConnectionStatus() {
+ *   const { tokens, isLoading } = useIntegrateTokens(client);
  *
- *   const chat = useChat({
- *     api: '/api/chat',
- *     fetch: fetchWithTokens, // Tokens automatically included
- *   });
+ *   if (isLoading) return <div>Loading...</div>;
  *
- *   return <div>Chat UI here</div>;
+ *   return (
+ *     <div>
+ *       {Object.keys(tokens).length > 0 ? (
+ *         <span>Connected: {Object.keys(tokens).join(', ')}</span>
+ *       ) : (
+ *         <span>Not connected</span>
+ *       )}
+ *     </div>
+ *   );
  * }
  * ```
+ */
+export declare function useIntegrateTokens(client?: MCPClient<any> | null): UseIntegrateTokensResult;
+/**
+ * Options for useIntegrateAI hook
+ */
+export interface UseIntegrateAIOptions {
+    /**
+     * URL pattern to intercept for token injection
+     * Default: /\/api\/chat/
+     * Can be a string (uses .includes()) or RegExp
+     */
+    apiPattern?: string | RegExp;
+    /**
+     * Enable debug logging
+     * Default: false
+     */
+    debug?: boolean;
+}
+/**
+ * Global fetch interceptor for Vercel AI SDK
+ *
+ * Automatically injects integrate provider tokens into all AI SDK requests.
+ * Call this once at your app root (layout/provider) to enable automatic token
+ * injection for all `useChat` calls in your application.
+ *
+ * **Note:** This installs a global `window.fetch` interceptor that only affects
+ * requests matching the `apiPattern`. All other requests pass through unchanged.
+ *
+ * @param client - MCP client instance created with createMCPClient() (optional)
+ * @param options - Configuration options for the interceptor
  *
  * @example
  * ```tsx
- * // With mergeHeaders helper
- * import { createMCPClient } from 'integrate-sdk';
+ * // app/layout.tsx or app/providers.tsx
+ * 'use client';
+ *
+ * import { createMCPClient, githubPlugin } from 'integrate-sdk';
+ * import { useIntegrateAI } from 'integrate-sdk/react';
  *
- * const client = createMCPClient({ plugins: [...] });
+ * const client = createMCPClient({
+ *   plugins: [
+ *     githubPlugin({ clientId: process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID }),
+ *   ],
+ * });
  *
- * function MyComponent() {
- *   const { mergeHeaders } = useIntegrateTokens(client);
+ * export function Providers({ children }) {
+ *   // Install global interceptor once
+ *   useIntegrateAI(client);
  *
- *   const fetchData = async () => {
- *     const response = await fetch('/api/data', {
- *       method: 'POST',
- *       headers: mergeHeaders({ 'Content-Type': 'application/json' }),
- *       body: JSON.stringify({ query: 'example' }),
- *     });
- *     return response.json();
- *   };
+ *   return <>{children}</>;
+ * }
  *
- *   return <button onClick={fetchData}>Fetch</button>;
+ * // Now any component can use useChat without manual token management
+ * function ChatPage() {
+ *   const chat = useChat(); // ✅ Tokens automatically included!
+ *   return <div>...</div>;
  * }
  * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom API pattern and debug logging
+ * useIntegrateAI(client, {
+ *   apiPattern: /\/(api|chat)\//, // Match /api/ or /chat/
+ *   debug: true, // Log intercepted requests
+ * });
+ * ```
  */
-export declare function useIntegrateTokens(client?: MCPClient<any> | null): UseIntegrateTokensResult;
+export declare function useIntegrateAI(client?: MCPClient<any> | null, options?: UseIntegrateAIOptions): void;
 //# sourceMappingURL=hooks.d.ts.map

package/dist/src/react/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/react/hooks.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAE/B;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEhC;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,KAAK,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,EAAE,IAAI,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;IAE3E;;;OAGG;IACH,YAAY,EAAE,CAAC,eAAe,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC;CAC1D;AAuCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,GAC7B,wBAAwB,CA0H1B"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/react/hooks.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAE/B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACpB;AAoCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,GAC7B,wBAAwB,CA4E1B;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE7B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,wBAAgB,cAAc,CAC5B,MAAM,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,EAC9B,OAAO,GAAE,qBAA0B,GAClC,IAAI,CA6GN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "integrate-sdk",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "Type-safe TypeScript SDK for MCP Client with plugin-based OAuth provider configuration",
   "type": "module",
   "main": "./dist/index.js",

package/react.ts

@@ -4,6 +4,6 @@
  * @packageDocumentation
  */
 
-export { useIntegrateTokens } from "./src/react/hooks.js";
-export type { UseIntegrateTokensResult } from "./src/react/hooks.js";
+export { useIntegrateTokens, useIntegrateAI } from "./src/react/hooks.js";
+export type { UseIntegrateTokensResult, UseIntegrateAIOptions } from "./src/react/hooks.js";