Skip to Content
ArchitectureArchitecture

System Architecture

The project consists of three main layers:

  1. Front-end – a Next.js App Router application rendered on the edge.
  2. API routes – collocated inside app/api/*, exposing server-less endpoints.
  3. Third-party services – OpenAI, Vercel KV and Pagefind for search.

Component diagram

Data flow (user asks a question in the chat widget)

  1. Message mutation – The React chat widget POSTs the message to /api/chat.
  2. Tool-enabled streaming – The API route uses @ai-sdk/openai to stream chunks back.
  3. UI hydration – The front-end consumes the stream with Server Sent Events and updates the UI in real time.
The entire round-trip is edge-optimised – everything happens close to the user for low latency.

Where to look next

PathWhat you will find
app/api/chat/Streaming AI completions with tools
app/api/articles/*Vector store ingest & search
components/chat/Front-end chat widget with tool rendering

This should give you enough pointers to dive into the code with confidence.

Last updated on
Getting StartedGuides