@lantos1618/better-ui 0.7.0 → 0.8.0

package/dist/{ThemeProvider-CGxHnF2T.d.ts → ThemeProvider-BESbs5p6.d.ts}

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { UIMessage, ChatStatus } from 'ai';
-import { T as Tool } from './tool-DGpwM6G6.js';
+import { T as Tool } from './tool-yZTixiN2.js';
 import { P as PersistenceAdapter, T as Thread$1 } from './types-CAOfGUPH.js';
 
 interface ToolStateEntry {

package/dist/{ThemeProvider-A7krFsCJ.d.mts → ThemeProvider-Dx3STQtp.d.mts}

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { UIMessage, ChatStatus } from 'ai';
-import { T as Tool } from './tool-DGpwM6G6.mjs';
+import { T as Tool } from './tool-yZTixiN2.mjs';
 import { P as PersistenceAdapter, T as Thread$1 } from './types-CAOfGUPH.mjs';
 
 interface ToolStateEntry {

package/dist/agui/index.d.mts

@@ -1,4 +1,4 @@
-import { T as Tool, g as ToolContext } from '../tool-DGpwM6G6.mjs';
+import { T as Tool, g as ToolContext } from '../tool-yZTixiN2.mjs';
 import 'zod';
 import 'react';
 

package/dist/agui/index.d.ts

@@ -1,4 +1,4 @@
-import { T as Tool, g as ToolContext } from '../tool-DGpwM6G6.js';
+import { T as Tool, g as ToolContext } from '../tool-yZTixiN2.js';
 import 'zod';
 import 'react';
 

package/dist/components/index.d.mts

@@ -1,7 +1,7 @@
-import { f as ToolStateStore, g as ToolStateEntry } from '../ThemeProvider-A7krFsCJ.mjs';
-export { h as Chat, C as ChatProps, i as ChatProvider, a as ChatProviderProps, j as Composer, b as ComposerProps, k as Message, M as MessageProps, l as ThemeProvider, T as ThemeProviderProps, m as Thread, c as ThreadProps, d as ToolPartInfo, n as ToolResult, e as ToolResultProps, o as createToolStateStore, u as useChatContext, p as useToolState } from '../ThemeProvider-A7krFsCJ.mjs';
+import { f as ToolStateStore, g as ToolStateEntry } from '../ThemeProvider-Dx3STQtp.mjs';
+export { h as Chat, C as ChatProps, i as ChatProvider, a as ChatProviderProps, j as Composer, b as ComposerProps, k as Message, M as MessageProps, l as ThemeProvider, T as ThemeProviderProps, m as Thread, c as ThreadProps, d as ToolPartInfo, n as ToolResult, e as ToolResultProps, o as createToolStateStore, u as useChatContext, p as useToolState } from '../ThemeProvider-Dx3STQtp.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as Tool } from '../tool-DGpwM6G6.mjs';
+import { T as Tool } from '../tool-yZTixiN2.mjs';
 import React from 'react';
 import 'ai';
 import '../types-CAOfGUPH.mjs';

package/dist/components/index.d.ts

@@ -1,7 +1,7 @@
-import { f as ToolStateStore, g as ToolStateEntry } from '../ThemeProvider-CGxHnF2T.js';
-export { h as Chat, C as ChatProps, i as ChatProvider, a as ChatProviderProps, j as Composer, b as ComposerProps, k as Message, M as MessageProps, l as ThemeProvider, T as ThemeProviderProps, m as Thread, c as ThreadProps, d as ToolPartInfo, n as ToolResult, e as ToolResultProps, o as createToolStateStore, u as useChatContext, p as useToolState } from '../ThemeProvider-CGxHnF2T.js';
+import { f as ToolStateStore, g as ToolStateEntry } from '../ThemeProvider-BESbs5p6.js';
+export { h as Chat, C as ChatProps, i as ChatProvider, a as ChatProviderProps, j as Composer, b as ComposerProps, k as Message, M as MessageProps, l as ThemeProvider, T as ThemeProviderProps, m as Thread, c as ThreadProps, d as ToolPartInfo, n as ToolResult, e as ToolResultProps, o as createToolStateStore, u as useChatContext, p as useToolState } from '../ThemeProvider-BESbs5p6.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as Tool } from '../tool-DGpwM6G6.js';
+import { T as Tool } from '../tool-yZTixiN2.js';
 import React from 'react';
 import 'ai';
 import '../types-CAOfGUPH.js';

package/dist/components/index.js

@@ -179,16 +179,24 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
   const [threads, setThreads] = (0, import_react2.useState)([]);
   const [activeThreadId, setActiveThreadId] = (0, import_react2.useState)(threadId);
   (0, import_react2.useEffect)(() => {
-    if (persistence) {
-      persistence.listThreads().then(setThreads).catch((err) => console.warn("[better-ui] persistence error:", err));
-    }
+    if (!persistence) return;
+    let cancelled = false;
+    persistence.listThreads().then((t) => {
+      if (!cancelled) setThreads(t);
+    }).catch((err) => console.warn("[better-ui] persistence error:", err));
+    return () => {
+      cancelled = true;
+    };
   }, [persistence]);
   (0, import_react2.useEffect)(() => {
-    if (persistence && activeThreadId) {
-      persistence.getMessages(activeThreadId).then((msgs) => {
-        setMessages(msgs);
-      }).catch((err) => console.warn("[better-ui] persistence error:", err));
-    }
+    if (!persistence || !activeThreadId) return;
+    let cancelled = false;
+    persistence.getMessages(activeThreadId).then((msgs) => {
+      if (!cancelled) setMessages(msgs);
+    }).catch((err) => console.warn("[better-ui] persistence error:", err));
+    return () => {
+      cancelled = true;
+    };
   }, [persistence, activeThreadId, setMessages]);
   const prevStatusRef = (0, import_react2.useRef)(status);
   (0, import_react2.useEffect)(() => {
@@ -212,9 +220,10 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
   }, [persistence, setMessages, toolStateStore]);
   const switchThreadFn = (0, import_react2.useCallback)(async (id) => {
     if (!persistence) throw new Error("Persistence not configured");
-    setActiveThreadId(id);
-    setMessages([]);
+    const msgs = await persistence.getMessages(id);
     toolStateStore.clear();
+    setMessages(msgs);
+    setActiveThreadId(id);
   }, [persistence, setMessages, toolStateStore]);
   const deleteThreadFn = (0, import_react2.useCallback)(async (id) => {
     if (!persistence) throw new Error("Persistence not configured");
@@ -237,8 +246,11 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
         stateContext[entry.toolName] = entry.output;
       }
     }
-    dirty.clear();
-    return Object.keys(stateContext).length > 0 ? stateContext : null;
+    if (Object.keys(stateContext).length > 0) {
+      dirty.clear();
+      return stateContext;
+    }
+    return null;
   }, [toolStateStore]);
   const executeToolDirect = (0, import_react2.useCallback)(async (toolName, toolInput, toolCallId) => {
     const currentVersion = (versionRef.current.get(toolCallId) || 0) + 1;
@@ -420,6 +432,33 @@ var import_ai2 = require("ai");
 // src/components/ToolResult.tsx
 var import_react4 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var ToolViewErrorBoundary = class extends import_react4.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    console.error(`[better-ui] View for tool "${this.props.toolName}" threw:`, error, info);
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-4 h-4 text-[var(--bui-error-fg,#f87171)] shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-[var(--bui-error-fg,#f87171)] text-sm font-medium", children: [
+            this.props.toolName,
+            " view error"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-[var(--bui-error-fg,#f87171)]/70 text-xs mt-1", children: this.state.error.message })
+      ] });
+    }
+    return this.props.children;
+  }
+};
 function useIsFollowup(toolStateStore, toolCallId) {
   const subscribe = (0, import_react4.useCallback)(
     (listener) => toolStateStore.subscribeAll(listener),
@@ -602,7 +641,7 @@ function ToolResult({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: className || "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: className || "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ToolViewErrorBoundary, { toolName, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     toolDef.View,
     {
       data: resolvedOutput,
@@ -610,7 +649,7 @@ function ToolResult({
       onAction: getOnAction(toolCallId, toolName),
       error: storeState?.error ? new Error(storeState.error) : null
     }
-  ) });
+  ) }) });
 }
 
 // src/components/Markdown.tsx

