@lastbrain/ai-ui-react 1.0.3

package/dist/hooks/useAiCallText.d.ts

@@ -0,0 +1,12 @@
+import type { AiTextRequest, AiTextResponse } from "@lastbrain/ai-ui-core";
+export interface UseAiCallTextOptions {
+    baseUrl?: string;
+    apiKeyId?: string;
+}
+export interface UseAiCallTextResult {
+    generateText: (request: AiTextRequest) => Promise<AiTextResponse>;
+    loading: boolean;
+    error: Error | null;
+}
+export declare function useAiCallText(options?: UseAiCallTextOptions): UseAiCallTextResult;
+//# sourceMappingURL=useAiCallText.d.ts.map

package/dist/hooks/useAiCallText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAiCallText.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiCallText.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG3E,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAClE,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED,wBAAgB,aAAa,CAC3B,OAAO,CAAC,EAAE,oBAAoB,GAC7B,mBAAmB,CA6BrB"}

package/dist/hooks/useAiCallText.js

@@ -0,0 +1,29 @@
+"use client";
+import { useState, useCallback } from "react";
+import { useAiClient } from "./useAiClient";
+export function useAiCallText(options) {
+    const client = useAiClient(options);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const generateText = useCallback(async (request) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await client.generateText(request);
+            return result;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error("Failed to generate text");
+            setError(error);
+            throw error;
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client]);
+    return {
+        generateText,
+        loading,
+        error,
+    };
+}

package/dist/hooks/useAiClient.d.ts

@@ -0,0 +1,12 @@
+export interface UseAiClientOptions {
+    baseUrl?: string;
+    apiKeyId?: string;
+}
+export declare function useAiClient(options?: UseAiClientOptions): {
+    getModels: () => Promise<import("@lastbrain/ai-ui-core").ModelRef[]>;
+    generateText: (req: import("@lastbrain/ai-ui-core").AiTextRequest) => Promise<import("@lastbrain/ai-ui-core").AiTextResponse>;
+    generateImage: (req: import("@lastbrain/ai-ui-core").AiImageRequest) => Promise<import("@lastbrain/ai-ui-core").AiImageResponse>;
+    embed: (req: import("@lastbrain/ai-ui-core").AiEmbedRequest) => Promise<import("@lastbrain/ai-ui-core").AiEmbedResponse>;
+    getStatus: () => Promise<import("@lastbrain/ai-ui-core").AiStatus>;
+};
+//# sourceMappingURL=useAiClient.d.ts.map

package/dist/hooks/useAiClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAiClient.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiClient.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB;;;;;;EAWvD"}

package/dist/hooks/useAiClient.js

@@ -0,0 +1,13 @@
+"use client";
+import { useMemo } from "react";
+import { createClient } from "@lastbrain/ai-ui-core";
+import { useAiContext } from "../context/AiProvider";
+export function useAiClient(options) {
+    const context = useAiContext();
+    const client = useMemo(() => {
+        const baseUrl = options?.baseUrl || context.baseUrl;
+        const apiKeyId = options?.apiKeyId || context.apiKeyId;
+        return createClient({ baseUrl, apiKeyId });
+    }, [options?.baseUrl, options?.apiKeyId, context.baseUrl, context.apiKeyId]);
+    return client;
+}

package/dist/hooks/useAiModels.d.ts

@@ -0,0 +1,13 @@
+import type { ModelRef } from "@lastbrain/ai-ui-core";
+export interface UseAiModelsOptions {
+    baseUrl?: string;
+    apiKeyId?: string;
+}
+export interface UseAiModelsResult {
+    models: ModelRef[] | null;
+    loading: boolean;
+    error: Error | null;
+    refetch: () => void;
+}
+export declare function useAiModels(options?: UseAiModelsOptions): UseAiModelsResult;
+//# sourceMappingURL=useAiModels.d.ts.map

package/dist/hooks/useAiModels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAiModels.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiModels.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGtD,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,iBAAiB,CA+B3E"}

package/dist/hooks/useAiModels.js

@@ -0,0 +1,32 @@
+"use client";
+import { useState, useEffect, useCallback } from "react";
+import { useAiClient } from "./useAiClient";
+export function useAiModels(options) {
+    const client = useAiClient(options);
+    const [models, setModels] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const fetchModels = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await client.getModels();
+            setModels(result);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error("Failed to fetch models"));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client]);
+    useEffect(() => {
+        fetchModels();
+    }, [fetchModels]);
+    return {
+        models,
+        loading,
+        error,
+        refetch: fetchModels,
+    };
+}

