📊 View Lecture Slides Full-screen presentation with navigation

Session 6: Rapid Application Prototyping

Session Duration: 2 Hours     Block: 2 — AI-Assisted Engineering & Integration

Session clock

Minutes Mode Focus
0–50 Lecture Architectural Planning & UI Gen
50–110 Core lab Build Product-Specific UI & Mock API
110–120 Checkpoint Pair share / show artifact

Note: Stretch work starts only after the Core checkpoint is completed.

Learning Objectives

By the end of this session, students will be able to:

  • Apply a structured, architecture-first approach to translating a product idea into a technical flow diagram.
  • Generate a customized, product-specific frontend UI using natural language constraints and AI coding tools.
  • Identify the essential components of a Minimal Viable Prototype (MVP) versus a production-ready application.
  • Connect a frontend interface to a mock backend route (/query) while handling asynchronous states (empty, loading, and error).

Part 1: Theoretical Foundation — From Idea to Architecture

1.1 The Prototype Mindset

Before writing a single line of code, we must define what a prototype actually is. A prototype exists to answer one specific question: “Can AI execute this specific task well enough to be genuinely useful to a user?”

A prototype is about maximum learning with minimum investment.

  • ❌ What is NOT needed yet: Production-grade infrastructure, database scaling, user authentication (OAuth), payment gateways, or pixel-perfect CSS polish.
  • ✅ What IS needed: A functional UI that accurately represents your specific product, and a working round-trip request from the browser to the server.

If you spend three weeks building a login screen before testing your AI prompt, you are violating the prototype mindset.

1.2 Architecture-First Thinking

Junior developers often start by blindly generating HTML or pasting server code. Professional engineers draw boxes first. Before touching the code editor, you must answer three architectural questions:

  1. What does the user do? (Interaction Flow)
    • Step-by-step: The user opens the page, selects a document from a dropdown, types a question into a text box, and clicks “Analyze”.
  2. Where does processing happen? (Compute Location)
    • The dropdown and text box render in the Browser (Client).
    • The routing and API key management happen in Express/Node.js (Server).
    • The actual intelligence happens on Google’s servers (Gemini API).
  3. What data moves between these layers? (Data Payload)
    • The Browser sends a JSON payload: { "query": "What is the summary?", "doc_id": "123" }.
    • The Server responds with JSON: { "response": "The summary is...", "sources": ["page 1"] }.

Drawing this box-and-arrow diagram prevents you from writing code in the wrong place (e.g., exposing your secret API keys in front-end browser code).

1.3 The Minimal Stack for this Course

To keep our prototype lightweight and focused on AI logic rather than framework complexity, we use a minimal stack:

Layer Technology Purpose
Frontend HTML5 + CSS + Vanilla JavaScript Handles the user interface and browser events (clicks, form submits).
Backend Node.js + Express Serves the frontend files and acts as a secure middleman for API calls.
AI Engine Gemini API (Session 7) Processes the logic, summarization, and natural language generation.
Knowledge Obsidian Markdown (Sessions 8–9) The exocortex database providing facts for the AI.

This stack runs entirely on a standard laptop and requires no complex cloud deployments during the prototyping phase.

1.4 Generating a UI with Natural Language

In Session 5, we used Copilot to write backend JavaScript functions. Today, we will use AI (Copilot Chat, ChatGPT, or Claude) to generate entire UI layouts.

To get good results, you must constrain the AI. If you just ask for “a website,” it will hallucinate a complex React app.

The UI Generation Workflow:

  1. Describe: State exactly what the screen is for.
  2. Constrain: Explicitly ban complex frameworks. Request plain HTML/CSS/JS. Demand mobile responsiveness.
  3. Generate: Run the prompt.
  4. Evaluate: Open the generated index.html in a browser. Does it look right? Check the console for errors.
  5. Iterate: Do not accept the first draft. Say: “Make the input box larger, change the theme to dark mode, and add a loading spinner.”

1.5 The Mock Backend Pattern

In professional software teams, front-end developers do not wait for back-end developers to finish the AI logic before they start working. They use a Mock Backend.

