Hendra Nicholas · Full-Stack Web Developer & AI Engineer Full-Stack Web Apps with Next.js, Python & AI.

// app/api/chat/route.ts
import { openai } from '@ai-sdk/openai';
import { embed, streamText } from 'ai';
import { createClient } from '@/lib/supabase/server';

export async function POST(req: Request) {
  const { question } = (await req.json()) as { question: string };
  const supabase = await createClient();

  // Embed the question and pull the closest chunks from pgvector
  const { embedding } = await embed({
    model: openai.embedding('text-embedding-3-small'),
    value: question,
  });

  const { data: docs, error } = await supabase.rpc('match_documents', {
    query_embedding: embedding,
    match_count: 5,
  });
  if (error) return new Response('Search failed', { status: 500 });

  const context = docs.map((d: { content: string }) => d.content).join('\n---\n');

  // Stream a grounded answer straight to the React client
  const result = streamText({
    model: openai('gpt-4.1-mini'),
    system: `Answer only from this context. Say "I don't know" otherwise.\n\n${context}`,
    prompt: question,
    temperature: 0.2,
  });

  return result.toTextStreamResponse();
}

# app/agents/support_agent.py
from anthropic import AsyncAnthropic
from fastapi import APIRouter
from pydantic import BaseModel

from app.tools import TOOLS, run_tool

router = APIRouter()
client = AsyncAnthropic()


class AgentRequest(BaseModel):
    message: str


@router.post("/agent")
async def support_agent(req: AgentRequest) -> dict:
    messages = [{"role": "user", "content": req.message}]

    # Let the model call tools until it has a final answer (capped at 5 steps)
    for _ in range(5):
        response = await client.messages.create(
            model="claude-sonnet-4-5",
            max_tokens=1024,
            tools=TOOLS,
            messages=messages,
        )
        if response.stop_reason != "tool_use":
            return {"answer": response.content[0].text}

        messages.append({"role": "assistant", "content": response.content})
        results = [
            {"type": "tool_result", "tool_use_id": block.id, "content": await run_tool(block.name, block.input)}
            for block in response.content
            if block.type == "tool_use"
        ]
        messages.append({"role": "user", "content": results})

    return {"answer": "Escalated to a human agent."}

// components/live-orders.tsx
'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@/lib/supabase/client';

type Order = { id: string; customer: string; total: number; status: string };

export function LiveOrders({ initialOrders }: { initialOrders: Order[] }) {
  const [orders, setOrders] = useState(initialOrders);

  useEffect(() => {
    const supabase = createClient();

    // Push new and updated rows into the list as they happen
    const channel = supabase
      .channel('orders-feed')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'orders' }, ({ new: row }) => {
        const order = row as Order;
        setOrders((current) => [order, ...current.filter((o) => o.id !== order.id)]);
      })
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, []);

  return (
    <ul className="divide-y divide-slate-800">
      {orders.map((order) => (
        <li key={order.id} className="flex justify-between py-3">
          <span>{order.customer}</span>
          <span className="font-mono">${order.total.toFixed(2)} · {order.status}</span>
        </li>
      ))}
    </ul>
  );
}