package/dist/components/index.mjs

@@ -121,16 +121,24 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
   const [threads, setThreads] = useState([]);
   const [activeThreadId, setActiveThreadId] = useState(threadId);
   useEffect(() => {
-    if (persistence) {
-      persistence.listThreads().then(setThreads).catch((err) => console.warn("[better-ui] persistence error:", err));
-    }
+    if (!persistence) return;
+    let cancelled = false;
+    persistence.listThreads().then((t) => {
+      if (!cancelled) setThreads(t);
+    }).catch((err) => console.warn("[better-ui] persistence error:", err));
+    return () => {
+      cancelled = true;
+    };
   }, [persistence]);
   useEffect(() => {
-    if (persistence && activeThreadId) {
-      persistence.getMessages(activeThreadId).then((msgs) => {
-        setMessages(msgs);
-      }).catch((err) => console.warn("[better-ui] persistence error:", err));
-    }
+    if (!persistence || !activeThreadId) return;
+    let cancelled = false;
+    persistence.getMessages(activeThreadId).then((msgs) => {
+      if (!cancelled) setMessages(msgs);
+    }).catch((err) => console.warn("[better-ui] persistence error:", err));
+    return () => {
+      cancelled = true;
+    };
   }, [persistence, activeThreadId, setMessages]);
   const prevStatusRef = useRef(status);
   useEffect(() => {
@@ -154,9 +162,10 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
   }, [persistence, setMessages, toolStateStore]);
   const switchThreadFn = useCallback2(async (id) => {
     if (!persistence) throw new Error("Persistence not configured");
-    setActiveThreadId(id);
-    setMessages([]);
+    const msgs = await persistence.getMessages(id);
     toolStateStore.clear();
+    setMessages(msgs);
+    setActiveThreadId(id);
   }, [persistence, setMessages, toolStateStore]);
   const deleteThreadFn = useCallback2(async (id) => {
     if (!persistence) throw new Error("Persistence not configured");
@@ -179,8 +188,11 @@ function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalS
         stateContext[entry.toolName] = entry.output;
       }
     }
