@lantos1618/better-ui 0.1.0

package/lib/aui/examples/concise-api.tsx

@@ -0,0 +1,153 @@
+import aui, { z } from '../index';
+
+// Simple tool - just 2 methods
+export const simpleTool = aui
+  .tool('weather')
+  .input(z.object({ city: z.string() }))
+  .execute(async ({ input }) => ({ temp: 72, city: input.city }));
+
+// With render
+export const withRenderTool = aui
+  .tool('temperature')
+  .input(z.object({ city: z.string() }))
+  .execute(async ({ input }) => ({ temp: 72, city: input.city }))
+  .render(({ data }) => <div>{data.city}: {data.temp}°</div>);
+
+// Complex tool - adds client optimization
+export const complexTool = aui
+  .tool('search')
+  .input(z.object({ query: z.string() }))
+  .execute(async ({ input }) => {
+    // Server-side: database search
+    return { results: [`Server result for ${input.query}`] };
+  })
+  .clientExecute(async ({ input, ctx }) => {
+    // Client-side: check cache first, then fetch
+    const cached = ctx.cache.get(input.query);
+    if (cached) return cached;
+    
+    const result = await ctx.fetch('/api/tools/search', { 
+      method: 'POST',
+      body: JSON.stringify(input) 
+    }).then(r => r.json());
+    
+    ctx.cache.set(input.query, result);
+    return result;
+  })
+  .render(({ data }) => (
+    <ul>
+      {data.results.map((r, i) => <li key={i}>{r}</li>)}
+    </ul>
+  ));
+
+// AI control tool
+export const aiTool = aui
+  .tool('dom-click')
+  .input(z.object({ selector: z.string() }))
+  .execute(async ({ input }) => {
+    const element = document.querySelector(input.selector);
+    if (element instanceof HTMLElement) {
+      element.click();
+      return { success: true, selector: input.selector };
+    }
+    return { success: false, selector: input.selector };
+  });
+
+// With middleware for auth/logging
+export const protectedTool = aui
+  .tool('user-data')
+  .input(z.object({ userId: z.string() }))
+  .middleware(async ({ input, ctx, next }) => {
+    // Check auth
+    if (!ctx.user) throw new Error('Unauthorized');
+    // Log access
+    console.log(`User ${ctx.user.id} accessing ${input.userId}`);
+    return next();
+  })
+  .execute(async ({ input }) => ({ 
+    userId: input.userId, 
+    data: 'sensitive data' 
+  }));
+
+// Chained/composed tools
+export const composedTool = aui
+  .tool('weather-report')
+  .input(z.object({ city: z.string() }))
+  .execute(async ({ input }) => {
+    // Get weather
+    const weather = await simpleTool.run({ city: input.city });
+    // Get forecast
+    const forecast = ['Sunny', 'Cloudy', 'Rainy'][Math.floor(Math.random() * 3)];
+    return { ...weather, forecast };
+  })
+  .render(({ data }) => (
+    <div>
+      <h3>{data.city}</h3>
+      <p>Current: {data.temp}°</p>
+      <p>Forecast: {data.forecast}</p>
+    </div>
+  ));
+
+// Tagged tools for discovery
+export const notificationTool = aui
+  .tool('notify')
+  .tag('ui', 'notification')
+  .describe('Show a notification to the user')
+  .input(z.object({ 
+    message: z.string(),
+    type: z.enum(['info', 'success', 'error']).optional() 
+  }))
+  .execute(async ({ input }) => {
+    // In real app, would show actual notification
+    console.log(`[${input.type || 'info'}] ${input.message}`);
+    return { shown: true };
+  });
+
+// Streaming tool (for Vercel AI SDK)
+export const streamingTool = aui
+  .tool('generate-text')
+  .input(z.object({ prompt: z.string() }))
+  .execute(async function* ({ input }) {
+    const words = input.prompt.split(' ');
+    for (const word of words) {
+      await new Promise(r => setTimeout(r, 100));
+      yield word + ' ';
+    }
+  });
+
+// Batch processing tool
+export const batchTool = aui
+  .tool('batch-process')
+  .input(z.object({ items: z.array(z.string()) }))
+  .execute(async ({ input }) => {
+    const results = await Promise.all(
+      input.items.map(async item => {
+        // Process each item
+        return { item, processed: item.toUpperCase() };
+      })
+    );
+    return { results };
+  });
+
+// Error handling
+export const errorHandlingTool = aui
+  .tool('safe-fetch')
+  .input(z.object({ url: z.string().url() }))
+  .execute(async ({ input }) => {
+    try {
+      const response = await fetch(input.url);
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      return { data: await response.json(), error: null };
+    } catch (error) {
+      return { data: null, error: error instanceof Error ? error.message : 'Unknown error' };
+    }
+  })
+  .render(({ data }) => (
+    <div>
+      {data.error ? (
+        <p style={{ color: 'red' }}>Error: {data.error}</p>
+      ) : (
+        <pre>{JSON.stringify(data.data, null, 2)}</pre>
+      )}
+    </div>
+  ));