A mock backend is a route that pretends to do the work, but actually just returns a hardcoded string or JSON object after a short delay. Why do this? It isolates bugs. If your UI successfully sends a request and correctly displays the hardcoded mock response, you know your front-end code and network fetching logic are perfect. Later, when you integrate the real AI (which might fail, timeout, or return weird errors), you will know the issue lies in the AI logic, not your UI.

Part 2: Practical Labs — Build Your Interface

Lab 6.1 — Architecture Diagram (Core)

Grab a piece of paper, use Excalidraw, or use a tablet.

  1. Draw a box for the Browser. Inside it, list the UI elements (e.g., Input Field, Submit Button, Results Area).
  2. Draw a box for the Express Server. Inside it, write POST /query.
  3. Draw an arrow from the Browser to the Server. Label the arrow with the exact JSON fields being sent (e.g., { query: string }).
  4. Draw a return arrow. Label it with the expected response JSON (e.g., { response: string, sources: array }).

Take a photo or export the image and save it in your vault at 03-Project/Architecture.md.

Lab 6.2 — Generate a Product-Specific UI (Core)

Important Rule: You cannot submit the default public/index.html from the starter kit. You must replace it with a UI specific to the product idea you defined in Session 1.

Your UI must contain:

  • A Product Title / Brand Name in an <h1> tag.
  • At least two inputs: The main text query, PLUS a domain-specific control (e.g., a dropdown to select a specific document, a slider for response length, or radio buttons for ‘Summary’ vs. ‘Detailed’).
  • A Submit button.
  • Visible Empty (initial state), Loading (waiting for server), and Error (server failed) states.
  • A Results section to display the output.

Starter Prompt for your AI Assistant:

I am building a prototype for [Insert Product Idea]. Generate a clean, modern, mobile-responsive single-page HTML interface. Requirements:

  • Product title: “[Insert Name]”
  • Include a main text input for queries.
  • Include a dropdown menu for [Insert domain specific control].
  • Include a Submit button.
  • Include a section that can display empty, loading, and error states.
  • Include a results section. Constraints: Use ONLY a single index.html file containing HTML, inline CSS, and vanilla JavaScript. Do not use React or Tailwind. The JS should use fetch() to POST a JSON payload { query, [other_field] } to the /query endpoint.

Copy the output, replace the contents of public/index.html in your starter kit, and open http://localhost:3000 to evaluate it. Iterate as needed.

Lab 6.3 — Test the Mock Round-Trip (Core)

  1. Open server.js in your starter kit. Ensure the app.post('/query', ...) route is present. It should be returning a hardcoded, mock response (e.g., "This is a mock response from the server.").
  2. Interact with your new UI in the browser. Type a query and click submit.
  3. Verify that the UI transitions to a “Loading” state, and then successfully displays the mock text returned by the server.
  4. If it fails, open the Browser Developer Tools (F12) -> Console / Network tab to debug your fetch request. Use Copilot to help fix any JavaScript errors.

Lab 6.4 — Checkpoint

Take a screenshot of your working, custom UI displaying the mock response. Save this alongside your architecture diagram. You now have a fully functional scaffolding ready to be wired up to a real LLM in Session 7.

Stretch Goal: Refine the CSS to match a specific brand identity (colors, fonts). Add a placeholder sidebar area where document “citations” or “sources” can be listed in Session 9.

Key Takeaways

  • A prototype prioritizes validating core AI functionality over production-level infrastructure and polish.
  • Architecture first: Always diagram the interaction flow, compute locations, and data payloads before writing code.
  • Our minimal stack (Vanilla JS, HTML, Express) allows for rapid iteration without complex build steps.
  • Utilizing a mock backend isolates frontend UI/network bugs from backend AI integration bugs, drastically simplifying the debugging process.

Further Reading & Resources

  • Excalidraw: excalidraw.com - The industry standard for rapid, sketch-style architecture diagramming.
  • MDN Web Docs - Fetch API: Essential reading for understanding how the browser communicates with the Express server asynchronously.
  • Express Static Files: Review how express.static('public') serves your HTML.