@lantos1618/better-ui 0.2.3 → 0.4.0

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

@@ -1,208 +0,0 @@
-'use client';
-
-import React from 'react';
-import aui from '../index';
-import { z } from 'zod';
-
-// Simple tool - just 2 methods (exactly as user requested)
-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 (exactly as user requested)
-const complexTool = aui
-  .tool('search')
-  .input(z.object({ query: z.string() }))
-  .execute(async ({ input }) => {
-    // Simulated database search
-    const results = await Promise.resolve([
-      `Result 1 for ${input.query}`,
-      `Result 2 for ${input.query}`,
-      `Result 3 for ${input.query}`
-    ]);
-    return { results, query: input.query };
-  })
-  .clientExecute(async ({ input, ctx }) => {
-    // Only when you need caching, offline, etc.
-    const cached = ctx.cache.get(input.query);
-    if (cached) {
-      console.log('Using cached result for:', input.query);
-      return cached;
-    }
-    
-    const result = await ctx.fetch('/api/tools/search', { 
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(input)
-    }).then(r => r.json()).catch(() => {
-      // Fallback for demo
-      return { 
-        results: [`Client result for ${input.query}`],
-        query: input.query 
-      };
-    });
-    
-    ctx.cache.set(input.query, result);
-    return result;
-  })
-  .render(({ data }) => (
-    <div className="space-y-2">
-      <h3 className="font-semibold">Search Results for &quot;{data.query}&quot;</h3>
-      <ul className="list-disc pl-5">
-        {data.results.map((result, i) => (
-          <li key={i}>{result}</li>
-        ))}
-      </ul>
-    </div>
-  ));
-
-// Additional examples showing the power of the API
-
-// Tool with middleware for auth/logging
-const protectedTool = aui
-  .tool('protected')
-  .input(z.object({ action: z.string() }))
-  .middleware(async ({ input, ctx, next }) => {
-    console.log('Logging action:', input.action);
-    if (!ctx.user) {
-      throw new Error('Authentication required');
-    }
-    return next();
-  })
-  .execute(async ({ input, ctx }) => ({
-    result: `Executed ${input.action} for user ${ctx?.user?.name || 'unknown'}`
-  }))
-  .render(({ data }) => <div className="text-green-600">{data.result}</div>);
-
-// Tool with tags and description for AI discovery
-const aiReadyTool = aui
-  .tool('database')
-  .input(z.object({ 
-    table: z.string(),
-    operation: z.enum(['read', 'write', 'delete'])
-  }))
-  .describe('Database operations tool for CRUD operations')
-  .tag('database', 'crud', 'ai-controlled')
-  .execute(async ({ input }) => ({
-    success: true,
-    operation: input.operation,
-    table: input.table,
-    result: `${input.operation} operation on ${input.table} completed`
-  }))
-  .render(({ data }) => (
-    <div className={`p-2 rounded ${data.success ? 'bg-green-100' : 'bg-red-100'}`}>
-      {data.result}
-    </div>
-  ));
-
-// Export all tools
-export { simpleTool, complexTool, protectedTool, aiReadyTool };
-
-// Demo component showing usage
-export function UserAPIDemo() {
-  const [results, setResults] = React.useState<Record<string, any>>({});
-  const [loading, setLoading] = React.useState<Record<string, boolean>>({});
-
-  const runTool = async (toolName: string, tool: any, input: any) => {
-    setLoading(prev => ({ ...prev, [toolName]: true }));
-    try {
-      const result = await tool.run(input, aui.createContext({
-        user: { name: 'Demo User' }
-      }));
-      setResults(prev => ({ ...prev, [toolName]: result }));
-    } catch (error) {
-      console.error(`Error running ${toolName}:`, error);
-      setResults(prev => ({ ...prev, [toolName]: { error: error instanceof Error ? error.message : 'Unknown error' } }));
-    } finally {
-      setLoading(prev => ({ ...prev, [toolName]: false }));
-    }
-  };
-
-  return (
-    <div className="p-6 space-y-6 max-w-4xl mx-auto">
-      <h1 className="text-3xl font-bold">AUI User API Demo</h1>
-      
-      <div className="space-y-4">
-        <div className="border rounded-lg p-4">
-          <h2 className="text-xl font-semibold mb-2">Simple Tool</h2>
-          <p className="text-gray-600 mb-3">Just input → execute → render</p>
-          <button
-            onClick={() => runTool('weather', simpleTool, { city: 'San Francisco' })}
-            disabled={loading.weather}
-            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
-          >
-            {loading.weather ? 'Loading...' : 'Get Weather'}
-          </button>
-          {results.weather && simpleTool.renderer && (
-            <div className="mt-3">
-              {simpleTool.renderer({ data: results.weather })}
-            </div>
-          )}
-        </div>
-
-        <div className="border rounded-lg p-4">
-          <h2 className="text-xl font-semibold mb-2">Complex Tool</h2>
-          <p className="text-gray-600 mb-3">With client-side caching and optimization</p>
-          <button
-            onClick={() => runTool('search', complexTool, { query: 'AI tools' })}
-            disabled={loading.search}
-            className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50"
-          >
-            {loading.search ? 'Searching...' : 'Search'}
-          </button>
-          {results.search && complexTool.renderer && (
-            <div className="mt-3">
-              {complexTool.renderer({ data: results.search })}
-            </div>
-          )}
-        </div>
-
-        <div className="border rounded-lg p-4">
-          <h2 className="text-xl font-semibold mb-2">Protected Tool</h2>
-          <p className="text-gray-600 mb-3">With middleware for auth/logging</p>
-          <button
-            onClick={() => runTool('protected', protectedTool, { action: 'update-profile' })}
-            disabled={loading.protected}
-            className="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600 disabled:opacity-50"
-          >
-            {loading.protected ? 'Executing...' : 'Execute Protected Action'}
-          </button>
-          {results.protected && protectedTool.renderer && (
-            <div className="mt-3">
-              {protectedTool.renderer({ data: results.protected })}
-            </div>
-          )}
-        </div>
-
-        <div className="border rounded-lg p-4">
-          <h2 className="text-xl font-semibold mb-2">AI-Ready Tool</h2>
-          <p className="text-gray-600 mb-3">With tags and description for AI discovery</p>
-          <button
-            onClick={() => runTool('database', aiReadyTool, { 
-              table: 'users', 
-              operation: 'read' 
-            })}
-            disabled={loading.database}
-            className="px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600 disabled:opacity-50"
-          >
-            {loading.database ? 'Processing...' : 'Run Database Operation'}
-          </button>
-          {results.database && aiReadyTool.renderer && (
-            <div className="mt-3">
-              {aiReadyTool.renderer({ data: results.database })}
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div className="border-t pt-4">
-        <h3 className="text-lg font-semibold mb-2">Tool Discovery</h3>
-        <p className="text-gray-600">
-          Tools registered: {aui.getToolNames().join(', ')}
-        </p>
-      </div>
-    </div>
-  );
-}

package/lib/aui/examples/user-requested.tsx

@@ -1,174 +0,0 @@
-import React from 'react';
-import aui from '../index';
-import { z } from 'zod';
-
-// Simple tool - just 2 methods
-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
-    // In real app, this would be: db.search(input.query)
-    return [
-      { id: 1, title: `Result for ${input.query}` },
-      { id: 2, title: `Another result for ${input.query}` }
-    ];
-  })
-  .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">
-      <h3 className="font-semibold">Search Results:</h3>
-      {data.map((item: any) => (
-        <div key={item.id} className="p-2 border rounded">
-          {item.title}
-        </div>
-      ))}
-    </div>
-  ));
-
-// AI Control Examples - Frontend UI manipulation
-const uiControlTool = aui
-  .tool('ui-control')
-  .input(z.object({ 
-    action: z.enum(['show', 'hide', 'toggle']),
-    element: z.string()
-  }))
-  .clientExecute(async ({ input }) => {
-    const element = document.querySelector(input.element);
-    if (!element) throw new Error(`Element ${input.element} not found`);
-    
-    switch (input.action) {
-      case 'show':
-        (element as HTMLElement).style.display = 'block';
-        break;
-      case 'hide':
-        (element as HTMLElement).style.display = 'none';
-        break;
-      case 'toggle':
-        const el = element as HTMLElement;
-        el.style.display = el.style.display === 'none' ? 'block' : 'none';
-        break;
-    }
-    
-    return { success: true, action: input.action, element: input.element };
-  })
-  .render(({ data }) => (
-    <div className="text-green-600">
-      ✓ {data.action} {data.element}
-    </div>
-  ));
-
-// Backend control - Database operations
-const databaseTool = aui
-  .tool('database')
-  .input(z.object({
-    operation: z.enum(['create', 'read', 'update', 'delete']),
-    table: z.string(),
-    data: z.any().optional()
-  }))
-  .execute(async ({ input }) => {
-    // This would connect to your actual database
-    // For demo, just return mock response
-    switch (input.operation) {
-      case 'create':
-        return { id: Math.random(), ...input.data };
-      case 'read':
-        return { id: 1, name: 'Example', table: input.table };
-      case 'update':
-        return { success: true, updated: input.data };
-      case 'delete':
-        return { success: true, deleted: input.data?.id };
-      default:
-        throw new Error('Unknown operation');
-    }
-  })
-  .render(({ data }) => (
-    <pre className="bg-gray-100 p-2 rounded">
-      {JSON.stringify(data, null, 2)}
-    </pre>
-  ));
-
-// Form generation - AI can create forms dynamically
-const formGeneratorTool = aui
-  .tool('form-generator')
-  .input(z.object({
-    fields: z.array(z.object({
-      name: z.string(),
-      type: z.enum(['text', 'number', 'email', 'select']),
-      label: z.string(),
-      required: z.boolean().optional(),
-      options: z.array(z.string()).optional()
-    }))
-  }))
-  .execute(async ({ input }) => input.fields)
-  .render(({ data }) => (
-    <form className="space-y-4">
-      {data.map(field => (
-        <div key={field.name}>
-          <label className="block text-sm font-medium mb-1">
-            {field.label}
-            {field.required && <span className="text-red-500">*</span>}
-          </label>
-          {field.type === 'select' ? (
-            <select className="w-full p-2 border rounded">
-              {field.options?.map(opt => (
-                <option key={opt} value={opt}>{opt}</option>
-              ))}
-            </select>
-          ) : (
-            <input
-              type={field.type}
-              name={field.name}
-              required={field.required}
-              className="w-full p-2 border rounded"
-            />
-          )}
-        </div>
-      ))}
-      <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
-        Submit
-      </button>
-    </form>
-  ));
-
-// Export all tools for use
-export { 
-  simpleTool, 
-  complexTool, 
-  uiControlTool, 
-  databaseTool, 
-  formGeneratorTool 
-};
-
-// Example of using tools programmatically
-export async function exampleUsage() {
-  // Execute a tool
-  const weatherResult = await simpleTool.run({ city: 'New York' });
-  console.log(weatherResult); // { temp: 72, city: 'New York' }
-  
-  // Execute with context
-  const searchResult = await complexTool.run(
-    { query: 'typescript' },
-    { 
-      cache: new Map(),
-      fetch: globalThis.fetch,
-      user: { id: 1, name: 'User' }
-    }
-  );
-  console.log(searchResult);
-}

