@theihtisham/ai-agent-starter-kit 1.0.0

package/src/app/api/stripe/checkout/route.ts

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/nextauth';
+import { stripe } from '@/lib/stripe/client';
+import { getOrCreateCustomer } from '@/lib/stripe/usage';
+import { handleApiError } from '@/lib/utils/api-response';
+import { z } from 'zod';
+
+const checkoutSchema = z.object({ priceId: z.string() });
+
+export async function POST(req: NextRequest) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user?.id || !session.user.email) {
+      return NextResponse.json({ success: false, error: { code: 'UNAUTHORIZED', message: 'Not authenticated' } }, { status: 401 });
+    }
+
+    const body = await req.json();
+    const { priceId } = checkoutSchema.parse(body);
+
+    const customerId = await getOrCreateCustomer(session.user.id, session.user.email);
+
+    const checkoutSession = await stripe.checkout.sessions.create({
+      customer: customerId,
+      mode: 'subscription',
+      payment_method_types: ['card'],
+      line_items: [{ price: priceId, quantity: 1 }],
+      success_url: `${process.env.NEXTAUTH_URL}/settings/billing?success=true`,
+      cancel_url: `${process.env.NEXTAUTH_URL}/settings/billing?canceled=true`,
+      metadata: { userId: session.user.id, priceId },
+    });
+
+    return NextResponse.json({ success: true, data: { url: checkoutSession.url } });
+  } catch (err) {
+    return handleApiError(err);
+  }
+}

package/src/app/api/stripe/plans/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server';
+import { PLANS } from '@/lib/stripe/plans';
+
+export async function GET() {
+  return NextResponse.json({
+    success: true,
+    data: PLANS.map((plan) => ({
+      id: plan.id,
+      name: plan.name,
+      price: plan.price,
+      interval: plan.interval,
+      stripePriceId: plan.stripePriceId,
+      features: plan.features,
+    })),
+  });
+}

package/src/app/api/stripe/portal/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/nextauth';
+import { stripe } from '@/lib/stripe/client';
+import { handleApiError } from '@/lib/utils/api-response';
+import prisma from '@/lib/db/client';
+
+export async function POST() {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user?.id) {
+      return NextResponse.json({ success: false, error: { code: 'UNAUTHORIZED', message: 'Not authenticated' } }, { status: 401 });
+    }
+
+    const subscription = await prisma.subscription.findUnique({ where: { userId: session.user.id } });
+    if (!subscription?.stripeCustomerId) {
+      return NextResponse.json({ success: false, error: { code: 'NO_CUSTOMER', message: 'No billing account found' } }, { status: 400 });
+    }
+
+    const portalSession = await stripe.billingPortal.sessions.create({
+      customer: subscription.stripeCustomerId,
+      return_url: `${process.env.NEXTAUTH_URL}/settings/billing`,
+    });
+
+    return NextResponse.json({ success: true, data: { url: portalSession.url } });
+  } catch (err) {
+    return handleApiError(err);
+  }
+}

package/src/app/api/stripe/webhook/route.ts

@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { stripe } from '@/lib/stripe/client';
+import { handleCheckoutComplete, handleSubscriptionUpdated, handleSubscriptionDeleted, handlePaymentFailed } from '@/lib/stripe/webhooks';
+import { logger } from '@/lib/utils/logger';
+
+export async function POST(req: NextRequest) {
+  const body = await req.text();
+  const signature = req.headers.get('stripe-signature');
+
+  if (!signature) {
+    return NextResponse.json({ error: 'Missing signature' }, { status: 400 });
+  }
+
+  let event;
+  try {
+    event = stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET ?? '');
+  } catch (err) {
+    logger.error('Webhook signature verification failed', { error: (err as Error).message });
+    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });
+  }
+
+  try {
+    switch (event.type) {
+      case 'checkout.session.completed':
+        await handleCheckoutComplete(event.data.object as import('stripe').Stripe.Checkout.Session);
+        break;
+      case 'customer.subscription.updated':
+        await handleSubscriptionUpdated(event.data.object as import('stripe').Stripe.Subscription);
+        break;
+      case 'customer.subscription.deleted':
+        await handleSubscriptionDeleted(event.data.object as import('stripe').Stripe.Subscription);
+        break;
+      case 'invoice.payment_failed':
+        await handlePaymentFailed(event.data.object as import('stripe').Stripe.Invoice);
+        break;
+      default:
+        logger.info('Unhandled webhook event', { type: event.type });
+    }
+  } catch (err) {
+    logger.error('Webhook handler error', { type: event.type, error: (err as Error).message });
+    return NextResponse.json({ error: 'Handler failed' }, { status: 500 });
+  }
+
+  return NextResponse.json({ received: true });
+}

package/src/app/api/usage/route.ts

