Chapter 06 · AI-Powered Full Stack
Add an AI Feature: Summarise Text with an API
Now connect a real model call — still behind your API, with tight limits.
Why this matters
This is the moment the project becomes “AI-powered”. Recruiters care that you shipped a feature, not that you memorised model names. Keep prompts short and log spend carefully (we never invent fee numbers here).
What you will learn
You will add a summarise mode: paste customer text → API builds a system + user prompt → model returns 3 bullet points → UI shows them. You will also add a kill switch if the vendor is down (fallback message).
How to do it
Use any OpenAI-compatible HTTP API you already have access to as a student. If you have no key yet, keep the stub and mark TODO.
Steps (do these in order)
- Step 1 — Env. AI_API_KEY and AI_BASE_URL in .env (server only). Restart the server after changes.
- Step 2 — Prompt. System: “Summarise in 3 short bullets for a shop staff member in India. No prices. No medical or legal advice.” User: the pasted text.
- Step 3 — Call with timeout. HTTP POST with a 20s timeout. On failure return a friendly error — do not hang the UI.
- Step 4 — Trim output. Cap answer length. Strip any accidental secrets the model might echo.
- Step 5 — UI toggle. Let the user choose Ask FAQ (later RAG) vs Summarise. For this chapter, Summarise is enough.
Practice
- Summarise one fictional angry delivery message and one polite return request. Save outputs in docs/samples.md.
- List three failure modes (no key, timeout, empty model output) and what the UI shows for each.