@theihtisham/ai-agent-starter-kit 1.0.0

package/src/app/(auth)/signup/page.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useState } from 'react';
+import { signIn } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
+
+export default function SignupPage() {
+  const router = useRouter();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    // NextAuth doesn't have a built-in signup — use credentials provider
+    // In production, create user via API route first, then sign in
+    try {
+      const res = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, email, password }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error ?? 'Registration failed');
+        setLoading(false);
+        return;
+      }
+
+      const result = await signIn('credentials', {
+        email,
+        password,
+        redirect: false,
+      });
+
+      if (result?.error) {
+        setError('Auto-login failed. Please log in manually.');
+        setLoading(false);
+      } else {
+        router.push('/dashboard');
+      }
+    } catch {
+      setError('Something went wrong');
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="text-center">
+        <CardTitle className="text-2xl">Create your account</CardTitle>
+        <CardDescription>Start building AI agents in minutes</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-4">
+          <div className="grid grid-cols-2 gap-3">
+            <Button variant="outline" onClick={() => signIn('google', { callbackUrl: '/dashboard' })}>
+              Google
+            </Button>
+            <Button variant="outline" onClick={() => signIn('github', { callbackUrl: '/dashboard' })}>
+              GitHub
+            </Button>
+          </div>
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center"><span className="w-full border-t" /></div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-card px-2 text-muted-foreground">or continue with email</span>
+            </div>
+          </div>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Name</label>
+              <Input value={name} onChange={(e) => setName(e.target.value)} required />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Email</label>
+              <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Password</label>
+              <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} minLength={8} required />
+            </div>
+            {error && <p className="text-sm text-destructive">{error}</p>}
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? 'Creating account...' : 'Create account'}
+            </Button>
+          </form>
+        </div>
+      </CardContent>
+      <CardFooter className="justify-center">
+        <p className="text-sm text-muted-foreground">
+          Already have an account?{' '}
+          <Link href="/login" className="text-primary hover:underline">Log in</Link>
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

