PM Workshop · Pre-Read
Project Nebula
Pre-read · Session 3
Building scalable, secure, end-to-end AI prototypes with modern coding agents.
Aug 2025
From simple to scalable
Evolving from x to 10x
100 demos from 100 PMs in session 2.
Demo · 01
Demo · 02
Demo · 03
We saw some really fun prototypes during session 2.
But… how do we build applications with much higher feature complexity?
Going from a click-through prototype to a real, multi-flow product means thinking about state,
integrations, auth, persistence, and AI behavior under edge cases.
100 PMs · 100 demos
Step 02
Spin up a model resource
Inside your LLM provider (Azure OpenAI / OpenAI / Anthropic / Bedrock), create the resource that will host your deployment.
Action
Log in to your provider's portal
with your provider account.
Open the LLM service and click Create a new resource.
Fill in the basics: name, region, pricing tier. You can skip tagging.
Review and create — provisioning usually finishes in under a minute.
Heads-up
Each provider names things differently — "Resource", "Project", "Workspace" — but the flow is the same.
01 · Open service
02 · Configure & create
Your provider's portal will look similar.
Provision · Configure · Create
Step 03
Open your provider's model portal
Once the resource exists, jump into the provider's model studio — the place where you browse, deploy, and test models.
How to navigate
From the resource home page, open the resource you just created.
Match the icon and name to find the correct one if you have multiple.
Click Explore the model portal
(or equivalent — "Open Studio", "Open Workbench").
tip
Bookmark this portal — you'll come back to it every time you swap models or rotate keys.
01 · Find resource
02 · Launch portal
Your provider's portal will look similar.
Locate · Open · Explore
Step 04
Deploy a model
Browse the model catalog and stand up the one you'll call from your backend.
Action
Open the Model Catalog inside the portal.
Pick a frontier general-purpose model.
Click Deploy — give the deployment a memorable name.
For example
GPT-4.1
Claude Sonnet
Llama 3
Gemini 1.5
Pricing note
Pick a tier that matches your free credit balance. Smaller models are cheaper for the warmup phase.
Model catalog
Your provider's portal will look similar.
Browse · Choose · Deploy
Step 05
Wire the model into your app
Three values to copy out of the portal — then we never type them again.
01
Deployment name
e.g. my-recipe-bot
The label you gave the deployment in Step 04. You'll reference this in API calls.
02
Key 1
use either Key 1 or Key 2
Your authentication secret. Treat it like a password.
03
Endpoint URL
<your-resource>.openai.example.com
The base URL your backend will POST against.
Find the name
Find Key & Endpoint
Your provider's portal will look similar.
⚠
Never put the Key or Endpoint in front-end code.
They belong server-side, behind a backend route — never in your bundle, never in a public repo.
Name · Key · Endpoint
Session activity
Smart Recipe Recommender
A web app that helps health-conscious, busy folks plan meals by curating creative recipes from
available ingredients,
dietary needs, and
preferred cuisines.
Your task: build the end-to-end prototype by completing one user flow at a time.
View · 01
Pick ingredients
What's in your fridge right now.
View · 02
Add preferences
Diet, allergies, cuisine.
View · 03
Fetch AI recipes
Curated, ranked, ready to cook.
Note: For the scope of the session, we'll illustrate this iterative process by building one end-to-end user flow.
Activity scope
Stitch front-end, backend and your LLM service
Complete at least one user flow to deliver working functionality end-to-end.
User flow
1
Select ingredients
From a curated grid or freeform input.
2
Add dietary preferences (optional)
Vegetarian, low-carb, allergens.
3
Fetch AI-generated recipes
Backend calls the model and returns ranked ideas.
Reference flow
One flow · End-to-end · Working
Step 01
Build the skeleton UI — with a backend layer baked in
Hand your coding agent a single, well-scoped prompt. Let it scaffold the UI and the backend layer in one shot.
Reference scaffold
Action
Copy-paste the starter prompt
Drop this into your coding agent's chat pane to scaffold the UI and backend in one go.
prompt file
Smart_Recipe_Recommender_UI_BE.md
Customize the prompt template to match your domain, design system, and tech-stack preferences before you send it.
tip
Same idea in Cursor, Claude Code, or Windsurf — the prompt is portable.
UI · Backend · One prompt
Best practice · 01
Plan before jumping onto the coding bit
Force a structured approach. Demand an execution plan up-front — otherwise your coding agent tends to skip instructions arbitrarily.
Why it matters
Without an explicit plan, the agent jumps straight into code — combining steps, skipping validations, and leaving you to untangle the diff.
Ask first, code later.
A short plan is cheap; a tangled commit is not.
Prompt scaffold
"Before writing any code, give me an execution plan as numbered steps. Wait for my confirmation."
Your coding agent · chat pane
Example coding agent — your tool (Copilot, Cursor, Claude Code…) will look similar.
Step · Plan first
Best practice · 02
Explain your requirements
Describe the user journey. Attach a 'spec-let'. Drop in reference images. Expect to iterate.
A
User journey
Narrate the flow end-to-end — who starts where, what they tap, what they see next.
B
Spec-let
A short markdown brief with acceptance criteria. Saves dozens of back-and-forth messages.
C
Reference images
Screenshots of inspiration, mockups, or your existing design system.
Requirements being attached
Example coding agent — your tool will look similar.
Expect multiple iterations.
Refining the brief is part of the loop — not a sign of failure.
Best practice · 03
Control the look & feel and the tech stack
A dedicated Design System section in your brief — plus an explicit stack choice — keeps the agent on rails.
Design System section
Articulate look & feel
Define colors, typography, spacing, and component patterns in one place. You can have your agent generate this from session #1 outputs.
Tech stack
Prescribe your stack
Pick deliberately. Example:
React frontend +
Python backend +
your icon system (Fluent, Heroicons, Lucide…).
Design System & stack — captured in the brief
Example coding agent — your tool will look similar
Best practice · 04
Ask your agent to test & validate before hand-off
Instruct the agent to do a full test pass on the user flow. Provide your test cases — or have it generate them and return the report.
Option A
Bring your own test cases
Paste the user-flow scenarios you care about. Ask the agent to walk through each, report pass/fail, and fix what breaks.
Option B
Let the agent generate TCs
Ask it to enumerate the test cases first (you sanity-check the list), then run them and return a structured test report.
Test & validation prompt
Example coding agent — your tool will look similar.
Verify, don't trust.
Treat the test report as evidence — spot-check at least one route yourself.
Step 02
Integrate your LLM via the backend layer
Paste a structured prompt into your coding agent's chat pane and let it scaffold the integration end-to-end.
Smart Recipe Recommender · running example
Action
Paste the prompt
Drop the integration prompt into your coding agent's chat pane and run it.
prompt · markdown
Smart_Recipe_Recommender_AI.md
Customize the template to match your own use case — model name, endpoint shape, response schema.
Step 02 · LLM via backend
Iterating · keep the thread alive
Explain the next requirement while maintaining continuity
When you add a new requirement, re-anchor the agent and ask for a fresh execution plan before any new code lands.
Pattern
Anchor → ask → plan → code
Anchor. Re-state what's done so far.
Ask. Describe the new requirement.
Plan. Demand an execution plan.
Code. Only after you approve the plan.
Continuity beats restarts.
Don't open a fresh chat for every new feature — you lose context.
Adding the next requirement · same thread
Example coding agent — your tool will look similar.
Integration brief
Communicate how you expect the integration to work
Spell out the four dimensions explicitly — vague briefs cause silent regressions.
UI
UI consistency
Reuse existing components & tokens — no one-off styles.
Backend
Backend functionality
Route handler, request/response schema, error states.
LLM
Real LLM API + fallback
Live model endpoint, with mock-data fallback for offline demos.
Compat
Browser & error handling
Cross-browser checks, network failure paths, user-visible errors.
Integration expectations · in the brief
Example coding agent — your tool will look similar.
Wiring up the model endpoint
Hand the agent your LLM details to set up config
Use the official SDK for your LLM provider, push secrets into env vars, and keep keys out of the front-end — always.
SDK
Use the official SDK
e.g. openai, anthropic, @aws-sdk/client-bedrock-runtime.
env vars
Set environment variables
Endpoint, deployment name, API key, model ID — all from process.env.
.env file
Create a .env file
Add to .gitignore. Never check in. Never bundle into the client.
Endpoint + key handed to the agent
Keys never live in the browser.
All model calls go through your backend.
Resilience & thrift
Build a fallback to preserve your free credits
Detect whether your LLM service is configured. If not, gracefully switch to mock data — perfect for offline demos and saving credits while iterating on UI.
Decision flow
If env vars present → call the live model endpoint.
If not configured → return curated mock data.
If the live call fails → fall back to mock + log.
Benefits
Demo works on planes, in pitch rooms, behind firewalls.
Front-end iteration doesn't burn paid tokens.
Reviewers can clone & run without credentials.
Fallback being requested
Example coding agent — your tool will look similar.
Always-on demo.
The audience never sees a broken state — even when your wifi does.
Prompt engineering
Provide your custom prompt for the model to execute
Two ways to play it: (1) hand your agent the prompts you already trust, or (2) ask it to author a prompt that matches your use case.
Option A
Bring your own prompt
Instruct the agent to use your prompt when calling the LLM service — verbatim, with parameter substitution.
prompt instruction
Use the prompt in /prompts/recipe.md exactly as written when calling the model endpoint.
Option B
Let the agent build one
Describe the use case and ask the agent to author a prompt — system message, structure, output schema and all.
prompt request
Build a prompt for the recipe recommender — system + user + JSON output schema. Then wire it into the route handler.
Example coding agent — your tool will look similar
Step 2.1
Replace placeholders with real credentials
Manually update the .env file with your real LLM API credentials and set the
AI_Enabled flag to true. The file lives inside the backend/ folder.
Before
Auto-generated .env file with placeholder LLM API credentials.
After
Manually updated .env with your actual endpoint & key.
<your-resource>.openai.example.com
Step 2.2
Nudge your coding agent to restart the server to pick the updated .env
Common issue
Server may not pick the updated .env.
Nudge the agent to investigate and fix the underlying issue.
Common issue
Agent creates .env_example instead of .env.
Remind it explicitly to create the actual .env file.
Know what you're working with
Cognitive deficits of your agent
Reference
Excerpts from "Software is changing again" — Andrej Karpathy at Y Combinator Startup School.
| Deficit | Manifestation in prototyping |
|---|---|
| Hallucination | Believes it completed a task it never did. Assumes code exists when it doesn't. |
| Jagged intelligence (how many Rs in strawberry?) |
Wrong logic in code, leading to bugs it struggles to discover on its own. |
| Anterograde amnesia (always a new employee) |
Starting a new chat makes the agent forget all prior work and conversations. |
| Gullibility | Prompt-injection risk. The AI in your prototype could leak API keys or other secrets. |
| Sycophancy | Your POV could be wrong, but the agent goes ahead and "fixes" it anyway. |