@@ -0,0 +1,43 @@
+import { NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/nextauth';
+import { getUsageForPeriod } from '@/lib/stripe/usage';
+import { getPlan } from '@/lib/stripe/plans';
+import { handleApiError } from '@/lib/utils/api-response';
+import prisma from '@/lib/db/client';
+
+export async function GET() {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user?.id) {
+      return NextResponse.json({ success: false, error: { code: 'UNAUTHORIZED', message: 'Not authenticated' } }, { status: 401 });
+    }
+
+    const usage = await getUsageForPeriod(session.user.id);
+    const subscription = await prisma.subscription.findUnique({ where: { userId: session.user.id } });
+    const planId = subscription?.stripePriceId ? 'pro' : 'free';
+    const plan = getPlan(planId);
+    const agentCount = await prisma.agent.count({ where: { userId: session.user.id } });
+
+    return NextResponse.json({
+      success: true,
+      data: {
+        planId,
+        usage: {
+          messages: usage.messages,
+          toolCalls: usage.toolCalls,
+          inputTokens: usage.inputTokens,
+          outputTokens: usage.outputTokens,
+          agents: agentCount,
+        },
+        limits: {
+          maxMessages: plan.features.maxMessages,
+          maxTokens: plan.features.maxTokens,
+          maxAgents: plan.features.maxAgents,
+        },
+      },
+    });
+  } catch (err) {
+    return handleApiError(err);
+  }
+}

package/src/app/globals.css

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import { Providers } from '@/components/auth-provider';
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'AgentKit — AI Agent Starter Kit',
+  description: 'Production-ready AI agent framework. Ship your AI SaaS this weekend with Next.js, streaming, tool calling, Stripe billing, and more.',
+  keywords: ['AI', 'agent', 'framework', 'Next.js', 'TypeScript', 'OpenAI', 'streaming', 'tool calling'],
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,32 @@
+import { Hero } from '@/components/landing/hero';
+import { Features } from '@/components/landing/features';
+import { LandingPricing } from '@/components/landing/pricing';
+import { CTA } from '@/components/landing/cta';
+
+export default function HomePage() {
+  return (
+    <main className="min-h-screen">
+      <nav className="flex items-center justify-between px-6 py-4 max-w-7xl mx-auto">
+        <div className="flex items-center gap-2 font-bold text-lg">
+          <span className="text-primary">&#x1F916;</span>
+          <span>AgentKit</span>
+        </div>
+        <div className="flex items-center gap-4">
+          <a href="#features" className="text-sm text-muted-foreground hover:text-foreground">Features</a>
+          <a href="#pricing" className="text-sm text-muted-foreground hover:text-foreground">Pricing</a>
+          <a href="/login" className="text-sm text-muted-foreground hover:text-foreground">Log in</a>
+          <a href="/signup" className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Sign up</a>
+        </div>
+      </nav>
+      <Hero />
+      <Features />
+      <LandingPricing />
+      <CTA />
+      <footer className="border-t py-8">
+        <div className="mx-auto max-w-7xl px-6 text-center text-sm text-muted-foreground">
+          <p>&copy; {new Date().getFullYear()} AgentKit. Open source under MIT license.</p>
+        </div>
+      </footer>
+    </main>
+  );
+}