-    dirty.clear();
-    return Object.keys(stateContext).length > 0 ? stateContext : null;
+    if (Object.keys(stateContext).length > 0) {
+      dirty.clear();
+      return stateContext;
+    }
+    return null;
   }, [toolStateStore]);
   const executeToolDirect = useCallback2(async (toolName, toolInput, toolCallId) => {
     const currentVersion = (versionRef.current.get(toolCallId) || 0) + 1;
@@ -364,8 +376,35 @@ import {
 } from "ai";
 
 // src/components/ToolResult.tsx
-import { useEffect as useEffect2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback3 } from "react";
+import { Component, useEffect as useEffect2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback3 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ToolViewErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    console.error(`[better-ui] View for tool "${this.props.toolName}" threw:`, error, info);
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx2("svg", { className: "w-4 h-4 text-[var(--bui-error-fg,#f87171)] shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" }) }),
+          /* @__PURE__ */ jsxs("span", { className: "text-[var(--bui-error-fg,#f87171)] text-sm font-medium", children: [
+            this.props.toolName,
+            " view error"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2("p", { className: "text-[var(--bui-error-fg,#f87171)]/70 text-xs mt-1", children: this.state.error.message })
+      ] });
+    }
+    return this.props.children;
+  }
+};
 function useIsFollowup(toolStateStore, toolCallId) {
   const subscribe = useCallback3(
     (listener) => toolStateStore.subscribeAll(listener),
@@ -548,7 +587,7 @@ function ToolResult({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx2("div", { className: className || "", children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx2("div", { className: className || "", children: /* @__PURE__ */ jsx2(ToolViewErrorBoundary, { toolName, children: /* @__PURE__ */ jsx2(
     toolDef.View,
     {
       data: resolvedOutput,
@@ -556,7 +595,7 @@ function ToolResult({
       onAction: getOnAction(toolCallId, toolName),
       error: storeState?.error ? new Error(storeState.error) : null
     }
-  ) });
+  ) }) });
 }
 
 // src/components/Markdown.tsx

package/dist/index.d.mts

@@ -1,6 +1,6 @@
-export { C as CacheConfig, a as ClientFetchConfig, b as ClientHandler, S as ServerHandler, c as StreamCallback, d as StreamHandler, T as Tool, e as ToolBuilder, f as ToolConfig, g as ToolContext, V as ViewComponent, h as ViewState, t as tool } from './tool-DGpwM6G6.mjs';
+export { C as CacheConfig, a as ClientFetchConfig, b as ClientHandler, S as ServerHandler, c as StreamCallback, d as StreamHandler, T as Tool, e as ToolBuilder, f as ToolConfig, g as ToolContext, V as ViewComponent, h as ViewState, t as tool } from './tool-yZTixiN2.mjs';
 import { LanguageModelV2 } from '@ai-sdk/provider';
-export { C as ChatProps, a as ChatProviderProps, b as ComposerProps, M as MessageProps, T as ThemeProviderProps, c as ThreadProps, d as ToolPartInfo, e as ToolResultProps } from './ThemeProvider-A7krFsCJ.mjs';
+export { C as ChatProps, a as ChatProviderProps, b as ComposerProps, M as MessageProps, T as ThemeProviderProps, c as ThreadProps, d as ToolPartInfo, e as ToolResultProps } from './ThemeProvider-Dx3STQtp.mjs';
 import 'zod';
 import 'react';
 import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export { C as CacheConfig, a as ClientFetchConfig, b as ClientHandler, S as ServerHandler, c as StreamCallback, d as StreamHandler, T as Tool, e as ToolBuilder, f as ToolConfig, g as ToolContext, V as ViewComponent, h as ViewState, t as tool } from './tool-DGpwM6G6.js';
+export { C as CacheConfig, a as ClientFetchConfig, b as ClientHandler, S as ServerHandler, c as StreamCallback, d as StreamHandler, T as Tool, e as ToolBuilder, f as ToolConfig, g as ToolContext, V as ViewComponent, h as ViewState, t as tool } from './tool-yZTixiN2.js';
 import { LanguageModelV2 } from '@ai-sdk/provider';
-export { C as ChatProps, a as ChatProviderProps, b as ComposerProps, M as MessageProps, T as ThemeProviderProps, c as ThreadProps, d as ToolPartInfo, e as ToolResultProps } from './ThemeProvider-CGxHnF2T.js';
+export { C as ChatProps, a as ChatProviderProps, b as ComposerProps, M as MessageProps, T as ThemeProviderProps, c as ThreadProps, d as ToolPartInfo, e as ToolResultProps } from './ThemeProvider-BESbs5p6.js';
 import 'zod';
 import 'react';
 import 'react/jsx-runtime';

package/dist/mcp/index.d.mts

@@ -1,4 +1,4 @@
-import { T as Tool, g as ToolContext } from '../tool-DGpwM6G6.mjs';
+import { T as Tool, g as ToolContext } from '../tool-yZTixiN2.mjs';
 import { z } from 'zod';
 import 'react';
 
@@ -152,6 +152,8 @@ interface JsonSchema {
     additionalProperties?: boolean | JsonSchema;
     [key: string]: unknown;
 }
-declare function zodToJsonSchema(schema: z.ZodType): JsonSchema;
+declare function zodToJsonSchema(schema: z.ZodType | {
+    [key: string]: any;
+}): JsonSchema;
 
 export { MCPServer, type MCPServerConfig, createMCPServer, zodToJsonSchema };

package/dist/mcp/index.d.ts

@@ -1,4 +1,4 @@
-import { T as Tool, g as ToolContext } from '../tool-DGpwM6G6.js';
+import { T as Tool, g as ToolContext } from '../tool-yZTixiN2.js';
 import { z } from 'zod';
 import 'react';
 
@@ -152,6 +152,8 @@ interface JsonSchema {
     additionalProperties?: boolean | JsonSchema;
     [key: string]: unknown;
 }
-declare function zodToJsonSchema(schema: z.ZodType): JsonSchema;
+declare function zodToJsonSchema(schema: z.ZodType | {
+    [key: string]: any;
+}): JsonSchema;
 
 export { MCPServer, type MCPServerConfig, createMCPServer, zodToJsonSchema };

package/dist/mcp/index.js

@@ -296,7 +296,7 @@ var MCPServer = class {
       jsonrpc: "2.0",
       id: message.id,
       result: {
-        protocolVersion: "2024-11-05",
+        protocolVersion: "2025-11-25",
         capabilities: {
           tools: {}
         },

package/dist/mcp/index.mjs

@@ -133,7 +133,7 @@ var MCPServer = class {
       jsonrpc: "2.0",
       id: message.id,
       result: {
-        protocolVersion: "2024-11-05",
+        protocolVersion: "2025-11-25",
         capabilities: {
           tools: {}
         },

package/dist/react/index.d.mts

@@ -1,4 +1,4 @@
-import { g as ToolContext, T as Tool } from '../tool-DGpwM6G6.mjs';
+import { g as ToolContext, T as Tool } from '../tool-yZTixiN2.mjs';
 import 'zod';
 import 'react';
 

package/dist/react/index.d.ts

@@ -1,4 +1,4 @@
-import { g as ToolContext, T as Tool } from '../tool-DGpwM6G6.js';
+import { g as ToolContext, T as Tool } from '../tool-yZTixiN2.js';
 import 'zod';
 import 'react';
 

package/dist/{tool-DGpwM6G6.d.mts → tool-yZTixiN2.d.mts}

@@ -8,6 +8,16 @@ import React, { ReactElement } from 'react';
  * with Better UI's unique view integration.
  */
 
+/**
+ * Schema type that works with both Zod 3 and Zod 4.
+ * Zod 4 removed internal properties (_parse, _type, etc.) from ZodType,
+ * so we use a structural type instead of z.ZodType directly.
+ */
+type ZodSchema<T = any> = z.ZodType<T> | {
+    parse: (data: unknown) => T;
+    safeParse: (data: unknown) => any;
+    [key: string]: any;
+};
 /** Behavioral hints for tools */
 interface ToolHints {
     /** Tool performs destructive/irreversible actions (auto-implies requiresConfirmation) */
@@ -63,8 +73,8 @@ interface ClientFetchConfig {
 interface ToolConfig<TInput, TOutput> {
     name: string;
     description?: string;
-    input: z.ZodType<TInput>;
-    output?: z.ZodType<TOutput>;
+    input: ZodSchema<TInput>;
+    output?: ZodSchema<TOutput>;
     tags?: string[];
     cache?: CacheConfig<TInput>;
     /** Configure auto-fetch behavior for client-side execution */
@@ -99,8 +109,8 @@ type ViewComponent<TOutput, TInput = unknown> = (data: TOutput, state?: ViewStat
 declare class Tool<TInput = any, TOutput = any> {
     readonly name: string;
     readonly description?: string;
-    readonly inputSchema: z.ZodType<TInput>;
-    readonly outputSchema?: z.ZodType<TOutput>;
+    readonly inputSchema: ZodSchema<TInput>;
+    readonly outputSchema?: ZodSchema<TOutput>;
     readonly tags: string[];
     readonly cacheConfig?: CacheConfig<TInput>;
     readonly clientFetchConfig?: ClientFetchConfig;
@@ -233,11 +243,11 @@ declare class Tool<TInput = any, TOutput = any> {
      */
     toAITool(): {
         description: string;
-        inputSchema: z.ZodType<TInput, z.ZodTypeDef, TInput>;
+        inputSchema: ZodSchema<TInput>;
         execute?: undefined;
     } | {
         description: string;
-        inputSchema: z.ZodType<TInput, z.ZodTypeDef, TInput>;
+        inputSchema: ZodSchema<TInput>;
         execute: (input: TInput) => Promise<TOutput>;
     };
 }
@@ -294,11 +304,11 @@ declare class ToolBuilder<TInput = any, TOutput = any> {
      * 2. The return type correctly reflects the new generic parameter
      * 3. TypeScript doesn't support "this type mutation" in fluent builders
      */
-    input<T>(schema: z.ZodType<T>): ToolBuilder<T, TOutput>;
+    input<T>(schema: ZodSchema<T>): ToolBuilder<T, TOutput>;
     /**
      * Define output schema - enables type inference for results
      */
-    output<O>(schema: z.ZodType<O>): ToolBuilder<TInput, O>;
+    output<O>(schema: ZodSchema<O>): ToolBuilder<TInput, O>;
     tags(...tags: string[]): this;
     cache(config: CacheConfig<TInput>): this;
     /** Configure auto-fetch endpoint for client-side execution */
@@ -349,11 +359,11 @@ declare class ToolBuilder<TInput = any, TOutput = any> {
     };
     toAITool(): {
         description: string;
-        inputSchema: z.ZodType<TInput, z.ZodTypeDef, TInput>;
+        inputSchema: ZodSchema<TInput>;
         execute?: undefined;
     } | {
         description: string;
-        inputSchema: z.ZodType<TInput, z.ZodTypeDef, TInput>;
+        inputSchema: ZodSchema<TInput>;
         execute: (input: TInput) => Promise<TOutput>;
     };
 }

package/dist/{tool-DGpwM6G6.d.ts → tool-yZTixiN2.d.ts}

@@ -8,6 +8,16 @@ import React, { ReactElement } from 'react';
  * with Better UI's unique view integration.
  */
 
+/**
+ * Schema type that works with both Zod 3 and Zod 4.
+ * Zod 4 removed internal properties (_parse, _type, etc.) from ZodType,
+ * so we use a structural type instead of z.ZodType directly.
+ */
+type ZodSchema<T = any> = z.ZodType<T> | {
+    parse: (data: unknown) => T;
+    safeParse: (data: unknown) => any;
+    [key: string]: any;
+};
 /** Behavioral hints for tools */
 interface ToolHints {
     /** Tool performs destructive/irreversible actions (auto-implies requiresConfirmation) */
@@ -63,8 +73,8 @@ interface ClientFetchConfig {
 interface ToolConfig<TInput, TOutput> {
     name: string;
     description?: string;
-    input: z.ZodType<TInput>;
-    output?: z.ZodType<TOutput>;
+    input: ZodSchema<TInput>;
+    output?: ZodSchema<TOutput>;
     tags?: string[];
     cache?: CacheConfig<TInput>;
     /** Configure auto-fetch behavior for client-side execution */
@@ -99,8 +109,8 @@ type ViewComponent<TOutput, TInput = unknown> = (data: TOutput, state?: ViewStat
 declare class Tool<TInput = any, TOutput = any> {
     readonly name: string;
     readonly description?: string;
-    readonly inputSchema: z.ZodType<TInput>;
-    readonly outputSchema?: z.ZodType<TOutput>;
+    readonly inputSchema: ZodSchema<TInput>;
+    readonly outputSchema?: ZodSchema<TOutput>;
     readonly tags: string[];
     readonly cacheConfig?: CacheConfig<TInput>;
     readonly clientFetchConfig?: ClientFetchConfig;
@@ -233,11 +243,11 @@ declare class Tool<TInput = any, TOutput = any> {
      */
     toAITool(): {
         description: string;
-        inputSchema: z.ZodType<TInput, z.ZodTypeDef, TInput>;
+        inputSchema: ZodSchema<TInput>;
         execute?: undefined;
     } | {
         description: string;
-        inputSchema: z.ZodType<TInput, z.ZodTypeDef, TInput>;
+        inputSchema: ZodSchema<TInput>;
         execute: (input: TInput) => Promise<TOutput>;
     };
 }
@@ -294,11 +304,11 @@ declare class ToolBuilder<TInput = any, TOutput = any> {
      * 2. The return type correctly reflects the new generic parameter
      * 3. TypeScript doesn't support "this type mutation" in fluent builders
      */
-    input<T>(schema: z.ZodType<T>): ToolBuilder<T, TOutput>;
+    input<T>(schema: ZodSchema<T>): ToolBuilder<T, TOutput>;
     /**
      * Define output schema - enables type inference for results
      */
-    output<O>(schema: z.ZodType<O>): ToolBuilder<TInput, O>;
+    output<O>(schema: ZodSchema<O>): ToolBuilder<TInput, O>;
     tags(...tags: string[]): this;
     cache(config: CacheConfig<TInput>): this;
     /** Configure auto-fetch endpoint for client-side execution */
@@ -349,11 +359,11 @@ declare class ToolBuilder<TInput = any, TOutput = any> {
     };
     toAITool(): {
         description: string;
-        inputSchema: z.ZodType<TInput, z.ZodTypeDef, TInput>;
+        inputSchema: ZodSchema<TInput>;
         execute?: undefined;
     } | {
         description: string;
-        inputSchema: z.ZodType<TInput, z.ZodTypeDef, TInput>;
+        inputSchema: ZodSchema<TInput>;
         execute: (input: TInput) => Promise<TOutput>;
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lantos1618/better-ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A minimal, type-safe AI-first UI framework for building tools",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -81,7 +81,7 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.0.2",
-    "zod": "^3.25.76"
+    "zod": "^3.25.76 || ^4.0.0"
   },
   "peerDependencies": {
     "@ai-sdk/anthropic": "^3.0.0",