package/dist/hooks/useAiStatus.d.ts

@@ -0,0 +1,13 @@
+import type { AiStatus } from "@lastbrain/ai-ui-core";
+export interface UseAiStatusOptions {
+    baseUrl?: string;
+    apiKeyId?: string;
+}
+export interface UseAiStatusResult {
+    status: AiStatus | null;
+    loading: boolean;
+    error: Error | null;
+    refetch: () => void;
+}
+export declare function useAiStatus(options?: UseAiStatusOptions): UseAiStatusResult;
+//# sourceMappingURL=useAiStatus.d.ts.map

package/dist/hooks/useAiStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAiStatus.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiStatus.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGtD,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,iBAAiB,CA+B3E"}

package/dist/hooks/useAiStatus.js

@@ -0,0 +1,32 @@
+"use client";
+import { useState, useEffect, useCallback } from "react";
+import { useAiClient } from "./useAiClient";
+export function useAiStatus(options) {
+    const client = useAiClient(options);
+    const [status, setStatus] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const fetchStatus = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await client.getStatus();
+            setStatus(result);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err : new Error("Failed to fetch status"));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client]);
+    useEffect(() => {
+        fetchStatus();
+    }, [fetchStatus]);
+    return {
+        status,
+        loading,
+        error,
+        refetch: fetchStatus,
+    };
+}

package/dist/hooks/usePrompts.d.ts

@@ -0,0 +1,35 @@
+export interface Prompt {
+    id: string;
+    slug?: string;
+    title: string;
+    content: string;
+    type: "text" | "image";
+    is_public: boolean;
+    favorite: boolean;
+    tags: string[];
+    created_at: string;
+    updated_at?: string;
+}
+export interface PublicPrompt extends Prompt {
+    slug: string;
+    views: number;
+    used_count: number;
+    picked_count: number;
+}
+export interface UsePromptsOptions {
+    type?: "text" | "image";
+    favorite?: boolean;
+    public?: boolean;
+}
+export interface UsePromptsReturn {
+    prompts: Prompt[] | PublicPrompt[];
+    loading: boolean;
+    error: string | null;
+    fetchPrompts: (options?: UsePromptsOptions) => Promise<void>;
+    createPrompt: (data: Omit<Prompt, "id" | "created_at" | "updated_at">) => Promise<Prompt | null>;
+    updatePrompt: (id: string, data: Partial<Prompt>) => Promise<Prompt | null>;
+    deletePrompt: (id: string) => Promise<boolean>;
+    incrementStat: (promptId: string, statType: "views" | "used" | "picked") => Promise<void>;
+}
+export declare function usePrompts(): UsePromptsReturn;
+//# sourceMappingURL=usePrompts.d.ts.map

package/dist/hooks/usePrompts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrompts.d.ts","sourceRoot":"","sources":["../../src/hooks/usePrompts.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,MAAM;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,OAAO,CAAC,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,YAAY,EAAE,CACZ,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,YAAY,GAAG,YAAY,CAAC,KACnD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5B,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5E,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/C,aAAa,EAAE,CACb,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,KAClC,OAAO,CAAC,IAAI,CAAC,CAAC;CACpB;AAED,wBAAgB,UAAU,IAAI,gBAAgB,CA2I7C"}

package/dist/hooks/usePrompts.js

