Skip to main content
Multi-week series · Week 3 of 8 · ~2 hours of class + lab
By the end of class your portfolio site will have a floating chat widget in the bottom-right corner. Anyone can open it and ask “tell me about yourself” — the answer arrives streaming, in your voice, grounded in your real background.

API key, the human moment

Get a free Gemini API key from Google AI Studio — the only manual step. AI does the env-var plumbing.

Write your persona

Your first serious prompt-engineering task: a persona.md system prompt that defines voice and constraints.

Streaming chat UI

Floating chat widget with token-by-token streaming, mobile-friendly layout, persistent session.

Learning objectives

By the end of this session, you should be able to:
  • Obtain an API key from Google AI Studio and wire it into both local .env.local and Vercel’s production env — with the AI doing the plumbing and you doing only the human-only OAuth moment.
  • Write a persona system prompt that makes Gemini 2.5 Flash answer as you, in your voice, with your background — your first serious piece of prompt engineering.
  • Describe a streaming chat UI in English and have Cursor implement it using the Vercel AI SDK, with no hand-written React.

Core topics

  • System prompts vs user prompts: why the invisible instructions matter more than the visible ones.
  • Streaming responses — why “tokens arrive one by one” is the default mode for modern chat UIs.
  • Secret management: where API keys go, where they don’t go, and how the AI helps you not commit them.
  • The “persona file” pattern — keeping your AI-self definition in one editable Markdown file.

Tools introduced this week

ToolRole this week
CursorWhere you talk; AI writes the chat component
Gemini 2.5 FlashThe model answering as your AI clone. Fast, cheap, good enough
Google AI StudioWhere you fetch the free API key. One manual moment
Vercel AI SDKAbstracts streaming, state, and provider differences
.env.local + Vercel envTwo places your API key lives — both set by AI via CLI
Prerequisites: Complete Week 2 — Deploy Your Personal Website first. You need a deployed yourname-portfolio.vercel.app to graft the chat widget onto.

Download Week 3 PDF

Full lecture · 647 KB — Session plan, hands-on lab steps, troubleshooting.

Continue to Week 4

Go full-stack with Neon and auth