package/lib/aui/examples/index.tsx

@@ -0,0 +1,163 @@
+// AUI Tool Examples
+import aui, { z } from '../index';
+import React from 'react';
+
+// Simple weather tool - just 2 methods
+export const weatherTool = aui
+  .tool('weather')
+  .input(z.object({ city: z.string() }))
+  .execute(async ({ input }) => ({ 
+    temp: Math.floor(Math.random() * 30) + 60, 
+    city: input.city,
+    condition: 'Sunny',
+    humidity: 65
+  }))
+  .render(({ data }) => (
+    <div className="p-4 bg-blue-50 rounded-lg">
+      <h3 className="text-lg font-semibold">{data.city}</h3>
+      <p className="text-2xl font-bold">{data.temp}°F</p>
+      <p className="text-sm text-gray-600">{data.condition} • {data.humidity}% humidity</p>
+    </div>
+  ));
+
+// Complex search tool - adds client optimization
+export const searchTool = aui
+  .tool('search')
+  .input(z.object({ query: z.string() }))
+  .execute(async ({ input }) => {
+    // Simulate database search
+    await new Promise(r => setTimeout(r, 500));
+    return {
+      results: [
+        { id: 1, title: `Result for "${input.query}"`, score: 0.95, description: 'First matching result with high relevance' },
+        { id: 2, title: `Another result`, score: 0.87, description: 'Secondary result with good relevance' },
+        { id: 3, title: `Related content`, score: 0.72, description: 'Additional related information' }
+      ],
+      total: 3,
+      query: input.query
+    };
+  })
+  .clientExecute(async ({ input, ctx }) => {
+    // Client-side optimization with caching
+    const cacheKey = `search:${input.query}`;
+    const cached = ctx.cache.get(cacheKey);
+    if (cached) {
+      console.log(`Cache hit for query: ${input.query}`);
+      return cached;
+    }
+    
+    const result = await ctx.fetch('/api/aui/execute', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ tool: 'search', input })
+    }).then(r => r.json());
+    
+    ctx.cache.set(cacheKey, result);
+    return result;
+  })
+  .render(({ data, loading, error }) => {
+    if (loading) return <div className="animate-pulse">Searching...</div>;
+    if (error) return <div className="text-red-500">Error: {error.message}</div>;
+    if (!data) return <div className="text-gray-400">No data</div>;
+    
+    return (
+      <div className="space-y-3">
+        <p className="text-sm text-gray-600">Found {data.total} results for &quot;{data.query}&quot;</p>
+        {data.results.map((result: any) => (
+          <div key={result.id} className="p-3 bg-white border rounded-lg hover:shadow-md transition-shadow">
+            <h4 className="font-semibold">{result.title}</h4>
+            <p className="text-sm text-gray-600">{result.description}</p>
+            <span className="text-xs text-blue-600">Score: {result.score}</span>
+          </div>
+        ))}
+      </div>
+    );
+  });
+
+// Calculator tool with render
+export const calculatorTool = aui
+  .tool('calculator')
+  .input(z.object({ 
+    a: z.number(), 
+    b: z.number(), 
+    op: z.enum(['+', '-', '*', '/']) 
+  }))
+  .execute(({ input }) => {
+    const ops = {
+      '+': (a: number, b: number) => a + b,
+      '-': (a: number, b: number) => a - b,
+      '*': (a: number, b: number) => a * b,
+      '/': (a: number, b: number) => a / b
+    };
+    return { 
+      result: ops[input.op](input.a, input.b),
+      expression: `${input.a} ${input.op} ${input.b}`
+    };
+  })
+  .render(({ data }) => (
+    <div className="p-3 bg-gray-50 rounded-lg font-mono">
+      <span className="text-gray-600">{data?.expression || ''} =</span>
+      <span className="ml-2 text-xl font-bold">{data?.result || 0}</span>
+    </div>
+  ));
+
+// Data fetcher tool with both server and client execution
+export const dataFetcherTool = aui
+  .tool('dataFetcher')
+  .input(z.object({ 
+    endpoint: z.string(),
+    method: z.enum(['GET', 'POST']).default('GET'),
+    body: z.any().optional()
+  }))
+  .execute(async ({ input }) => {
+    // Server-side execution
+    const response = await fetch(input.endpoint, {
+      method: input.method,
+      headers: { 'Content-Type': 'application/json' },
+      body: input.body ? JSON.stringify(input.body) : undefined
+    });
+    return await response.json();
+  })
+  .clientExecute(async ({ input, ctx }) => {
+    // Client-side with request deduplication
+    const requestKey = `${input.method}:${input.endpoint}:${JSON.stringify(input.body)}`;
+    
+    // Check if request is already in flight
+    const inflight = ctx.cache.get(`inflight:${requestKey}`);
+    if (inflight) return inflight;
+    
+    // Check cache
+    const cached = ctx.cache.get(requestKey);
+    if (cached && input.method === 'GET') return cached;
+    
+    // Make request
+    const promise = ctx.fetch(input.endpoint, {
+      method: input.method,
+      headers: { 'Content-Type': 'application/json' },
+      body: input.body ? JSON.stringify(input.body) : undefined
+    }).then(r => r.json());
+    
+    // Store inflight request
+    ctx.cache.set(`inflight:${requestKey}`, promise);
+    
+    const result = await promise;
+    
+    // Clear inflight and cache result
+    ctx.cache.delete(`inflight:${requestKey}`);
+    if (input.method === 'GET') {
+      ctx.cache.set(requestKey, result);
+    }
+    
+    return result;
+  })
+  .render(({ data, loading }) => {
+    if (loading) return <div className="animate-pulse">Fetching data...</div>;
+    return (
+      <pre className="p-3 bg-gray-900 text-green-400 rounded-lg overflow-auto">
+        {data ? JSON.stringify(data, null, 2) : 'No data'}
+      </pre>
+    );
+  });
+
+// Export advanced tools
+export * from '../tools/advanced-examples';

