@lantos1618/better-ui 0.1.0

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

@@ -0,0 +1,208 @@
+'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

@@ -0,0 +1,174 @@
+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

@@ -0,0 +1,119 @@
+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>
+  );
+}