Chatbot Surface Build guide — Variation 19

Guide route

How Chatbot Surface was built.

This variation builds an AI-native conversational interface as the primary experience. Chat is not a widget bolted onto a brochure site—it is the navigation. Proof badges are inlined in assistant responses so evidence travels with the answer.

Brief

Build JD Workshop variation 19 as a distinct AI-native surface. The site should read as a serious chat interface, not a landing page with a fake chat strip. Include proof badges in the response flow, a sidebar of suggested prompts, and a /guide route that explains the system.

Do not repeat prior sites. Use a conversation-first layout with responsive behavior, typing simulation, and clear proof labeling.

Evidence labels

Real

Live interactive chat code, implemented proof badges, working syntax, guide route, and verified internal links.

Concept

Future memory, persistent session state, backend-backed responses, and more advanced agent behaviors—explicitly labeled.

Built demo

The streaming typing demo and simplified chatbot responses are working but intentionally scoped. They demonstrate pattern, not full product behavior.

Technical stack

  • Static HTML/CSS/JS pilot
  • Conversation UI with streaming text simulation
  • Suggested prompt sidebar with live input
  • Inline proof badges appended to assistant responses
  • No external runtime dependencies
  • Reduced-motion fallback: animations are additive and gated

Implementation choices

  • The assistant is a frontend simulation. Responses are pre-authored for different query patterns, not generated by an LLM backend.
  • Proof badges are appended programmatically so they can include link targets without cluttering response copy.
  • The composer uses a real form for keyboard submission and mobile behavior.
  • The sidebar collapses on small screens; chat remains the primary column.

Critique passes

  1. Pass 1: Distinct from prior variations by treating chat as interface, not widget. Conversation is navigation.
  2. Pass 2: Verify reduced-motion behavior, proof badge taxonomy, working guide route, responsive sidebar behavior, clean console, and single H1 per route.
  3. Pass 3: Static verification across home and guide routes; responsive behavior checked at desktop and mobile widths.