package/lib/aui/examples/quick-demo.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import React from 'react';
+import aui from '../index';
+import { z } from 'zod';
+
+// Simple tool - just 2 methods
+const weatherTool = aui
+  .tool('weather')
+  .input(z.object({ city: z.string() }))
+  .execute(async ({ input }) => ({ temp: 72, city: input.city }))
+  .render(({ data }) => <div>{data.city}: {data.temp}°</div>);
+
+// Complex tool - adds client optimization
+const searchTool = aui
+  .tool('search')
+  .input(z.object({ query: z.string() }))
+  .execute(async ({ input }) => {
+    // Server-side: database search
+    return { results: [`Result for ${input.query}`] };
+  })
+  .clientExecute(async ({ input, ctx }) => {
+    // Client-side: cache-first strategy
+    const cached = ctx.cache.get(input.query);
+    if (cached) return cached;
+    
+    const result = await ctx.fetch('/api/tools/search', {
+      method: 'POST',
+      body: JSON.stringify(input)
+    }).then(r => r.json());
+    
+    ctx.cache.set(input.query, result);
+    return result;
+  })
+  .render(({ data }) => (
+    <div>
+      <h3>Search Results</h3>
+      <ul>
+        {data.results?.map((item: string, i: number) => (
+          <li key={i}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  ));
+
+// Export tools for use in components
+export { weatherTool, searchTool };
+
+// Demo component
+export function QuickDemo() {
+  const [weatherData, setWeatherData] = React.useState<any>(null);
+  const [searchData, setSearchData] = React.useState<any>(null);
+
+  const handleWeather = async () => {
+    const data = await weatherTool.run({ city: 'San Francisco' });
+    setWeatherData(data);
+  };
+
+  const handleSearch = async () => {
+    const data = await searchTool.run({ query: 'AI tools' });
+    setSearchData(data);
+  };
+
+  return (
+    <div className="p-4 space-y-4">
+      <h2 className="text-2xl font-bold">AUI Quick Demo</h2>
+      
+      <div className="space-y-2">
+        <button 
+          onClick={handleWeather}
+          className="px-4 py-2 bg-blue-500 text-white rounded"
+        >
+          Get Weather
+        </button>
+        {weatherData && weatherTool.renderer && 
+          weatherTool.renderer({ data: weatherData })}
+      </div>
+
+      <div className="space-y-2">
+        <button 
+          onClick={handleSearch}
+          className="px-4 py-2 bg-green-500 text-white rounded"
+        >
+          Search
+        </button>
+        {searchData && searchTool.renderer && 
+          searchTool.renderer({ data: searchData })}
+      </div>
+    </div>
+  );
+}

package/lib/aui/examples/simple-demo.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import aui from '../index';
+import { z } from 'zod';
+
+// Simple tool - just 2 methods (execute + render)
+const simpleTool = aui
+  .tool('weather')
+  .input(z.object({ city: z.string() }))
+  .execute(async ({ input }) => ({ temp: 72, city: input.city }))
+  .render(({ data }) => <div>{data.city}: {data.temp}°</div>);
+
+// Complex tool - adds client optimization  
+const complexTool = aui
+  .tool('search')
+  .input(z.object({ query: z.string() }))
+  .execute(async ({ input }) => {
+    // Server-side database search
+    const response = await fetch('/api/db/search', {
+      method: 'POST',
+      body: JSON.stringify(input)
+    });
+    return response.json();
+  })
+  .clientExecute(async ({ input, ctx }) => {
+    // Only when you need caching, offline, etc.
+    const cached = ctx.cache.get(input.query);
+    return cached || ctx.fetch('/api/tools/search', { 
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(input) 
+    }).then(r => r.json());
+  })
+  .render(({ data }) => (
+    <div className="space-y-2">
+      {data.map((item: any) => (
+        <div key={item.id} className="p-2 border rounded">
+          {item.title}
+        </div>
+      ))}
+    </div>
+  ));
+
+// Tool with middleware for auth/logging
+const protectedTool = aui
+  .tool('admin-action')
+  .input(z.object({ action: z.string() }))
+  .middleware(async ({ input, ctx, next }) => {
+    if (!ctx?.user) throw new Error('Auth required');
+    console.log(`User ${ctx.user.id} performing ${input.action}`);
+    return next();
+  })
+  .execute(async ({ input }) => ({ 
+    success: true, 
+    action: input.action 
+  }))
+  .render(({ data }) => (
+    <div className="text-green-600">
+      ✓ {data.action} completed
+    </div>
+  ));
+
+// Minimal tool - execute only (no render needed)
+const apiTool = aui
+  .tool('api-call')
+  .input(z.object({ endpoint: z.string() }))
+  .execute(async ({ input }) => {
+    const res = await fetch(input.endpoint);
+    return res.json();
+  });
+
+export { simpleTool, complexTool, protectedTool, apiTool };

package/lib/aui/examples/simple-tools.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import aui from '../index';
+import { z } from 'zod';
+
+// Simple weather tool - just 2 methods
+export const weatherTool = aui
+  .tool('weather')
+  .input(z.object({ city: z.string() }))
+  .execute(async ({ input }) => ({ temp: 72, city: input.city }))
+  .render(({ data }) => <div>{data.city}: {data.temp}°</div>);
+
+// Complex search tool - adds client optimization
+export const searchTool = aui
+  .tool('search')
+  .input(z.object({ query: z.string() }))
+  .execute(async ({ input }) => {
+    // Server-side: Mock database search
+    const results = [
+      { id: 1, title: `Result for "${input.query}"`, content: 'Lorem ipsum...' },
+      { id: 2, title: `Another match for "${input.query}"`, content: 'Dolor sit amet...' },
+    ];
+    return { query: input.query, results };
+  })
+  .clientExecute(async ({ input, ctx }) => {
+    // Client-side: Check cache first, then fetch
+    const cacheKey = `search:${input.query}`;
+    const cached = ctx.cache.get(cacheKey);
+    if (cached) return cached;
+    
+    const response = await ctx.fetch('/api/aui/execute', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ tool: 'search', input })
+    });
+    const data = await response.json();
+    ctx.cache.set(cacheKey, data);
+    return data;
+  })
+  .render(({ data }) => (
+    <div className="search-results">
+      <h3>Search Results for &quot;{data.query}&quot;</h3>
+      {data.results.map((result: any) => (
+        <div key={result.id} className="result-item">
+          <h4>{result.title}</h4>
+          <p>{result.content}</p>
+        </div>
+      ))}
+    </div>
+  ));
+
+// Calculator tool - demonstrates middleware
+export const calculatorTool = aui
+  .tool('calculator')
+  .input(z.object({ 
+    operation: z.enum(['add', 'subtract', 'multiply', 'divide']),
+    a: z.number(),
+    b: z.number()
+  }))
+  .middleware(async ({ input, next }) => {
+    console.log(`Calculating: ${input.a} ${input.operation} ${input.b}`);
+    const result = await next();
+    console.log(`Result: ${result}`);
+    return result;
+  })
+  .execute(({ input }) => {
+    const { operation, a, b } = input;
+    switch (operation) {
+      case 'add': return a + b;
+      case 'subtract': return a - b;
+      case 'multiply': return a * b;
+      case 'divide': return b !== 0 ? a / b : NaN;
+      default: throw new Error(`Unknown operation: ${operation}`);
+    }
+  })
+  .render(({ data, input }) => (
+    <div className="calculator-result">
+      {input?.a} {input?.operation} {input?.b} = {data}
+    </div>
+  ));
+
+// Form submission tool
+export const formTool = aui
+  .tool('submitForm')
+  .input(z.object({
+    name: z.string().min(1),
+    email: z.string().email(),
+    message: z.string().optional()
+  }))
+  .execute(async ({ input }) => {
+    // Simulate form submission
+    await new Promise(resolve => setTimeout(resolve, 500));
+    return { success: true, id: Math.random().toString(36).substr(2, 9), ...input };
+  })
+  .render(({ data, loading, error }) => {
+    if (loading) return <div>Submitting...</div>;
+    if (error) return <div className="error">Error: {error.message}</div>;
+    return (
+      <div className="form-success">
+        ✅ Form submitted successfully!
+        <p>Submission ID: {data.id}</p>
+        <p>Name: {data.name}</p>
+        <p>Email: {data.email}</p>
+        {data.message && <p>Message: {data.message}</p>}
+      </div>
+    );
+  });
+
+// Navigation tool - AI can control page navigation
+export const navigationTool = aui
+  .tool('navigate')
+  .input(z.object({ 
+    path: z.string(),
+    params: z.record(z.string()).optional()
+  }))
+  .clientExecute(async ({ input }) => {
+    const url = new URL(input.path, window.location.origin);
+    if (input.params) {
+      Object.entries(input.params).forEach(([key, value]) => {
+        url.searchParams.set(key, value);
+      });
+    }
+    window.history.pushState({}, '', url.toString());
+    return { navigated: true, url: url.toString() };
+  })
+  .render(({ data }) => (
+    <div>Navigated to: {data.url}</div>
+  ));
+
+// State management tool - AI can control application state
+export const stateTool = aui
+  .tool('setState')
+  .input(z.object({
+    key: z.string(),
+    value: z.any(),
+    action: z.enum(['set', 'get', 'delete']).default('set')
+  }))
+  .clientExecute(({ input, ctx }) => {
+    const stateMap = ctx.cache.get('appState') || new Map();
+    
+    switch (input.action) {
+      case 'get':
+        return { key: input.key, value: stateMap.get(input.key) };
+      case 'delete':
+        stateMap.delete(input.key);
+        ctx.cache.set('appState', stateMap);
+        return { key: input.key, deleted: true };
+      case 'set':
+      default:
+        stateMap.set(input.key, input.value);
+        ctx.cache.set('appState', stateMap);
+        return { key: input.key, value: input.value, updated: true };
+    }
+  })
+  .render(({ data }) => (
+    <div className="state-update">
+      {data.deleted ? `Deleted: ${data.key}` : 
+       data.updated ? `Updated: ${data.key} = ${JSON.stringify(data.value)}` :
+       `Retrieved: ${data.key} = ${JSON.stringify(data.value)}`}
+    </div>
+  ));