@theihtisham/ai-agent-starter-kit 1.0.0

package/src/components/ui/dropdown.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useState, useRef, useEffect, type ReactNode } from 'react';
+import { cn } from '@/lib/utils/helpers';
+
+export function Dropdown({ children }: { children: ReactNode }) {
+  return <div className="relative inline-block">{children}</div>;
+}
+
+export function DropdownTrigger({ children, onClick, className }: {
+  children: ReactNode;
+  onClick: () => void;
+  className?: string;
+}) {
+  return (
+    <button className={cn('outline-none', className)} onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+
+export function DropdownContent({ children, open, onClose, className, align = 'end' }: {
+  children: ReactNode;
+  open: boolean;
+  onClose: () => void;
+  className?: string;
+  align?: 'start' | 'end';
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+    if (open) document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-fade-in',
+        align === 'end' ? 'right-0' : 'left-0',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DropdownItem({ children, onClick, className }: {
+  children: ReactNode;
+  onClick?: () => void;
+  className?: string;
+}) {
+  return (
+    <button
+      className={cn(
+        'relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+        className,
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function DropdownSeparator({ className }: { className?: string }) {
+  return <div className={cn('-mx-1 my-1 h-px bg-muted', className)} />;
+}

package/src/components/ui/input.tsx

@@ -0,0 +1,23 @@
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils/helpers';
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils/helpers';
+
+export function Skeleton({ className }: { className?: string }) {
+  return (
+    <div className={cn('animate-pulse rounded-md bg-muted', className)} />
+  );
+}

package/src/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { cn } from '@/lib/utils/helpers';
+
+export function Switch({ checked, onCheckedChange, className, disabled }: {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  className?: string;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      className={cn(
+        'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
+        checked ? 'bg-primary' : 'bg-input',
+        className,
+      )}
+      onClick={() => onCheckedChange(!checked)}
+    >
+      <span
+        className={cn(
+          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform',
+          checked ? 'translate-x-5' : 'translate-x-0',
+        )}
+      />
+    </button>
+  );
+}

package/src/components/ui/table.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils/helpers';
+
+const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  ),
+);
+Table.displayName = 'Table';
+
+const TableHeader = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+  ),
+);
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+  ),
+);
+TableBody.displayName = 'TableBody';
+
+const TableRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr ref={ref} className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)} {...props} />
+  ),
+);
+TableRow.displayName = 'TableRow';
+
+const TableHead = forwardRef<HTMLTableCellElement, ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th ref={ref} className={cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', className)} {...props} />
+  ),
+);
+TableHead.displayName = 'TableHead';
+
+const TableCell = forwardRef<HTMLTableCellElement, TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td ref={ref} className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...props} />
+  ),
+);
+TableCell.displayName = 'TableCell';
+
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };

package/src/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useState, createContext, useContext, type ReactNode } from 'react';
+import { cn } from '@/lib/utils/helpers';
+
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue>({ value: '', onValueChange: () => {} });
+
+export function Tabs({ defaultValue, value: controlledValue, onValueChange, children, className }: {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: ReactNode;
+  className?: string;
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+  const value = controlledValue ?? internalValue;
+  const onValueChangeHandler = onValueChange ?? setInternalValue;
+
+  return (
+    <TabsContext.Provider value={{ value, onValueChange: onValueChangeHandler }}>
+      <div className={className}>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+export function TabsList({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <div className={cn('inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground', className)}>
+      {children}
+    </div>
+  );
+}
+
+export function TabsTrigger({ value, children, className }: { value: string; children: ReactNode; className?: string }) {
+  const { value: currentValue, onValueChange } = useContext(TabsContext);
+  const isActive = currentValue === value;
+
+  return (
+    <button
+      className={cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        isActive && 'bg-background text-foreground shadow-sm',
+        className,
+      )}
+      onClick={() => onValueChange(value)}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function TabsContent({ value, children, className }: { value: string; children: ReactNode; className?: string }) {
+  const { value: currentValue } = useContext(TabsContext);
+  if (currentValue !== value) return null;
+
+  return (
+    <div className={cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className)}>
+      {children}
+    </div>
+  );
+}

package/src/components/ui/textarea.tsx

@@ -0,0 +1,20 @@
+import { forwardRef, type TextareaHTMLAttributes } from 'react';
+import { cn } from '@/lib/utils/helpers';
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/src/hooks/use-agent.ts

@@ -0,0 +1,44 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface Agent {
+  id: string;
+  name: string;
+  description?: string;
+  model: string;
+  systemPrompt: string;
+  temperature: number;
+  maxTokens: number;
+  tools: string[];
+  isPublic: boolean;
+}
+
+export function useAgent(agentId: string) {
+  const [agent, setAgent] = useState<Agent | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchAgent = useCallback(async () => {
+    try {
+      setLoading(true);
+      const res = await fetch(`/api/agents/${agentId}`);
+      const data = await res.json();
+      if (data.success) {
+        setAgent(data.data);
+      } else {
+        setError(data.error?.message ?? 'Failed to load agent');
+      }
+    } catch {
+      setError('Network error');
+    } finally {
+      setLoading(false);
+    }
+  }, [agentId]);
+
+  useEffect(() => {
+    fetchAgent();
+  }, [fetchAgent]);
+
+  return { agent, loading, error, refetch: fetchAgent };
+}

package/src/hooks/use-streaming.ts

@@ -0,0 +1,82 @@
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+
+interface UseStreamingOptions {
+  onError?: (error: Error) => void;
+  onComplete?: (content: string) => void;
+}
+
+export function useStreaming(options?: UseStreamingOptions) {
+  const [content, setContent] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const stream = useCallback(async (url: string, body: Record<string, unknown>) => {
+    setContent('');
+    setIsLoading(true);
+
+    const abortController = new AbortController();
+    abortRef.current = abortController;
+
+    try {
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+        signal: abortController.signal,
+      });
+
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      if (!response.body) throw new Error('No response body');
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let accumulated = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        const lines = chunk.split('\n');
+
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue;
+          const data = line.slice(6).trim();
+          if (data === '[DONE]') continue;
+
+          try {
+            const parsed = JSON.parse(data);
+            if (parsed.type === 'text') {
+              accumulated += parsed.content;
+              setContent(accumulated);
+            } else if (parsed.type === 'error') {
+              throw new Error(parsed.content);
+            }
+          } catch (parseErr) {
+            if ((parseErr as Error).message !== 'Unexpected end of JSON input') {
+              // Skip malformed chunks
+            }
+          }
+        }
+      }
+
+      options?.onComplete?.(accumulated);
+    } catch (err) {
+      if ((err as Error).name !== 'AbortError') {
+        options?.onError?.(err as Error);
+      }
+    } finally {
+      setIsLoading(false);
+      abortRef.current = null;
+    }
+  }, [options]);
+
+  const stop = useCallback(() => {
+    abortRef.current?.abort();
+    setIsLoading(false);
+  }, []);
+
+  return { content, isLoading, stream, stop };
+}

