@lantos1618/better-ui 0.6.1 → 0.7.1

package/README.md

@@ -3,9 +3,13 @@
 > Define once. Render in UI. Serve over MCP. Type-safe AI tools with views.
 
 [![npm version](https://img.shields.io/npm/v/@lantos1618/better-ui.svg)](https://www.npmjs.com/package/@lantos1618/better-ui)
+[![npm downloads](https://img.shields.io/npm/dm/@lantos1618/better-ui.svg)](https://www.npmjs.com/package/@lantos1618/better-ui)
+[![CI](https://github.com/lantos1618/better-ui/actions/workflows/test.yml/badge.svg)](https://github.com/lantos1618/better-ui/actions/workflows/test.yml)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)](https://www.typescriptlang.org/)
 
+**[Guide](./GUIDE.md)** · **[API Reference](./docs/)** · **[Examples](./examples/)**
+
 ## The Problem
 
 Every AI framework lets you define tools. None of them let the tool own its own UI. You end up with tool definitions in one place, rendering logic scattered somewhere else, and no way to expose those same tools to external AI clients.
@@ -568,10 +572,27 @@ examples/
 ```bash
 npm install
 npm run build        # Build library
-npm test             # Run tests (226 tests)
+npm test             # Run 228 tests across 11 suites
 npm run type-check   # TypeScript check
 ```
 
+## Deploy the Demo
+
+The `examples/nextjs-demo/` is a full-featured chat app ready to deploy:
+
+```bash
+cd examples/nextjs-demo
+npm install
+# Set OPENAI_API_KEY in .env.local
+npm run dev
+```
+
+To deploy on Vercel, set the **Root Directory** to `examples/nextjs-demo` in your project settings.
+
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.
+
 ## License
 
 MIT

package/dist/{ThemeProvider-BaVZaDBO.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-Ca2x-VNK.js';
+import { T as Tool } from './tool-yZTixiN2.js';
 import { P as PersistenceAdapter, T as Thread$1 } from './types-CAOfGUPH.js';
 
 interface ToolStateEntry {
@@ -184,4 +184,4 @@ interface ThemeProviderProps {
  */
 declare function ThemeProvider({ theme, variables, className, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 
-export { type ChatProviderProps as C, type MessageProps as M, type ToolPartInfo as T, type ThreadProps as a, type ComposerProps as b, type ToolResultProps as c, type ChatProps as d, type ThemeProviderProps as e, type ToolStateStore as f, type ToolStateEntry as g, ChatProvider as h, Thread as i, Message as j, Composer as k, ToolResult as l, Chat as m, createToolStateStore as n, useToolState as o, ThemeProvider as p, useChatContext as u };
+export { type ChatProps as C, type MessageProps as M, type ThemeProviderProps as T, type ChatProviderProps as a, type ComposerProps as b, type ThreadProps as c, type ToolPartInfo as d, type ToolResultProps as e, type ToolStateStore as f, type ToolStateEntry as g, Chat as h, ChatProvider as i, Composer as j, Message as k, ThemeProvider as l, Thread as m, ToolResult as n, createToolStateStore as o, useToolState as p, useChatContext as u };

package/dist/{ThemeProvider-BYeqWMsn.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-Ca2x-VNK.mjs';
+import { T as Tool } from './tool-yZTixiN2.mjs';
 import { P as PersistenceAdapter, T as Thread$1 } from './types-CAOfGUPH.mjs';
 
 interface ToolStateEntry {
@@ -184,4 +184,4 @@ interface ThemeProviderProps {
  */
 declare function ThemeProvider({ theme, variables, className, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 
-export { type ChatProviderProps as C, type MessageProps as M, type ToolPartInfo as T, type ThreadProps as a, type ComposerProps as b, type ToolResultProps as c, type ChatProps as d, type ThemeProviderProps as e, type ToolStateStore as f, type ToolStateEntry as g, ChatProvider as h, Thread as i, Message as j, Composer as k, ToolResult as l, Chat as m, createToolStateStore as n, useToolState as o, ThemeProvider as p, useChatContext as u };
+export { type ChatProps as C, type MessageProps as M, type ThemeProviderProps as T, type ChatProviderProps as a, type ComposerProps as b, type ThreadProps as c, type ToolPartInfo as d, type ToolResultProps as e, type ToolStateStore as f, type ToolStateEntry as g, Chat as h, ChatProvider as i, Composer as j, Message as k, ThemeProvider as l, Thread as m, ToolResult as n, createToolStateStore as o, useToolState as p, useChatContext as u };

package/dist/agui/index.d.mts

@@ -1,4 +1,4 @@
-import { T as Tool, c as ToolContext } from '../tool-Ca2x-VNK.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, c as ToolContext } from '../tool-Ca2x-VNK.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-BYeqWMsn.mjs';
-export { m as Chat, d as ChatProps, h as ChatProvider, C as ChatProviderProps, k as Composer, b as ComposerProps, j as Message, M as MessageProps, p as ThemeProvider, e as ThemeProviderProps, i as Thread, a as ThreadProps, T as ToolPartInfo, l as ToolResult, c as ToolResultProps, n as createToolStateStore, u as useChatContext, o as useToolState } from '../ThemeProvider-BYeqWMsn.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-Ca2x-VNK.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-BaVZaDBO.js';
-export { m as Chat, d as ChatProps, h as ChatProvider, C as ChatProviderProps, k as Composer, b as ComposerProps, j as Message, M as MessageProps, p as ThemeProvider, e as ThemeProviderProps, i as Thread, a as ThreadProps, T as ToolPartInfo, l as ToolResult, c as ToolResultProps, n as createToolStateStore, u as useChatContext, o as useToolState } from '../ThemeProvider-BaVZaDBO.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-Ca2x-VNK.js';
+import { T as Tool } from '../tool-yZTixiN2.js';
 import React from 'react';
 import 'ai';
 import '../types-CAOfGUPH.js';

package/dist/index.d.mts

@@ -1,6 +1,6 @@
-export { g as CacheConfig, h as ClientFetchConfig, C as ClientHandler, S as ServerHandler, d as StreamCallback, e as StreamHandler, T as Tool, a as ToolBuilder, b as ToolConfig, c as ToolContext, V as ViewComponent, f as ViewState, t as tool } from './tool-Ca2x-VNK.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 { d as ChatProps, C as ChatProviderProps, b as ComposerProps, M as MessageProps, e as ThemeProviderProps, a as ThreadProps, T as ToolPartInfo, c as ToolResultProps } from './ThemeProvider-BYeqWMsn.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 { g as CacheConfig, h as ClientFetchConfig, C as ClientHandler, S as ServerHandler, d as StreamCallback, e as StreamHandler, T as Tool, a as ToolBuilder, b as ToolConfig, c as ToolContext, V as ViewComponent, f as ViewState, t as tool } from './tool-Ca2x-VNK.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 { d as ChatProps, C as ChatProviderProps, b as ComposerProps, M as MessageProps, e as ThemeProviderProps, a as ThreadProps, T as ToolPartInfo, c as ToolResultProps } from './ThemeProvider-BaVZaDBO.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, c as ToolContext } from '../tool-Ca2x-VNK.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, c as ToolContext } from '../tool-Ca2x-VNK.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/react/index.d.mts

@@ -1,4 +1,4 @@
-import { T as Tool, c as ToolContext } from '../tool-Ca2x-VNK.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 { T as Tool, c as ToolContext } from '../tool-Ca2x-VNK.js';
+import { g as ToolContext, T as Tool } from '../tool-yZTixiN2.js';
 import 'zod';
 import 'react';
 

package/dist/{tool-Ca2x-VNK.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,13 +359,13 @@ 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>;
     };
 }
 
-export { type ClientHandler as C, type ServerHandler as S, Tool as T, type ViewComponent as V, ToolBuilder as a, type ToolConfig as b, type ToolContext as c, type StreamCallback as d, type StreamHandler as e, type ViewState as f, type CacheConfig as g, type ClientFetchConfig as h, tool as t };
+export { type CacheConfig as C, type ServerHandler as S, Tool as T, type ViewComponent as V, type ClientFetchConfig as a, type ClientHandler as b, type StreamCallback as c, type StreamHandler as d, ToolBuilder as e, type ToolConfig as f, type ToolContext as g, type ViewState as h, tool as t };

package/dist/{tool-Ca2x-VNK.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,13 +359,13 @@ 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>;
     };
 }
 
-export { type ClientHandler as C, type ServerHandler as S, Tool as T, type ViewComponent as V, ToolBuilder as a, type ToolConfig as b, type ToolContext as c, type StreamCallback as d, type StreamHandler as e, type ViewState as f, type CacheConfig as g, type ClientFetchConfig as h, tool as t };
+export { type CacheConfig as C, type ServerHandler as S, Tool as T, type ViewComponent as V, type ClientFetchConfig as a, type ClientHandler as b, type StreamCallback as c, type StreamHandler as d, ToolBuilder as e, type ToolConfig as f, type ToolContext as g, type ViewState as h, tool as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lantos1618/better-ui",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "A minimal, type-safe AI-first UI framework for building tools",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -75,18 +75,18 @@
     "prepublishOnly": "npm run build:lib"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^2.0.77",
-    "@ai-sdk/react": "^2.0.107",
-    "ai": "^5.0.107",
+    "@ai-sdk/openai": "^3.0.49",
+    "@ai-sdk/react": "^3.0.145",
+    "ai": "^6.0.143",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "shiki": "^3.22.0",
-    "zod": "^3.24.0"
+    "shiki": "^4.0.2",
+    "zod": "^3.25.76 || ^4.0.0"
   },
   "peerDependencies": {
-    "@ai-sdk/anthropic": "^2.0.0",
-    "@ai-sdk/google": "^2.0.0",
-    "jose": "^5.0.0",
+    "@ai-sdk/anthropic": "^3.0.0",
+    "@ai-sdk/google": "^3.0.0",
+    "jose": "^6.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -110,18 +110,18 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/node": "^20.19.37",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^30.2.0",
-    "jose": "^6.1.3",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
-    "ts-jest": "^29.4.1",
+    "jest-environment-jsdom": "^30.3.0",
+    "jose": "^6.2.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "ts-jest": "^29.4.9",
     "tsup": "^8.5.1",
-    "typescript": "^5"
+    "typescript": "^5.9.3"
   }
 }