AI Development Stack (2026)

# Core SDK and React hooks
npm install ai @ai-sdk/react

# AI Provider adapters (install as needed)
npm install @ai-sdk/openai
npm install @ai-sdk/anthropic
npm install @ai-sdk/google

// app/api/chat/route.ts
import { streamText } from 'ai'
import { openai } from '@ai-sdk/openai'

export async function POST(req: Request) {
  const { messages } = await req.json()

  const result = await streamText({
    model: openai('gpt-4o'),
    messages,
  })

  return result.toDataStreamResponse()
}

'use client'
import { useChat } from '@ai-sdk/react'

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>{m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  )
}

import { anthropic } from '@ai-sdk/anthropic'
import { google } from '@ai-sdk/google'

// Free tier for anonymous users
const model = user.isAuthenticated
  ? anthropic('claude-sonnet-4.5')
  : google('gemini-2.5-flash')

// trigger/generate-dashboard.ts
import { task } from '@trigger.dev/sdk'
import { generateText } from 'ai'
import { anthropic } from '@ai-sdk/anthropic'

export const generateDashboard = task({
  id: 'generate-dashboard',
  run: async (payload: { prompt: string }) => {
    const { text } = await generateText({
      model: anthropic('claude-opus-4.6'),
      prompt: payload.prompt,
      experimental_telemetry: true,
    })

    return { dashboard: JSON.parse(text) }
  },
})

import { task, batch } from '@trigger.dev/sdk'

export const generateComplexDashboard = task({
  id: 'generate-complex-dashboard',
  run: async (payload: { prompt: string }) => {
    // Step 1: Generate dashboard structure
    const structure = await generateStructure.trigger({ prompt: payload.prompt })

    // Step 2: Generate each widget in parallel with rate limiting
    const widgets = await batch.triggerByTaskAndWait(
      'generate-widget',
      structure.widgets.map(w => ({ widget: w })),
      { concurrencyLimit: 5 }
    )

    // Step 3: Validate and combine
    return { dashboard: combineWidgets(widgets) }
  },
})

export const processBatch = task({
  id: 'process-batch',
  queue: {
    name: 'ai-requests',
    concurrencyLimit: 5,
  },
  retry: {
    maxAttempts: 3,
    byStatus: {
      '429': {
        strategy: 'headers',
        resetHeader: 'x-ratelimit-reset',
      },
    },
  },
  run: async (payload) => {
    // AI generation with automatic retry on rate limits
  },
})

// app/api/generate/route.ts
import { tasks } from '@trigger.dev/sdk/v3'
import type { generateDashboard } from '@/trigger/generate-dashboard'

export async function POST(req: Request) {
  const { prompt } = await req.json()

  const handle = await tasks.trigger<typeof generateDashboard>(
    'generate-dashboard',
    { prompt }
  )

  return Response.json({ runId: handle.id })
}

'use client'
import { useRealtimeRun } from '@trigger.dev/react-hooks'

export function DashboardGenerator({ runId }: { runId: string }) {
  const { run, error } = useRealtimeRun(runId)

  if (run?.status === 'EXECUTING') {
    return <div>Generating: {run.output?.progress}%</div>
  }

  if (run?.status === 'COMPLETED') {
    return <Dashboard data={run.output} />
  }

  return <div>Loading...</div>
}

create table dashboards (
  id uuid primary key default gen_random_uuid(),
  user_id uuid references auth.users,
  spec jsonb not null,
  embedding vector(1536),
  created_at timestamptz default now()
);

-- Vector similarity search
create index on dashboards using hnsw (embedding vector_cosine_ops);

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(url, key)

supabase
  .channel('dashboards')
  .on('postgres_changes',
    { event: 'UPDATE', schema: 'public', table: 'dashboards' },
    (payload) => {
      console.log('Dashboard updated:', payload.new)
    }
  )
  .subscribe()

// app/api/chat/route.ts
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'

export async function POST(req: Request) {
  const supabase = createRouteHandlerClient({ cookies })
  const { data: { user } } = await supabase.auth.getUser()

  const rateLimit = user ? authenticatedLimit : anonymousLimit
}

npm install @upstash/ratelimit @upstash/redis

// lib/rate-limit.ts
import { Ratelimit } from '@upstash/ratelimit'
import { Redis } from '@upstash/redis'

const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL,
  token: process.env.UPSTASH_REDIS_REST_TOKEN,
})

// Free tier: 3 requests per day
export const freeTierLimit = new Ratelimit({
  redis,
  limiter: Ratelimit.fixedWindow(3, '24h'),
  prefix: 'ratelimit:free',
})

// Paid tier: 100 requests per minute
export const paidTierLimit = new Ratelimit({
  redis,
  limiter: Ratelimit.fixedWindow(100, '1m'),
  prefix: 'ratelimit:paid',
})

// app/api/chat/route.ts
import { freeTierLimit, paidTierLimit } from '@/lib/rate-limit'

export async function POST(req: Request) {
  const user = await getUser(req)
  const limit = user?.isPaid ? paidTierLimit : freeTierLimit

  const { success, reset } = await limit.limit(user?.id || getIP(req))

  if (!success) {
    return Response.json(
      { error: 'Rate limit exceeded', reset },
      { status: 429 }
    )
  }

  // Continue with AI generation
}

const model = user.isPaid
  ? anthropic('claude-opus-4.6')  // $5/$25 per MTok
  : google('gemini-2.5-flash')    // Free

npm install next@latest react react-dom
npm install -D typescript @types/react @types/node
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

npm install ai @ai-sdk/react
npm install @ai-sdk/openai        # OpenAI
npm install @ai-sdk/anthropic     # Claude
npm install @ai-sdk/google        # Gemini

npm install @trigger.dev/sdk
npm install -D @trigger.dev/cli
npm install @trigger.dev/react-hooks  # For useRealtimeRun

npm install @supabase/supabase-js
npm install @supabase/auth-helpers-nextjs  # Next.js auth helpers

npm install @upstash/ratelimit @upstash/redis

npm install zod                   # Schema validation
npm install @vercel/analytics     # Vercel Analytics
npm install @vercel/speed-insights # Performance monitoring

// Use Vercel AI SDK streaming directly
export async function POST(req: Request) {
  const result = await streamText({ model, messages })
  return result.toDataStreamResponse()
}

// Trigger Trigger.dev task, stream progress via Realtime
export async function POST(req: Request) {
  const handle = await tasks.trigger('long-generation', payload)
  return Response.json({ runId: handle.id })
}
// Frontend uses useRealtimeRun(runId) to show progress

// Coordinator task triggers N workers with concurrency limit
export const batchGenerate = task({
  id: 'batch-generate',
  run: async (payload) => {
    const handles = await batch.triggerByTaskAndWait(
      'generate-one',
      payload.items,
      { concurrencyLimit: 5 }
    )
    return handles
  },
})

// Supabase Realtime for live updates
supabase
  .channel('dashboard')
  .on('postgres_changes', { event: '*', table: 'dashboards' }, handleChange)
  .on('broadcast', { event: 'cursor-move' }, handleCursor)
  .subscribe()