package/src/app/pricing/page.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { PricingTable } from '@/components/billing/pricing-table';
+import { useRouter } from 'next/navigation';
+
+export default function PricingPage() {
+  const router = useRouter();
+  return (
+    <div className="min-h-screen py-20">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold">Pricing</h1>
+          <p className="mt-4 text-lg text-muted-foreground">
+            Choose the plan that fits your needs. Start free, scale as you grow.
+          </p>
+        </div>
+        <PricingTable
+          onSelectPlan={() => {
+            router.push('/login');
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/agents/agent-form.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { ModelSelector } from './model-selector';
+import { ToolSelector } from './tool-selector';
+import { AVAILABLE_MODELS } from '@/lib/ai/models';
+
+interface AgentFormProps {
+  initialData?: {
+    name: string;
+    description: string;
+    systemPrompt: string;
+    model: string;
+    temperature: number;
+    maxTokens: number;
+    tools: string[];
+    isPublic: boolean;
+  };
+  onSubmit: (data: {
+    name: string;
+    description: string;
+    systemPrompt: string;
+    model: string;
+    temperature: number;
+    maxTokens: number;
+    tools: string[];
+    isPublic: boolean;
+  }) => Promise<void>;
+  isLoading?: boolean;
+}
+
+export function AgentForm({ initialData, onSubmit, isLoading }: AgentFormProps) {
+  const [name, setName] = useState(initialData?.name ?? '');
+  const [description, setDescription] = useState(initialData?.description ?? '');
+  const [systemPrompt, setSystemPrompt] = useState(initialData?.systemPrompt ?? '');
+  const [model, setModel] = useState(initialData?.model ?? AVAILABLE_MODELS[0]?.id ?? 'gpt-4o-mini');
+  const [temperature, setTemperature] = useState(initialData?.temperature ?? 0.7);
+  const [maxTokens, setMaxTokens] = useState(initialData?.maxTokens ?? 4096);
+  const [tools, setTools] = useState<string[]>(initialData?.tools ?? []);
+  const [isPublic, setIsPublic] = useState(initialData?.isPublic ?? false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await onSubmit({ name, description, systemPrompt, model, temperature, maxTokens, tools, isPublic });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Basic Info</CardTitle>
+        </CardHeader>
+        <CardContent 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)} placeholder="My Agent" required />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Description</label>
+            <Input value={description} onChange={(e) => setDescription(e.target.value)} placeholder="What does this agent do?" />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium">System Prompt</label>
+            <Textarea
+              value={systemPrompt}
+              onChange={(e) => setSystemPrompt(e.target.value)}
+              placeholder="You are a helpful assistant that..."
+              rows={5}
+              required
+            />
+          </div>
+          <div className="flex items-center gap-3">
+            <Switch checked={isPublic} onCheckedChange={setIsPublic} />
+            <div>
+              <p className="text-sm font-medium">Public Agent</p>
+              <p className="text-xs text-muted-foreground">Allow others to use this agent</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Model Configuration</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Model</label>
+            <ModelSelector value={model} onChange={setModel} />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Temperature: {temperature}</label>
+            <input
+              type="range"
+              min="0"
+              max="2"
+              step="0.1"
+              value={temperature}
+              onChange={(e) => setTemperature(parseFloat(e.target.value))}
+              className="w-full"
+            />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Max Tokens</label>
+            <Input
+              type="number"
+              value={maxTokens}
+              onChange={(e) => setMaxTokens(parseInt(e.target.value))}
+              min={256}
+              max={128000}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Tools</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ToolSelector selected={tools} onChange={setTools} />
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end gap-3">
+        <Button type="submit" disabled={isLoading}>
+          {isLoading ? 'Saving...' : initialData ? 'Update Agent' : 'Create Agent'}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/src/components/agents/model-selector.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { AVAILABLE_MODELS, type ModelConfig } from '@/lib/ai/models';
+import { cn } from '@/lib/utils/helpers';
+
+interface ModelSelectorProps {
+  value: string;
+  onChange: (model: string) => void;
+}
+
+export function ModelSelector({ value, onChange }: ModelSelectorProps) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+      {AVAILABLE_MODELS.map((model) => (
+        <button
+          key={model.id}
+          type="button"
+          className={cn(
+            'flex flex-col items-start rounded-md border p-3 text-left transition-colors hover:bg-accent',
+            value === model.id && 'border-primary bg-accent',
+          )}
+          onClick={() => onChange(model.id)}
+        >
+          <span className="text-sm font-medium">{model.name}</span>
+          <span className="text-xs text-muted-foreground">{model.provider}</span>
+          <span className="text-xs text-muted-foreground mt-1">
+            {model.supportsTools && 'Tools &bull; '}
+            {model.supportsStreaming && 'Streaming &bull; '}
+            Up to {(model.maxTokens / 1000).toFixed(0)}K tokens
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/agents/tool-selector.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { getAllTools } from '@/lib/ai/tools';
+import { cn } from '@/lib/utils/helpers';
+
+interface ToolSelectorProps {
+  selected: string[];
+  onChange: (tools: string[]) => void;
+}
+
+export function ToolSelector({ selected, onChange }: ToolSelectorProps) {
+  const tools = getAllTools();
+
+  const toggleTool = (toolId: string) => {
+    if (selected.includes(toolId)) {
+      onChange(selected.filter((id) => id !== toolId));
+    } else {
+      onChange([...selected, toolId]);
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+      {tools.map((tool) => (
+        <button
+          key={tool.id}
+          type="button"
+          className={cn(
+            'flex flex-col items-start rounded-md border p-3 text-left transition-colors hover:bg-accent',
+            selected.includes(tool.id) && 'border-primary bg-accent',
+          )}
+          onClick={() => toggleTool(tool.id)}
+        >
+          <div className="flex items-center gap-2">
+            <div className={cn(
+              'h-4 w-4 rounded border flex items-center justify-center text-xs',
+              selected.includes(tool.id) && 'bg-primary text-primary-foreground border-primary',
+            )}>
+              {selected.includes(tool.id) && '&#10003;'}
+            </div>
+            <span className="text-sm font-medium">{tool.name}</span>
+          </div>
+          <p className="text-xs text-muted-foreground mt-1 ml-6">{tool.description}</p>
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/components/auth-provider.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { SessionProvider } from 'next-auth/react';
+import { ThemeProvider } from 'next-themes';
+import { Toaster } from 'react-hot-toast';
+import { type ReactNode } from 'react';
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <SessionProvider>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+        {children}
+        <Toaster position="bottom-right" toastOptions={{ duration: 4000 }} />
+      </ThemeProvider>
+    </SessionProvider>
+  );
+}

package/src/components/billing/plan-badge.tsx

@@ -0,0 +1,23 @@
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils/helpers';
+
+interface PlanBadgeProps {
+  planId: string;
+  className?: string;
+}
+
+const planStyles: Record<string, string> = {
+  free: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
+  pro: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+  team: 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300',
+};
+
+export function PlanBadge({ planId, className }: PlanBadgeProps) {
+  const name = planId.charAt(0).toUpperCase() + planId.slice(1);
+
+  return (
+    <Badge className={cn(planStyles[planId] ?? planStyles.free, 'font-medium', className)}>
+      {name}
+    </Badge>
+  );
+}