package/src/app/(dashboard)/agents/[id]/edit/page.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useEffect, useState, use } from 'react';
+import { useRouter } from 'next/navigation';
+import { AgentForm } from '@/components/agents/agent-form';
+import toast from 'react-hot-toast';
+
+export default function EditAgentPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const router = useRouter();
+  const [agent, setAgent] = useState<{
+    name: string;
+    description: string;
+    systemPrompt: string;
+    model: string;
+    temperature: number;
+    maxTokens: number;
+    tools: string[];
+    isPublic: boolean;
+  } | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(`/api/agents/${id}`)
+      .then((r) => r.json())
+      .then((res) => {
+        if (res.success) setAgent(res.data);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  const handleUpdate = async (data: {
+    name: string;
+    description: string;
+    systemPrompt: string;
+    model: string;
+    temperature: number;
+    maxTokens: number;
+    tools: string[];
+    isPublic: boolean;
+  }) => {
+    const res = await fetch(`/api/agents/${id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+
+    if (!res.ok) {
+      const err = await res.json();
+      toast.error(err.error?.message ?? 'Failed to update agent');
+      return;
+    }
+
+    toast.success('Agent updated!');
+    router.push(`/agents/${id}`);
+  };
+
+  if (loading) return <p>Loading...</p>;
+  if (!agent) return <p>Agent not found.</p>;
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <h1 className="text-2xl font-bold mb-6">Edit Agent</h1>
+      <AgentForm initialData={agent} onSubmit={handleUpdate} />
+    </div>
+  );
+}

package/src/app/(dashboard)/agents/[id]/page.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useEffect, useState, use } from 'react';
+import { useRouter } from 'next/navigation';
+import { ChatInterface } from '@/components/chat/chat-interface';
+import { ChatSidebar } from '@/components/chat/chat-sidebar';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import toast from 'react-hot-toast';
+
+interface AgentData {
+  id: string;
+  name: string;
+  description?: string;
+  model: string;
+  systemPrompt: string;
+  temperature: number;
+  maxTokens: number;
+  tools: string[];
+  isPublic: boolean;
+}
+
+interface ChatData {
+  id: string;
+  title: string;
+  updatedAt: string;
+  _count: { messages: number };
+}
+
+export default function AgentPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const router = useRouter();
+  const [agent, setAgent] = useState<AgentData | null>(null);
+  const [chats, setChats] = useState<ChatData[]>([]);
+  const [activeChatId, setActiveChatId] = useState<string | undefined>();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    Promise.all([
+      fetch(`/api/agents/${id}`).then((r) => r.json()),
+      fetch(`/api/agents/${id}/chats`).then((r) => r.json()),
+    ])
+      .then(([agentRes, chatsRes]) => {
+        if (agentRes.success) setAgent(agentRes.data);
+        if (chatsRes.success) {
+          setChats(chatsRes.data ?? []);
+          if (chatsRes.data?.length > 0) setActiveChatId(chatsRes.data[0].id);
+        }
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  const handleNewChat = async () => {
+    const res = await fetch(`/api/agents/${id}/chats`, { method: 'POST' });
+    if (res.ok) {
+      const result = await res.json();
+      setChats((prev) => [result.data, ...prev]);
+      setActiveChatId(result.data.id);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!confirm('Delete this agent? This cannot be undone.')) return;
+    const res = await fetch(`/api/agents/${id}`, { method: 'DELETE' });
+    if (res.ok) {
+      toast.success('Agent deleted');
+      router.push('/agents');
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-[500px]" />
+      </div>
+    );
+  }
+
+  if (!agent) {
+    return <p className="text-muted-foreground">Agent not found.</p>;
+  }
+
+  return (
+    <div className="flex h-[calc(100vh-8rem)] rounded-lg border overflow-hidden">
+      <ChatSidebar
+        chats={chats}
+        activeChatId={activeChatId}
+        agentId={id}
+        onNewChat={handleNewChat}
+      />
+      <div className="flex-1 flex flex-col">
+        <div className="flex items-center justify-between border-b px-4 py-2">
+          <div>
+            <h2 className="font-semibold">{agent.name}</h2>
+            <p className="text-xs text-muted-foreground">{agent.model}</p>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={() => router.push(`/agents/${id}/edit`)}>
+              Edit
+            </Button>
+            <Button variant="destructive" size="sm" onClick={handleDelete}>
+              Delete
+            </Button>
+          </div>
+        </div>
+        <div className="flex-1">
+          <ChatInterface agentId={id} chatId={activeChatId} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/(dashboard)/agents/new/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import toast from 'react-hot-toast';
+import { AgentForm } from '@/components/agents/agent-form';
+
+export default function NewAgentPage() {
+  const router = useRouter();
+
+  const handleCreate = async (data: {
+    name: string;
+    description: string;
+    systemPrompt: string;
+    model: string;
+    temperature: number;
+    maxTokens: number;
+    tools: string[];
+    isPublic: boolean;
+  }) => {
+    const res = await fetch('/api/agents', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+
+    if (!res.ok) {
+      const err = await res.json();
+      toast.error(err.error?.message ?? 'Failed to create agent');
+      return;
+    }
+
+    const result = await res.json();
+    toast.success('Agent created!');
+    router.push(`/agents/${result.data.id}`);
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <h1 className="text-2xl font-bold mb-6">Create New Agent</h1>
+      <AgentForm onSubmit={handleCreate} />
+    </div>
+  );
+}

package/src/app/(dashboard)/agents/page.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { AgentCard } from '@/components/dashboard/agent-card';
+
+interface Agent {
+  id: string;
+  name: string;
+  description?: string;
+  model: string;
+  isPublic: boolean;
+  messageCount: number;
+  lastUsed?: string | null;
+}
+
+export default function AgentsPage() {
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/agents')
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.success) setAgents(res.data ?? []);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Agents</h1>
+        <Link href="/agents/new">
+          <Button>+ New Agent</Button>
+        </Link>
+      </div>
+
+      {loading ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="h-40 rounded-lg border animate-pulse bg-muted" />
+          ))}
+        </div>
+      ) : agents.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-muted-foreground mb-4">No agents yet. Create your first AI agent.</p>
+          <Link href="/agents/new">
+            <Button>Create Agent</Button>
+          </Link>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {agents.map((agent) => (
+            <AgentCard key={agent.id} {...agent} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/app/(dashboard)/api-keys/page.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
+import toast from 'react-hot-toast';
+
+interface ApiKeyData {
+  id: string;
+  name: string;
+  prefix: string;
+  lastUsed: string | null;
+  createdAt: string;
+}
+
+export default function ApiKeysPage() {
+  const [keys, setKeys] = useState<ApiKeyData[]>([]);
+  const [newKeyName, setNewKeyName] = useState('');
+  const [createdKey, setCreatedKey] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/api-keys')
+      .then((r) => r.json())
+      .then((res) => {
+        if (res.success) setKeys(res.data ?? []);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  const handleCreate = async () => {
+    if (!newKeyName.trim()) return;
+    const res = await fetch('/api/api-keys', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: newKeyName }),
+    });
+
+    if (res.ok) {
+      const result = await res.json();
+      setCreatedKey(result.data.key);
+      setNewKeyName('');
+      toast.success('API key created');
+      // Refresh list
+      const listRes = await fetch('/api/api-keys');
+      const listData = await listRes.json();
+      if (listData.success) setKeys(listData.data ?? []);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Delete this API key?')) return;
+    const res = await fetch(`/api/api-keys/${id}`, { method: 'DELETE' });
+    if (res.ok) {
+      setKeys((prev) => prev.filter((k) => k.id !== id));
+      toast.success('API key deleted');
+    }
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-6">
+      <h1 className="text-2xl font-bold">API Keys</h1>
+
+      {createdKey && (
+        <Card className="border-green-500">
+          <CardContent className="p-4">
+            <p className="text-sm font-medium mb-2">New API Key (copy now — it won&apos;t be shown again):</p>
+            <code className="block bg-muted p-3 rounded text-sm font-mono break-all">{createdKey}</code>
+            <Button
+              variant="outline"
+              size="sm"
+              className="mt-2"
+              onClick={() => { navigator.clipboard.writeText(createdKey); toast.success('Copied!'); }}
+            >
+              Copy
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Create New Key</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex gap-3">
+            <input
+              className="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm"
+              placeholder="Key name (e.g., Production)"
+              value={newKeyName}
+              onChange={(e) => setNewKeyName(e.target.value)}
+            />
+            <Button onClick={handleCreate} disabled={!newKeyName.trim()}>Create</Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Your Keys</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Prefix</TableHead>
+                <TableHead>Last Used</TableHead>
+                <TableHead>Created</TableHead>
+                <TableHead></TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {loading ? (
+                <TableRow><TableCell colSpan={5}>Loading...</TableCell></TableRow>
+              ) : keys.length === 0 ? (
+                <TableRow><TableCell colSpan={5} className="text-muted-foreground">No API keys yet</TableCell></TableRow>
+              ) : (
+                keys.map((key) => (
+                  <TableRow key={key.id}>
+                    <TableCell className="font-medium">{key.name}</TableCell>
+                    <TableCell><code className="text-xs bg-muted px-1.5 py-0.5 rounded">{key.prefix}...</code></TableCell>
+                    <TableCell className="text-muted-foreground">{key.lastUsed ?? 'Never'}</TableCell>
+                    <TableCell className="text-muted-foreground">{new Date(key.createdAt).toLocaleDateString()}</TableCell>
+                    <TableCell>
+                      <Button variant="ghost" size="sm" onClick={() => handleDelete(key.id)}>Delete</Button>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { StatCard } from '@/components/dashboard/stat-card';
+import { AgentCard } from '@/components/dashboard/agent-card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface DashboardData {
+  agentCount: number;
+  messageCount: number;
+  tokenCount: number;
+  agents: {
+    id: string;
+    name: string;
+    description?: string;
+    model: string;
+    isPublic: boolean;
+    messageCount: number;
+    lastUsed?: string | null;
+  }[];
+}
+
+export default function DashboardPage() {
+  const [data, setData] = useState<DashboardData | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/agents')
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.success && res.data) {
+          setData({
+            agentCount: res.data.length,
+            messageCount: res.data.reduce((sum: number, a: { messageCount?: number }) => sum + (a.messageCount ?? 0), 0),
+            tokenCount: 0,
+            agents: res.data.slice(0, 5),
+          });
+        }
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <h1 className="text-2xl font-bold">Dashboard</h1>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {[1, 2, 3].map((i) => <Skeleton key={i} className="h-32" />)}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Dashboard</h1>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <StatCard title="Total Agents" value={data?.agentCount ?? 0} description="Active agents" />
+        <StatCard title="Messages" value={data?.messageCount ?? 0} description="This month" />
+        <StatCard title="API Calls" value="—" description="Coming soon" />
+      </div>
+      <div>
+        <h2 className="text-lg font-semibold mb-4">Recent Agents</h2>
+        {data?.agents?.length ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {data.agents.map((agent) => (
+              <AgentCard key={agent.id} {...agent} />
+            ))}
+          </div>
+        ) : (
+          <p className="text-muted-foreground text-sm">No agents yet. Create your first agent to get started.</p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { Header } from '@/components/dashboard/header';
+import { Sidebar } from '@/components/dashboard/sidebar';
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <div className="flex flex-1">
+        <Sidebar />
+        <main className="flex-1 overflow-auto p-6">{children}</main>
+      </div>
+    </div>
+  );
+}