All the parts

Build · Add powers

AI features

How do I add chat, summaries or smart search with AI?

What it is

You rarely train a model. You send text to a model run by someone else through an API, and it sends text back. Your server adds the right context, keeps the secret key, and streams the answer to the browser as it is written.

It is hiring an expert by phone: you explain the problem, they answer, and you pay for the time on the call.

Add it when You want to summarize, write, classify, answer questions about your own data, or chat.

It can wait when A normal search, filter or rule would solve it. AI costs money on every call.

1 Which one should I pick?

Answer what you can. The ranking updates as you go, and you can ignore it if you disagree.

What do you want to build?
How much do you want to run yourself?
What matters most right now?

Most people start with

2 Side by side

Three pips is strong, one is weak. Pick a row to read about it below.

OptionQuick to set upCheap while smallEasy to leaveRoom to growPrice
Pay per use, by amount of text
Free library; you pay the model provider
Free; part of your database
Free tier, then pay per use
Free software; you pay for the hardware

3 Look closer, then wire it in

Managed service

LLM API (Claude or OpenAI)

Send a prompt to a hosted model and get text back, streamed if you like.

Pick it when You want the strongest models and the quickest start.

Skip it if Your data must never leave your own machines.

  • Top-quality models with no hardware
  • A few lines of code
  • Streaming and tool calls supported
  • You pay for every call
  • Your data goes to another company
Quick to set up
Cheap while small
Easy to leave
Room to grow

PricePay per use, by amount of text

How to connect it

  1. Create an account and an API key.
  2. Store the key as a server-side secret, never in the browser.
  3. Call the API from a server route with the user's prompt.
  4. Stream the reply back and set a timeout and a per-user limit.
Put these in your .env file
  • ANTHROPIC_API_KEY
  • OPENAI_API_KEY
app/api/chat/route.ts
import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic(); // reads ANTHROPIC_API_KEY

export async function POST(req: Request) {
  const { prompt } = await req.json();
  const msg = await client.messages.create({
    model: process.env.AI_MODEL!, // pick a current model in your settings
    max_tokens: 500,
    messages: [{ role: "user", content: prompt }],
  });
  return Response.json(msg.content);
}

4 Watch it work

Press play, or step through one message at a time.

Press Play to watch it run · 6 steps

Your server sits in the middle. It holds the key, adds context, and streams the answer back.

A prompt, answered by a modelYour server sits in the middle. It holds the key, adds context, and streams the answer back.Prompt: summarize my notesCheck login and per-user limitAdd context from your dataSend prompt, with your secret keyStream tokens as they are writtenPass the stream through
  • Client
  • Service
  • External API
Text description
  1. Browser → Your server: Prompt: summarize my notes
  2. Your server: Check login and per-user limit
  3. Your server: Add context from your data
  4. Your server → AI model: Send prompt, with your secret key
  5. AI model replies to Your server: Stream tokens as they are written
  6. Your server replies to Browser: Pass the stream through

5 Mistakes to skip

  • Calling the model from the browser with your key.

    Anyone can copy the key from the page. Call the model from your server and keep the key in a secret.

  • No limit per user.

    Cap requests and output length per user and per day, and set a spending alert, so one user cannot run up your bill.

  • No timeouts or retries.

    Set a timeout, retry once or twice on temporary errors, and show a friendly message if it still fails.

See where it sits in a whole app

The stack builder draws your product with ai features in it and animates a request through it.

Open the stack builder

Works closely with