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

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