package/src/hooks/use-subscription.ts

@@ -0,0 +1,40 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface SubscriptionData {
+  planId: string;
+  status: string;
+  currentPeriodEnd: string;
+  cancelAtPeriodEnd: boolean;
+}
+
+export function useSubscription() {
+  const [subscription, setSubscription] = useState<SubscriptionData | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchSubscription = useCallback(async () => {
+    try {
+      const res = await fetch('/api/usage');
+      const data = await res.json();
+      if (data.success) {
+        setSubscription({
+          planId: data.data?.planId ?? 'free',
+          status: 'active',
+          currentPeriodEnd: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
+          cancelAtPeriodEnd: false,
+        });
+      }
+    } catch {
+      // Defaults to free
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchSubscription();
+  }, [fetchSubscription]);
+
+  return { subscription, loading, refetch: fetchSubscription };
+}

package/src/hooks/use-usage.ts

@@ -0,0 +1,43 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface UsageData {
+  messages: number;
+  toolCalls: number;
+  inputTokens: number;
+  outputTokens: number;
+}
+
+interface UsageLimits {
+  maxMessages: number;
+  maxTokens: number;
+  maxAgents: number;
+}
+
+export function useUsage() {
+  const [usage, setUsage] = useState<UsageData>({ messages: 0, toolCalls: 0, inputTokens: 0, outputTokens: 0 });
+  const [limits, setLimits] = useState<UsageLimits>({ maxMessages: 50, maxTokens: 100000, maxAgents: 2 });
+  const [loading, setLoading] = useState(true);
+
+  const fetchUsage = useCallback(async () => {
+    try {
+      const res = await fetch('/api/usage');
+      const data = await res.json();
+      if (data.success) {
+        setUsage(data.data?.usage ?? usage);
+        setLimits(data.data?.limits ?? limits);
+      }
+    } catch {
+      // Keep defaults
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchUsage();
+  }, [fetchUsage]);
+
+  return { usage, limits, loading, refetch: fetchUsage };
+}

package/src/hooks/use-user.ts

@@ -0,0 +1,13 @@
+'use client';
+
+import { useSession } from 'next-auth/react';
+
+export function useUser() {
+  const { data: session, status } = useSession();
+
+  return {
+    user: session?.user ?? null,
+    isLoading: status === 'loading',
+    isAuthenticated: status === 'authenticated',
+  };
+}

package/src/lib/agents/index.ts

@@ -0,0 +1,60 @@
+/**
+ * Agent Framework — Memory, Orchestration, and Tools.
+ *
+ * This is the main entry point for the agent framework.
+ * Import everything you need from here.
+ *
+ * @example
+ * ```ts
+ * import { MemoryManager } from '@/lib/agents';
+ * import { createOrchestrator } from '@/lib/agents';
+ * import { createDefaultRegistry } from '@/lib/agents';
+ * ```
+ */
+
+// Memory System
+export { ShortTermMemory } from './memory/short-term';
+export { LongTermMemory, cosineSimilarity, simpleEmbedding } from './memory/long-term';
+export { MemoryManager } from './memory/manager';
+export type {
+  MemoryEntry,
+  MemoryConfig,
+  RecallOptions,
+  MemoryStats,
+  MemorySummary,
+} from './memory/types';
+export { DEFAULT_MEMORY_CONFIG } from './memory/types';
+
+// Multi-Agent Orchestration
+export {
+  SequentialOrchestrator,
+  ParallelOrchestrator,
+  RouterOrchestrator,
+  DebateOrchestrator,
+  keywordClassifier,
+  createOrchestrator,
+  orchestrate,
+} from './orchestration';
+export type {
+  OrchestrationAgentConfig,
+  AgentMessage,
+  Handoff,
+  OrchestrationPattern,
+  OrchestrationResult,
+  OrchestratorOptions,
+  RouterClassifier,
+  CreateOrchestratorOptions,
+  DebateOptions,
+} from './orchestration';
+
+// Tool Registry
+export {
+  ToolRegistry,
+  getGlobalRegistry,
+  createDefaultRegistry,
+  webSearchTool,
+  calculatorTool,
+  codeExecutorTool,
+  fileReaderTool,
+} from './tools';
+export type { ToolDefinition, ToolExecutionResult } from './tools';