package/lib/aui/examples/weather-search-tools.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-import { z } from 'zod';
-import aui from '../index';
-
-// Simple tool - just 2 methods (input, execute, render)
-export const weatherTool = aui
-  .tool('weather')
-  .input(z.object({ city: z.string() }))
-  .execute(async ({ input }) => ({ 
-    temp: 72, 
-    city: input.city,
-    conditions: 'Sunny',
-    humidity: 65
-  }))
-  .render(({ data }) => (
-    <div className="p-4 bg-blue-50 rounded-lg">
-      <h3 className="font-bold text-lg">{data.city}</h3>
-      <p className="text-2xl">{data.temp}°F</p>
-      <p className="text-gray-600">{data.conditions}</p>
-      <p className="text-sm">Humidity: {data.humidity}%</p>
-    </div>
-  ));
-
-// Mock database search function
-const mockDbSearch = async (query: string) => {
-  await new Promise(resolve => setTimeout(resolve, 100));
-  return [
-    { id: 1, title: `Result for "${query}"`, score: 0.95 },
-    { id: 2, title: `Another match for "${query}"`, score: 0.87 },
-    { id: 3, title: `Related to "${query}"`, score: 0.72 }
-  ];
-};
-
-// Complex tool - adds client optimization
-export const searchTool = aui
-  .tool('search')
-  .input(z.object({ query: z.string() }))
-  .execute(async ({ input }) => mockDbSearch(input.query))
-  .clientExecute(async ({ input, ctx }) => {
-    // Only when you need caching, offline, etc.
-    const cacheKey = `search:${input.query}`;
-    const cached = ctx.cache.get(cacheKey);
-    
-    if (cached) {
-      console.log(`Cache hit for query: ${input.query}`);
-      return cached;
-    }
-    
-    console.log(`Cache miss for query: ${input.query}, fetching...`);
-    const results = await ctx.fetch('/api/tools/search', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(input)
-    }).then(res => res.json());
-    
-    ctx.cache.set(cacheKey, results);
-    return results;
-  })
-  .render(({ data }) => (
-    <div className="p-4 bg-gray-50 rounded-lg">
-      <h3 className="font-bold mb-3">Search Results</h3>
-      <ul className="space-y-2">
-        {data.map((result: any) => (
-          <li key={result.id} className="bg-white p-2 rounded shadow-sm">
-            <div className="font-medium">{result.title}</div>
-            <div className="text-sm text-gray-500">Score: {result.score}</div>
-          </li>
-        ))}
-      </ul>
-    </div>
-  ));
-
-// Demo component showing both tools in action
-export function WeatherSearchDemo() {
-  const [weatherData, setWeatherData] = React.useState<any>(null);
-  const [searchResults, setSearchResults] = React.useState<any>(null);
-  
-  const handleWeatherSearch = async () => {
-    const result = await weatherTool.run({ city: 'San Francisco' });
-    setWeatherData(result);
-  };
-  
-  const handleSearch = async () => {
-    const results = await searchTool.run({ query: 'TypeScript patterns' });
-    setSearchResults(results);
-  };
-  
-  return (
-    <div className="p-8 space-y-6">
-      <div>
-        <h2 className="text-2xl font-bold mb-4">AUI Tool Examples</h2>
-        
-        <div className="space-y-4">
-          <div>
-            <button
-              onClick={handleWeatherSearch}
-              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-            >
-              Get Weather for San Francisco
-            </button>
-            {weatherData && weatherTool.renderer && 
-              weatherTool.renderer({ data: weatherData })}
-          </div>
-          
-          <div>
-            <button
-              onClick={handleSearch}
-              className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
-            >
-              Search for TypeScript patterns
-            </button>
-            {searchResults && searchTool.renderer && 
-              searchTool.renderer({ data: searchResults })}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}