@blinkdotnew/react 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,186 @@
+import { BlinkClient, Agent, UIMessage, AgentResponse } from '@blinkdotnew/sdk';
+export * from '@blinkdotnew/sdk';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface BlinkContextValue {
+    client: BlinkClient;
+    projectId: string;
+}
+interface BlinkProviderProps {
+    /** Your Blink project ID */
+    projectId: string;
+    /** Publishable key for client-side usage */
+    publishableKey?: string;
+    /** Secret key for server-side usage (do not expose in browser!) */
+    secretKey?: string;
+    /** Children components */
+    children: ReactNode;
+}
+/**
+ * Provides Blink client to all child components
+ *
+ * @example
+ * ```tsx
+ * import { BlinkProvider } from '@blinkdotnew/react'
+ *
+ * function App() {
+ *   return (
+ *     <BlinkProvider
+ *       projectId="proj_abc123"
+ *       publishableKey="blnk_pk_..."
+ *     >
+ *       <MyApp />
+ *     </BlinkProvider>
+ *   )
+ * }
+ * ```
+ */
+declare function BlinkProvider({ projectId, publishableKey, secretKey, children, }: BlinkProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Get the Blink client from context
+ *
+ * @throws If used outside BlinkProvider
+ */
+declare function useBlink(): BlinkContextValue;
+/**
+ * Get the Blink client instance directly
+ *
+ * @throws If used outside BlinkProvider
+ */
+declare function useBlinkClient(): BlinkClient;
+interface BlinkAuthContextValue {
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    user: any | null;
+    signIn: (email: string, password: string) => Promise<void>;
+    signUp: (email: string, password: string) => Promise<void>;
+    signOut: () => Promise<void>;
+}
+interface BlinkAuthProviderProps {
+    children: ReactNode;
+}
+/**
+ * Provides authentication state to all child components
+ *
+ * Must be nested inside BlinkProvider
+ *
+ * @example
+ * ```tsx
+ * import { BlinkProvider, BlinkAuthProvider } from '@blinkdotnew/react'
+ *
+ * function App() {
+ *   return (
+ *     <BlinkProvider projectId="proj_abc123" publishableKey="blnk_pk_...">
+ *       <BlinkAuthProvider>
+ *         <MyApp />
+ *       </BlinkAuthProvider>
+ *     </BlinkProvider>
+ *   )
+ * }
+ * ```
+ */
+declare function BlinkAuthProvider({ children }: BlinkAuthProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Get authentication state and methods
+ *
+ * @throws If used outside BlinkAuthProvider
+ */
+declare function useBlinkAuth(): BlinkAuthContextValue;
+
+interface UseAgentOptions {
+    /**
+     * Agent instance created with `new Agent()`
+     *
+     * @example
+     * ```tsx
+     * const myAgent = new Agent({
+     *   model: 'openai/gpt-4o',
+     *   tools: [webSearch],
+     * })
+     *
+     * const chat = useAgent({ agent: myAgent })
+     * ```
+     */
+    agent: Agent;
+    /** Initial messages */
+    initialMessages?: UIMessage[];
+    /** Callback when response is received */
+    onFinish?: (response: AgentResponse) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+/**
+ * Options for addToolOutput
+ */
+interface AddToolOutputOptions {
+    toolCallId: string;
+    tool: string;
+    output: any;
+}
+interface UseAgentReturn {
+    /** Current messages */
+    messages: UIMessage[];
+    /** Current input value */
+    input: string;
+    /** Set input value */
+    setInput: (input: string) => void;
+    /** Whether the agent is processing */
+    isLoading: boolean;
+    /** Any error that occurred */
+    error: Error | null;
+    /** Send a message */
+    sendMessage: (content?: string) => Promise<void>;
+    /** Append a message without sending */
+    append: (message: UIMessage) => void;
+    /** Handle input change (for controlled inputs) */
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Handle form submit */
+    handleSubmit: (e?: React.FormEvent) => void;
+    /** Add tool output for HITL (Human-in-the-Loop) */
+    addToolOutput: (options: AddToolOutputOptions) => void;
+    /** Clear messages */
+    clearMessages: () => void;
+    /** Stop generation */
+    stop: () => void;
+    /** Reload last message */
+    reload: () => Promise<void>;
+}
+/**
+ * React hook for AI agent chat functionality
+ *
+ * Compatible with AI SDK's useChat pattern but powered by Blink.
+ *
+ * **Official usage pattern:**
+ * 1. Create agent: `const myAgent = new Agent({...})`
+ * 2. Use in hook: `useAgent({ agent: myAgent })`
+ *
+ * @example
+ * ```tsx
+ * import { Agent, useAgent, webSearch, dbTools } from '@blinkdotnew/react'
+ *
+ * // 1. Define agent (can be shared across components)
+ * const myAgent = new Agent({
+ *   model: 'openai/gpt-4o',
+ *   system: 'You are a helpful assistant.',
+ *   tools: [webSearch, ...dbTools],
+ * })
+ *
+ * // 2. Use in component
+ * function Chat() {
+ *   const { messages, input, handleInputChange, handleSubmit, isLoading } = useAgent({
+ *     agent: myAgent,
+ *   })
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit}>
+ *       <input value={input} onChange={handleInputChange} />
+ *       <button type="submit" disabled={isLoading}>Send</button>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare function useAgent(options: UseAgentOptions): UseAgentReturn;
+
+export { type AddToolOutputOptions, BlinkAuthProvider, type BlinkAuthProviderProps, BlinkProvider, type BlinkProviderProps, type UseAgentOptions, type UseAgentReturn, useAgent, useBlink, useBlinkAuth, useBlinkClient };

package/dist/index.d.ts

@@ -0,0 +1,186 @@
+import { BlinkClient, Agent, UIMessage, AgentResponse } from '@blinkdotnew/sdk';
+export * from '@blinkdotnew/sdk';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface BlinkContextValue {
+    client: BlinkClient;
+    projectId: string;
+}
+interface BlinkProviderProps {
+    /** Your Blink project ID */
+    projectId: string;
+    /** Publishable key for client-side usage */
+    publishableKey?: string;
+    /** Secret key for server-side usage (do not expose in browser!) */
+    secretKey?: string;
+    /** Children components */
+    children: ReactNode;
+}
+/**
+ * Provides Blink client to all child components
+ *
+ * @example
+ * ```tsx
+ * import { BlinkProvider } from '@blinkdotnew/react'
+ *
+ * function App() {
+ *   return (
+ *     <BlinkProvider
+ *       projectId="proj_abc123"
+ *       publishableKey="blnk_pk_..."
+ *     >
+ *       <MyApp />
+ *     </BlinkProvider>
+ *   )
+ * }
+ * ```
+ */
+declare function BlinkProvider({ projectId, publishableKey, secretKey, children, }: BlinkProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Get the Blink client from context
+ *
+ * @throws If used outside BlinkProvider
+ */
+declare function useBlink(): BlinkContextValue;
+/**
+ * Get the Blink client instance directly
+ *
+ * @throws If used outside BlinkProvider
+ */
+declare function useBlinkClient(): BlinkClient;
+interface BlinkAuthContextValue {
+    isAuthenticated: boolean;
+    isLoading: boolean;
+    user: any | null;
+    signIn: (email: string, password: string) => Promise<void>;
+    signUp: (email: string, password: string) => Promise<void>;
+    signOut: () => Promise<void>;
+}
+interface BlinkAuthProviderProps {
+    children: ReactNode;
+}
+/**
+ * Provides authentication state to all child components
+ *
+ * Must be nested inside BlinkProvider
+ *
+ * @example
+ * ```tsx
+ * import { BlinkProvider, BlinkAuthProvider } from '@blinkdotnew/react'
+ *
+ * function App() {
+ *   return (
+ *     <BlinkProvider projectId="proj_abc123" publishableKey="blnk_pk_...">
+ *       <BlinkAuthProvider>
+ *         <MyApp />
+ *       </BlinkAuthProvider>
+ *     </BlinkProvider>
+ *   )
+ * }
+ * ```
+ */
+declare function BlinkAuthProvider({ children }: BlinkAuthProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Get authentication state and methods
+ *
+ * @throws If used outside BlinkAuthProvider
+ */
+declare function useBlinkAuth(): BlinkAuthContextValue;
+
+interface UseAgentOptions {
+    /**
+     * Agent instance created with `new Agent()`
+     *
+     * @example
+     * ```tsx
+     * const myAgent = new Agent({
+     *   model: 'openai/gpt-4o',
+     *   tools: [webSearch],
+     * })
+     *
+     * const chat = useAgent({ agent: myAgent })
+     * ```
+     */
+    agent: Agent;
+    /** Initial messages */
+    initialMessages?: UIMessage[];
+    /** Callback when response is received */
+    onFinish?: (response: AgentResponse) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+/**
+ * Options for addToolOutput
+ */
+interface AddToolOutputOptions {
+    toolCallId: string;
+    tool: string;
+    output: any;
+}
+interface UseAgentReturn {
+    /** Current messages */
+    messages: UIMessage[];
+    /** Current input value */
+    input: string;
+    /** Set input value */
+    setInput: (input: string) => void;
+    /** Whether the agent is processing */
+    isLoading: boolean;
+    /** Any error that occurred */
+    error: Error | null;
+    /** Send a message */
+    sendMessage: (content?: string) => Promise<void>;
+    /** Append a message without sending */
+    append: (message: UIMessage) => void;
+    /** Handle input change (for controlled inputs) */
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Handle form submit */
+    handleSubmit: (e?: React.FormEvent) => void;
+    /** Add tool output for HITL (Human-in-the-Loop) */
+    addToolOutput: (options: AddToolOutputOptions) => void;
+    /** Clear messages */
+    clearMessages: () => void;
+    /** Stop generation */
+    stop: () => void;
+    /** Reload last message */
+    reload: () => Promise<void>;
+}
+/**
+ * React hook for AI agent chat functionality
+ *
+ * Compatible with AI SDK's useChat pattern but powered by Blink.
+ *
+ * **Official usage pattern:**
+ * 1. Create agent: `const myAgent = new Agent({...})`
+ * 2. Use in hook: `useAgent({ agent: myAgent })`
+ *
+ * @example
+ * ```tsx
+ * import { Agent, useAgent, webSearch, dbTools } from '@blinkdotnew/react'
+ *
+ * // 1. Define agent (can be shared across components)
+ * const myAgent = new Agent({
+ *   model: 'openai/gpt-4o',
+ *   system: 'You are a helpful assistant.',
+ *   tools: [webSearch, ...dbTools],
+ * })
+ *
+ * // 2. Use in component
+ * function Chat() {
+ *   const { messages, input, handleInputChange, handleSubmit, isLoading } = useAgent({
+ *     agent: myAgent,
+ *   })
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit}>
+ *       <input value={input} onChange={handleInputChange} />
+ *       <button type="submit" disabled={isLoading}>Send</button>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare function useAgent(options: UseAgentOptions): UseAgentReturn;
+
+export { type AddToolOutputOptions, BlinkAuthProvider, type BlinkAuthProviderProps, BlinkProvider, type BlinkProviderProps, type UseAgentOptions, type UseAgentReturn, useAgent, useBlink, useBlinkAuth, useBlinkClient };

package/dist/index.js

@@ -0,0 +1,400 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BlinkAuthProvider: () => BlinkAuthProvider,
+  BlinkProvider: () => BlinkProvider,
+  useAgent: () => useAgent,
+  useBlink: () => useBlink,
+  useBlinkAuth: () => useBlinkAuth,
+  useBlinkClient: () => useBlinkClient
+});
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("@blinkdotnew/sdk"), module.exports);
+
+// src/context.tsx
+var import_react = __toESM(require("react"));
+var import_sdk = require("@blinkdotnew/sdk");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BlinkContext = (0, import_react.createContext)(null);
+function BlinkProvider({
+  projectId,
+  publishableKey,
+  secretKey,
+  children
+}) {
+  const client = (0, import_react.useMemo)(
+    () => (0, import_sdk.createClient)({
+      projectId,
+      publishableKey,
+      secretKey
+    }),
+    [projectId, publishableKey, secretKey]
+  );
+  const value = (0, import_react.useMemo)(
+    () => ({
+      client,
+      projectId
+    }),
+    [client, projectId]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BlinkContext.Provider, { value, children });
+}
+function useBlink() {
+  const context = (0, import_react.useContext)(BlinkContext);
+  if (!context) {
+    throw new Error("useBlink must be used within a BlinkProvider");
+  }
+  return context;
+}
+function useBlinkClient() {
+  return useBlink().client;
+}
+var BlinkAuthContext = (0, import_react.createContext)(null);
+function BlinkAuthProvider({ children }) {
+  const { client } = useBlink();
+  const [isLoading, setIsLoading] = import_react.default.useState(true);
+  const [user, setUser] = import_react.default.useState(null);
+  import_react.default.useEffect(() => {
+    let mounted = true;
+    const initAuth = async () => {
+      try {
+        const currentUser = await client.auth.me();
+        if (mounted) {
+          setUser(currentUser);
+        }
+      } catch {
+        if (mounted) {
+          setUser(null);
+        }
+      } finally {
+        if (mounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+    initAuth();
+    const unsubscribe = client.auth.onAuthStateChanged((state) => {
+      setUser(state.user);
+    });
+    return () => {
+      mounted = false;
+      unsubscribe();
+    };
+  }, [client]);
+  const signIn = import_react.default.useCallback(
+    async (email, password) => {
+      const result = await client.auth.signInWithEmail(email, password);
+      setUser(result);
+    },
+    [client]
+  );
+  const signUp = import_react.default.useCallback(
+    async (email, password) => {
+      const result = await client.auth.signUp({ email, password });
+      setUser(result);
+    },
+    [client]
+  );
+  const signOut = import_react.default.useCallback(async () => {
+    await client.auth.signOut();
+    setUser(null);
+  }, [client]);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      isAuthenticated: !!user,
+      isLoading,
+      user,
+      signIn,
+      signUp,
+      signOut
+    }),
+    [isLoading, user, signIn, signUp, signOut]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BlinkAuthContext.Provider, { value, children });
+}
+function useBlinkAuth() {
+  const context = (0, import_react.useContext)(BlinkAuthContext);
+  if (!context) {
+    throw new Error("useBlinkAuth must be used within a BlinkAuthProvider");
+  }
+  return context;
+}
+
+// src/use-agent.ts
+var import_react2 = require("react");
+function useAgent(options) {
+  const client = useBlinkClient();
+  const { agent: agentInput, initialMessages = [], onFinish, onError } = options;
+  const [messages, setMessages] = (0, import_react2.useState)(initialMessages);
+  const [input, setInput] = (0, import_react2.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const abortControllerRef = (0, import_react2.useRef)(null);
+  const agent = (0, import_react2.useMemo)(() => {
+    return client.ai.bindAgent(agentInput);
+  }, [agentInput, client]);
+  const agentModel = agent.model;
+  const generateId = (0, import_react2.useCallback)(() => {
+    return `msg_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+  }, []);
+  const parseStream = (0, import_react2.useCallback)(
+    async (response, assistantMessageId) => {
+      if (!response.body) {
+        throw new Error("No response body");
+      }
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let currentText = "";
+      let currentParts = [];
+      let finishData = null;
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() || "";
+          for (const line of lines) {
+            const trimmedLine = line.trim();
+            if (!trimmedLine || !trimmedLine.startsWith("data:")) continue;
+            if (trimmedLine === "data: [DONE]" || trimmedLine === "data:[DONE]") continue;
+            try {
+              const jsonStr = trimmedLine.startsWith("data: ") ? trimmedLine.slice(6) : trimmedLine.slice(5);
+              if (!jsonStr.trim()) continue;
+              const json = JSON.parse(jsonStr);
+              switch (json.type) {
+                // Handle text events (AI SDK v5 uses 'text-delta' with 'delta' property)
+                case "text-delta":
+                case "text": {
+                  const textChunk = json.delta || json.textDelta || json.value || json.text || "";
+                  currentText += textChunk;
+                  setMessages(
+                    (prev) => prev.map(
+                      (m) => m.id === assistantMessageId ? { ...m, content: currentText, parts: [...currentParts.filter((p) => p.type !== "text"), { type: "text", text: currentText }] } : m
+                    )
+                  );
+                  break;
+                }
+                // Handle tool call events
+                case "tool-call":
+                case "tool-call-start": {
+                  const existingTool = currentParts.find(
+                    (p) => p.type === "tool-invocation" && p.toolCallId === json.toolCallId
+                  );
+                  if (!existingTool) {
+                    const toolPart = {
+                      type: "tool-invocation",
+                      toolCallId: json.toolCallId,
+                      toolName: json.toolName,
+                      state: "pending",
+                      input: json.args || {}
+                    };
+                    currentParts = [...currentParts.filter((p) => p.type !== "text"), toolPart];
+                    setMessages(
+                      (prev) => prev.map(
+                        (m) => m.id === assistantMessageId ? { ...m, parts: [...currentParts, { type: "text", text: currentText }] } : m
+                      )
+                    );
+                  }
+                  break;
+                }
+                // Handle tool result events
+                case "tool-result": {
+                  currentParts = currentParts.map(
+                    (p) => p.type === "tool-invocation" && p.toolCallId === json.toolCallId ? { ...p, state: "result", output: json.result } : p
+                  );
+                  setMessages(
+                    (prev) => prev.map(
+                      (m) => m.id === assistantMessageId ? { ...m, parts: [...currentParts.filter((p) => p.type !== "text"), { type: "text", text: currentText }] } : m
+                    )
+                  );
+                  break;
+                }
+                // Handle finish event
+                case "finish":
+                case "done": {
+                  finishData = json;
+                  break;
+                }
+                // Ignore other event types (start, text-start, text-end, etc.)
+                default:
+                  break;
+              }
+            } catch {
+            }
+          }
+        }
+      } finally {
+        reader.releaseLock();
+      }
+      return { text: currentText, finishData };
+    },
+    []
+  );
+  const sendMessage = (0, import_react2.useCallback)(
+    async (content) => {
+      const messageContent = content ?? input;
+      if (!messageContent.trim() && messages.length === 0) return;
+      setError(null);
+      setIsLoading(true);
+      abortControllerRef.current = new AbortController();
+      try {
+        let newMessages = [...messages];
+        if (messageContent.trim()) {
+          const userMessage = {
+            id: generateId(),
+            role: "user",
+            content: messageContent.trim()
+          };
+          newMessages = [...newMessages, userMessage];
+          setMessages(newMessages);
+          setInput("");
+        }
+        const assistantMessageId = generateId();
+        const assistantMessage = {
+          id: assistantMessageId,
+          role: "assistant",
+          content: "",
+          parts: []
+        };
+        setMessages([...newMessages, assistantMessage]);
+        const response = await agent.stream({
+          messages: newMessages,
+          signal: abortControllerRef.current.signal
+        });
+        const { text, finishData } = await parseStream(response, assistantMessageId);
+        setMessages(
+          (prev) => prev.map(
+            (m) => m.id === assistantMessageId ? { ...m, content: text } : m
+          )
+        );
+        if (onFinish && finishData) {
+          onFinish({
+            text,
+            finishReason: finishData.finishReason || "stop",
+            steps: [],
+            usage: finishData.usage || { inputTokens: 0, outputTokens: 0 },
+            _billing: finishData._billing || { model: agentModel, creditsCharged: 0, costUSD: 0 }
+          });
+        }
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        if (error2.name !== "AbortError") {
+          setError(error2);
+          onError?.(error2);
+        }
+      } finally {
+        setIsLoading(false);
+        abortControllerRef.current = null;
+      }
+    },
+    [agent, agentModel, messages, input, generateId, parseStream, onFinish, onError]
+  );
+  const append = (0, import_react2.useCallback)((message) => {
+    setMessages((prev) => [...prev, { ...message, id: message.id || generateId() }]);
+  }, [generateId]);
+  const handleInputChange = (0, import_react2.useCallback)(
+    (e) => {
+      setInput(e.target.value);
+    },
+    []
+  );
+  const handleSubmit = (0, import_react2.useCallback)(
+    (e) => {
+      e?.preventDefault();
+      sendMessage();
+    },
+    [sendMessage]
+  );
+  const addToolOutput = (0, import_react2.useCallback)(
+    ({ toolCallId, tool, output }) => {
+      setMessages(
+        (prev) => prev.map((m) => {
+          if (m.role !== "assistant" || !m.parts) return m;
+          const updatedParts = m.parts.map(
+            (p) => p.type === "tool-invocation" && p.toolCallId === toolCallId && p.toolName === tool ? { ...p, state: "output-available", output } : p
+          );
+          return { ...m, parts: updatedParts };
+        })
+      );
+    },
+    []
+  );
+  const clearMessages = (0, import_react2.useCallback)(() => {
+    setMessages(initialMessages);
+    setError(null);
+  }, [initialMessages]);
+  const stop = (0, import_react2.useCallback)(() => {
+    abortControllerRef.current?.abort();
+  }, []);
+  const reload = (0, import_react2.useCallback)(async () => {
+    let lastUserIndex = -1;
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (messages[i].role === "user") {
+        lastUserIndex = i;
+        break;
+      }
+    }
+    if (lastUserIndex === -1) return;
+    const messagesUpToLastUser = messages.slice(0, lastUserIndex + 1);
+    setMessages(messagesUpToLastUser);
+    await sendMessage();
+  }, [messages, sendMessage]);
+  return {
+    messages,
+    input,
+    setInput,
+    isLoading,
+    error,
+    sendMessage,
+    append,
+    handleInputChange,
+    handleSubmit,
+    addToolOutput,
+    clearMessages,
+    stop,
+    reload
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BlinkAuthProvider,
+  BlinkProvider,
+  useAgent,
+  useBlink,
+  useBlinkAuth,
+  useBlinkClient,
+  ...require("@blinkdotnew/sdk")
+});
+//# sourceMappingURL=index.js.map

package/dist/index.mjs

@@ -0,0 +1,358 @@
+// src/index.ts
+export * from "@blinkdotnew/sdk";
+
+// src/context.tsx
+import React, { createContext, useContext, useMemo } from "react";
+import { createClient } from "@blinkdotnew/sdk";
+import { jsx } from "react/jsx-runtime";
+var BlinkContext = createContext(null);
+function BlinkProvider({
+  projectId,
+  publishableKey,
+  secretKey,
+  children
+}) {
+  const client = useMemo(
+    () => createClient({
+      projectId,
+      publishableKey,
+      secretKey
+    }),
+    [projectId, publishableKey, secretKey]
+  );
+  const value = useMemo(
+    () => ({
+      client,
+      projectId
+    }),
+    [client, projectId]
+  );
+  return /* @__PURE__ */ jsx(BlinkContext.Provider, { value, children });
+}
+function useBlink() {
+  const context = useContext(BlinkContext);
+  if (!context) {
+    throw new Error("useBlink must be used within a BlinkProvider");
+  }
+  return context;
+}
+function useBlinkClient() {
+  return useBlink().client;
+}
+var BlinkAuthContext = createContext(null);
+function BlinkAuthProvider({ children }) {
+  const { client } = useBlink();
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [user, setUser] = React.useState(null);
+  React.useEffect(() => {
+    let mounted = true;
+    const initAuth = async () => {
+      try {
+        const currentUser = await client.auth.me();
+        if (mounted) {
+          setUser(currentUser);
+        }
+      } catch {
+        if (mounted) {
+          setUser(null);
+        }
+      } finally {
+        if (mounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+    initAuth();
+    const unsubscribe = client.auth.onAuthStateChanged((state) => {
+      setUser(state.user);
+    });
+    return () => {
+      mounted = false;
+      unsubscribe();
+    };
+  }, [client]);
+  const signIn = React.useCallback(
+    async (email, password) => {
+      const result = await client.auth.signInWithEmail(email, password);
+      setUser(result);
+    },
+    [client]
+  );
+  const signUp = React.useCallback(
+    async (email, password) => {
+      const result = await client.auth.signUp({ email, password });
+      setUser(result);
+    },
+    [client]
+  );
+  const signOut = React.useCallback(async () => {
+    await client.auth.signOut();
+    setUser(null);
+  }, [client]);
+  const value = useMemo(
+    () => ({
+      isAuthenticated: !!user,
+      isLoading,
+      user,
+      signIn,
+      signUp,
+      signOut
+    }),
+    [isLoading, user, signIn, signUp, signOut]
+  );
+  return /* @__PURE__ */ jsx(BlinkAuthContext.Provider, { value, children });
+}
+function useBlinkAuth() {
+  const context = useContext(BlinkAuthContext);
+  if (!context) {
+    throw new Error("useBlinkAuth must be used within a BlinkAuthProvider");
+  }
+  return context;
+}
+
+// src/use-agent.ts
+import { useCallback, useRef, useState, useMemo as useMemo2 } from "react";
+function useAgent(options) {
+  const client = useBlinkClient();
+  const { agent: agentInput, initialMessages = [], onFinish, onError } = options;
+  const [messages, setMessages] = useState(initialMessages);
+  const [input, setInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const abortControllerRef = useRef(null);
+  const agent = useMemo2(() => {
+    return client.ai.bindAgent(agentInput);
+  }, [agentInput, client]);
+  const agentModel = agent.model;
+  const generateId = useCallback(() => {
+    return `msg_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+  }, []);
+  const parseStream = useCallback(
+    async (response, assistantMessageId) => {
+      if (!response.body) {
+        throw new Error("No response body");
+      }
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let currentText = "";
+      let currentParts = [];
+      let finishData = null;
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() || "";
+          for (const line of lines) {
+            const trimmedLine = line.trim();
+            if (!trimmedLine || !trimmedLine.startsWith("data:")) continue;
+            if (trimmedLine === "data: [DONE]" || trimmedLine === "data:[DONE]") continue;
+            try {
+              const jsonStr = trimmedLine.startsWith("data: ") ? trimmedLine.slice(6) : trimmedLine.slice(5);
+              if (!jsonStr.trim()) continue;
+              const json = JSON.parse(jsonStr);
+              switch (json.type) {
+                // Handle text events (AI SDK v5 uses 'text-delta' with 'delta' property)
+                case "text-delta":
+                case "text": {
+                  const textChunk = json.delta || json.textDelta || json.value || json.text || "";
+                  currentText += textChunk;
+                  setMessages(
+                    (prev) => prev.map(
+                      (m) => m.id === assistantMessageId ? { ...m, content: currentText, parts: [...currentParts.filter((p) => p.type !== "text"), { type: "text", text: currentText }] } : m
+                    )
+                  );
+                  break;
+                }
+                // Handle tool call events
+                case "tool-call":
+                case "tool-call-start": {
+                  const existingTool = currentParts.find(
+                    (p) => p.type === "tool-invocation" && p.toolCallId === json.toolCallId
+                  );
+                  if (!existingTool) {
+                    const toolPart = {
+                      type: "tool-invocation",
+                      toolCallId: json.toolCallId,
+                      toolName: json.toolName,
+                      state: "pending",
+                      input: json.args || {}
+                    };
+                    currentParts = [...currentParts.filter((p) => p.type !== "text"), toolPart];
+                    setMessages(
+                      (prev) => prev.map(
+                        (m) => m.id === assistantMessageId ? { ...m, parts: [...currentParts, { type: "text", text: currentText }] } : m
+                      )
+                    );
+                  }
+                  break;
+                }
+                // Handle tool result events
+                case "tool-result": {
+                  currentParts = currentParts.map(
+                    (p) => p.type === "tool-invocation" && p.toolCallId === json.toolCallId ? { ...p, state: "result", output: json.result } : p
+                  );
+                  setMessages(
+                    (prev) => prev.map(
+                      (m) => m.id === assistantMessageId ? { ...m, parts: [...currentParts.filter((p) => p.type !== "text"), { type: "text", text: currentText }] } : m
+                    )
+                  );
+                  break;
+                }
+                // Handle finish event
+                case "finish":
+                case "done": {
+                  finishData = json;
+                  break;
+                }
+                // Ignore other event types (start, text-start, text-end, etc.)
+                default:
+                  break;
+              }
+            } catch {
+            }
+          }
+        }
+      } finally {
+        reader.releaseLock();
+      }
+      return { text: currentText, finishData };
+    },
+    []
+  );
+  const sendMessage = useCallback(
+    async (content) => {
+      const messageContent = content ?? input;
+      if (!messageContent.trim() && messages.length === 0) return;
+      setError(null);
+      setIsLoading(true);
+      abortControllerRef.current = new AbortController();
+      try {
+        let newMessages = [...messages];
+        if (messageContent.trim()) {
+          const userMessage = {
+            id: generateId(),
+            role: "user",
+            content: messageContent.trim()
+          };
+          newMessages = [...newMessages, userMessage];
+          setMessages(newMessages);
+          setInput("");
+        }
+        const assistantMessageId = generateId();
+        const assistantMessage = {
+          id: assistantMessageId,
+          role: "assistant",
+          content: "",
+          parts: []
+        };
+        setMessages([...newMessages, assistantMessage]);
+        const response = await agent.stream({
+          messages: newMessages,
+          signal: abortControllerRef.current.signal
+        });
+        const { text, finishData } = await parseStream(response, assistantMessageId);
+        setMessages(
+          (prev) => prev.map(
+            (m) => m.id === assistantMessageId ? { ...m, content: text } : m
+          )
+        );
+        if (onFinish && finishData) {
+          onFinish({
+            text,
+            finishReason: finishData.finishReason || "stop",
+            steps: [],
+            usage: finishData.usage || { inputTokens: 0, outputTokens: 0 },
+            _billing: finishData._billing || { model: agentModel, creditsCharged: 0, costUSD: 0 }
+          });
+        }
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        if (error2.name !== "AbortError") {
+          setError(error2);
+          onError?.(error2);
+        }
+      } finally {
+        setIsLoading(false);
+        abortControllerRef.current = null;
+      }
+    },
+    [agent, agentModel, messages, input, generateId, parseStream, onFinish, onError]
+  );
+  const append = useCallback((message) => {
+    setMessages((prev) => [...prev, { ...message, id: message.id || generateId() }]);
+  }, [generateId]);
+  const handleInputChange = useCallback(
+    (e) => {
+      setInput(e.target.value);
+    },
+    []
+  );
+  const handleSubmit = useCallback(
+    (e) => {
+      e?.preventDefault();
+      sendMessage();
+    },
+    [sendMessage]
+  );
+  const addToolOutput = useCallback(
+    ({ toolCallId, tool, output }) => {
+      setMessages(
+        (prev) => prev.map((m) => {
+          if (m.role !== "assistant" || !m.parts) return m;
+          const updatedParts = m.parts.map(
+            (p) => p.type === "tool-invocation" && p.toolCallId === toolCallId && p.toolName === tool ? { ...p, state: "output-available", output } : p
+          );
+          return { ...m, parts: updatedParts };
+        })
+      );
+    },
+    []
+  );
+  const clearMessages = useCallback(() => {
+    setMessages(initialMessages);
+    setError(null);
+  }, [initialMessages]);
+  const stop = useCallback(() => {
+    abortControllerRef.current?.abort();
+  }, []);
+  const reload = useCallback(async () => {
+    let lastUserIndex = -1;
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (messages[i].role === "user") {
+        lastUserIndex = i;
+        break;
+      }
+    }
+    if (lastUserIndex === -1) return;
+    const messagesUpToLastUser = messages.slice(0, lastUserIndex + 1);
+    setMessages(messagesUpToLastUser);
+    await sendMessage();
+  }, [messages, sendMessage]);
+  return {
+    messages,
+    input,
+    setInput,
+    isLoading,
+    error,
+    sendMessage,
+    append,
+    handleInputChange,
+    handleSubmit,
+    addToolOutput,
+    clearMessages,
+    stop,
+    reload
+  };
+}
+export {
+  BlinkAuthProvider,
+  BlinkProvider,
+  useAgent,
+  useBlink,
+  useBlinkAuth,
+  useBlinkClient
+};
+//# sourceMappingURL=index.mjs.map

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@blinkdotnew/react",
+  "version": "1.0.0",
+  "description": "Blink SDK for React - AI agents, database, storage, and auth for modern SaaS/AI apps",
+  "keywords": [
+    "blink",
+    "react",
+    "sdk",
+    "ai",
+    "agent",
+    "chat",
+    "typescript",
+    "hooks",
+    "useChat",
+    "useAgent"
+  ],
+  "homepage": "https://blink.new",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ShadowWalker2014/blink-sdk.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/ShadowWalker2014/blink-sdk/issues"
+  },
+  "author": "Blink Team",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.mjs",
+    "dist/**/*.d.ts",
+    "dist/**/*.d.mts"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@blinkdotnew/sdk": "^2.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
+
+
+
+