@@ -0,0 +1,125 @@
+"use client";
+import { useState, useCallback } from "react";
+import { useAiContext } from "../context/AiProvider";
+export function usePrompts() {
+    const { apiKeyId } = useAiContext();
+    const [prompts, setPrompts] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const fetchPrompts = useCallback(async (options) => {
+        try {
+            setLoading(true);
+            setError(null);
+            const params = new URLSearchParams();
+            if (options?.type)
+                params.append("type", options.type);
+            if (options?.favorite !== undefined)
+                params.append("favorite", String(options.favorite));
+            // Use public route without auth if public=true, otherwise use auth route
+            const endpoint = options?.public
+                ? `/api/ai/public/prompts?${params}`
+                : `/api/ai/auth/prompts?${params}`;
+            const response = await fetch(endpoint);
+            const data = await response.json();
+            if (response.ok) {
+                setPrompts(data.prompts || []);
+            }
+            else {
+                setError(data.error || "Failed to fetch prompts");
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Unknown error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    const createPrompt = useCallback(async (data) => {
+        try {
+            setError(null);
+            const response = await fetch("/api/ai/auth/prompts", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(data),
+            });
+            const result = await response.json();
+            if (response.ok) {
+                return result.prompt;
+            }
+            else {
+                setError(result.error || "Failed to create prompt");
+                return null;
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Unknown error");
+            return null;
+        }
+    }, []);
+    const updatePrompt = useCallback(async (id, data) => {
+        try {
+            setError(null);
+            const response = await fetch("/api/ai/auth/prompts", {
+                method: "PUT",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ id, ...data }),
+            });
+            const result = await response.json();
+            if (response.ok) {
+                return result.prompt;
+            }
+            else {
+                setError(result.error || "Failed to update prompt");
+                return null;
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Unknown error");
+            return null;
+        }
+    }, []);
+    const deletePrompt = useCallback(async (id) => {
+        try {
+            setError(null);
+            const response = await fetch(`/api/ai/auth/prompts?id=${id}`, {
+                method: "DELETE",
+            });
+            const result = await response.json();
+            if (response.ok) {
+                return true;
+            }
+            else {
+                setError(result.error || "Failed to delete prompt");
+                return false;
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Unknown error");
+            return false;
+        }
+    }, []);
+    const incrementStat = useCallback(async (promptId, statType) => {
+        try {
+            await fetch("/api/ai/auth/prompts/stats", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ prompt_id: promptId, stat_type: statType }),
+            });
+        }
+        catch (err) {
+            // Silent fail for stats
+            console.error("Failed to increment stat:", err);
+        }
+    }, []);
+    return {
+        prompts,
+        loading,
+        error,
+        fetchPrompts,
+        createPrompt,
+        updatePrompt,
+        deletePrompt,
+        incrementStat,
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export * from "./types";
+export * from "./context/AiProvider";
+export * from "./hooks/useAiClient";
+export * from "./hooks/useAiModels";
+export * from "./hooks/useAiStatus";
+export * from "./hooks/useAiCallText";
+export * from "./hooks/useAiCallImage";
+export * from "./hooks/usePrompts";
+export * from "./components/AiPromptPanel";
+export * from "./components/AiModelSelect";
+export * from "./components/AiInput";
+export * from "./components/AiTextarea";
+export * from "./components/AiSelect";
+export * from "./components/AiChipLabel";
+export * from "./components/AiImageButton";
+export * from "./components/AiSettingsButton";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,cAAc,sBAAsB,CAAC;AAGrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC"}

package/dist/index.js

@@ -0,0 +1,20 @@
+// Types
+export * from "./types";
+// Context
+export * from "./context/AiProvider";
+// Hooks
+export * from "./hooks/useAiClient";
+export * from "./hooks/useAiModels";
+export * from "./hooks/useAiStatus";
+export * from "./hooks/useAiCallText";
+export * from "./hooks/useAiCallImage";
+export * from "./hooks/usePrompts";
+// Components
+export * from "./components/AiPromptPanel";
+export * from "./components/AiModelSelect";
+export * from "./components/AiInput";
+export * from "./components/AiTextarea";
+export * from "./components/AiSelect";
+export * from "./components/AiChipLabel";
+export * from "./components/AiImageButton";
+export * from "./components/AiSettingsButton";

package/dist/types.d.ts

@@ -0,0 +1,20 @@
+export type ToastType = {
+    type: "success" | "error";
+    message: string;
+    code?: string;
+};
+export type UiMode = "modal" | "drawer";
+export interface BaseAiProps {
+    baseUrl?: string;
+    apiKeyId?: string;
+    type?: UiMode;
+    context?: string | null;
+    model?: string | null;
+    prompt?: string | null;
+    editMode?: boolean;
+    onValue?: (value: string) => void;
+    onToast?: (toast: ToastType) => void;
+    disabled?: boolean;
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AACF,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExC,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@lastbrain/ai-ui-react",
+  "version": "1.0.3",
+  "description": "Headless React components for LastBrain AI UI Kit",
+  "private": false,
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    }
+  },
+  "release": {
+    "type": "public"
+  },
+  "keywords": [
+    "ai",
+    "lastbrain",
+    "react",
+    "headless",
+    "components",
+    "ui-kit"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lastpublication/starter.git",
+    "directory": "packages/ai-ui-react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@lastbrain/ai-ui-core": "^1.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "typescript": "^5.4.0"
+  },
+  "scripts": {
+    "dev": "tsc -p tsconfig.json --watch",
+    "build": "tsc -p tsconfig.json",
+    "lint": "eslint ."
+  }
+}

package/src/components/AiChipLabel.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useState, type HTMLAttributes } from "react";
+import type { BaseAiProps } from "../types";
+import { useAiCallText } from "../hooks/useAiCallText";
+import { useAiModels } from "../hooks/useAiModels";
+import { AiPromptPanel } from "./AiPromptPanel";
+
+export interface AiChipLabelProps
+  extends Omit<BaseAiProps, "type">, HTMLAttributes<HTMLDivElement> {
+  label?: string;
+  uiMode?: "modal" | "drawer";
+}
+
+export function AiChipLabel({
+  baseUrl,
+  apiKeyId,
+  uiMode = "modal",
+  context,
+  model,
+  prompt,
+  onValue,
+  onToast,
+  disabled,
+  className,
+  label,
+  ...divProps
+}: AiChipLabelProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [chipLabel, setChipLabel] = useState(label || "");
+
+  const { models } = useAiModels({ baseUrl, apiKeyId });
+  const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
+
+  const handleOpenPanel = () => {
+    setIsOpen(true);
+  };
+
+  const handleClosePanel = () => {
+    setIsOpen(false);
+  };
+
+  const handleSubmit = async (
+    selectedModel: string,
+    selectedPrompt: string
+  ) => {
+    try {
+      const result = await generateText({
+        model: selectedModel,
+        prompt: selectedPrompt,
+        context: context || chipLabel || undefined,
+      });
+
+      if (result.text) {
+        setChipLabel(result.text);
+        onValue?.(result.text);
+        onToast?.({ type: "success", message: "Label generated successfully" });
+      }
+    } catch (error) {
+      onToast?.({ type: "error", message: "Failed to generate label" });
+    } finally {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div data-ai-chip-wrapper className={className} {...divProps}>
+      <div data-ai-chip-label>{chipLabel || "Generate label"}</div>
+      <button
+        onClick={handleOpenPanel}
+        disabled={disabled || loading}
+        data-ai-chip-button
+        type="button"
+      >
+        {loading ? "..." : "✨"}
+      </button>
+      {isOpen && (
+        <AiPromptPanel
+          isOpen={isOpen}
+          onClose={handleClosePanel}
+          onSubmit={handleSubmit}
+          uiMode={uiMode}
+          models={models || []}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/AiImageButton.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useState, type ButtonHTMLAttributes } from "react";
+import type { BaseAiProps } from "../types";
+import { useAiCallImage } from "../hooks/useAiCallImage";
+import { useAiModels } from "../hooks/useAiModels";
+import { AiPromptPanel } from "./AiPromptPanel";
+
+export interface AiImageButtonProps
+  extends
+    Omit<BaseAiProps, "onValue" | "type">,
+    ButtonHTMLAttributes<HTMLButtonElement> {
+  onImage?: (imageUrl: string) => void;
+  uiMode?: "modal" | "drawer";
+}
+
+export function AiImageButton({
+  baseUrl,
+  apiKeyId,
+  uiMode = "modal",
+  context,
+  model,
+  prompt,
+  onImage,
+  onToast,
+  disabled,
+  className,
+  children,
+  ...buttonProps
+}: AiImageButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { models } = useAiModels({ baseUrl, apiKeyId });
+  const { generateImage, loading } = useAiCallImage({ baseUrl, apiKeyId });
+
+  const handleOpenPanel = () => {
+    setIsOpen(true);
+  };
+
+  const handleClosePanel = () => {
+    setIsOpen(false);
+  };
+
+  const handleSubmit = async (
+    selectedModel: string,
+    selectedPrompt: string
+  ) => {
+    try {
+      const result = await generateImage({
+        model: selectedModel,
+        prompt: selectedPrompt,
+      });
+
+      if (result.url) {
+        onImage?.(result.url);
+        onToast?.({ type: "success", message: "Image generated successfully" });
+      }
+    } catch (error) {
+      onToast?.({ type: "error", message: "Failed to generate image" });
+    } finally {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        {...buttonProps}
+        onClick={handleOpenPanel}
+        disabled={disabled || loading}
+        className={className}
+        data-ai-image-button
+      >
+        {loading ? "Generating..." : children || "Generate Image"}
+      </button>
+      {isOpen && (
+        <AiPromptPanel
+          isOpen={isOpen}
+          onClose={handleClosePanel}
+          onSubmit={handleSubmit}
+          uiMode={uiMode}
+          models={models?.filter((m) => m.type === "image") || []}
+        />
+      )}
+    </>
+  );
+}