Build production-ready AI chatbots, voice assistants, and conversational interfaces with prompt engineering
AI Chatbot & Conversational UI is the definitive framework for developers and product teams building AI-powered conversational experiences. It covers the full chatbot stack: system prompt architecture, conversation flow design, React streaming chat UI, RAG integration for knowledge-base chatbots, fallback and escalation logic, persona design, and analytics.
Full Access Unlocked
All 54 prompts · All 7 modules
"The system prompt architecture framework transformed how our team writes prompts. Chatbot accuracy w..."
CTO · Customer Service SaaS
Need expert implementation?
Hire an OrchestratorConnect with a certified Prompt.Doctor Orchestrator to deploy this framework for you.
No coding required. You will use ChatGPT or Claude as your AI tool. Follow these steps in order — do not skip ahead.
Purchase & download the framework
Click the buy button on this page. After checkout, go to the and hit Download .zip. Unzip it — you'll get a .md file (the full framework) and a .pdf (easy to read reference). Keep both open.
Open your project — new or existing
This dashboard is designed to integrate into any existing project or be built as a standalone app. If you already have a site in Airo (or Cursor, Bolt, etc.), open that project. If you're starting fresh, create a new project. The Orchestrator Prompt handles both cases — it scans what's already there and adds only what's missing.
Paste the Orchestrator Prompt into your builder's chat
Open the on this page. Copy the Orchestrator Prompt and paste it into your AI builder's chat. It will scaffold the full admin system — secure login, email marketing module, booking engine, and CMS — on top of your existing codebase. This takes 2–5 minutes.
Add your API keys as secrets
Critical — Novice UsersIn your builder, go to Settings → Secrets and add the keys your app needs. For this framework: STRIPE_SECRET_KEY (for booking payments — get it from your Stripe dashboard), ANTHROPIC_API_KEY (for AI-assisted content — get it from console.anthropic.com), and DATABASE_URL (your MySQL connection string). No key is needed for the admin login, CMS, or email modules — those run on your existing infrastructure.
Don't have a MySQL server?
You can purchase a shared hosting plan with cPanel and MySQL at host.esgwon.dev. Once your account is set up, follow the step-by-step guide to create your database and connect it to your AI website builder.
How to set up cPanel MySQL & connect to your AI website →Need help with Stripe?
Get your STRIPE_SECRET_KEY and STRIPE_PUBLISHABLE_KEY from your Stripe dashboard. The guide covers test keys, webhook setup, and going live.
Need help with Anthropic?
Get your ANTHROPIC_API_KEY from console.anthropic.com. The guide covers model selection, cost management, and troubleshooting.
Prompting Airo after setup — always name the file
When asking Airo to add tables, columns, or features to the admin dashboard, always include src/server/lib/admin-db.ts in your prompt. Without it, Airo may target the wrong database. Example: "Add a bookings table in the admin database (src/server/lib/admin-db.ts) — do not touch any other database connection in this project."
Run the framework prompts inside your live app
Your app is now running in the builder's preview panel. Open the on this page, copy each prompt one at a time, and paste it into your builder's chat. Replace every [BRACKET] with your real data before sending. Work through the stages in order — each stage output feeds the next.
Test end-to-end, then publish or hand off to your client
Walk through the admin as a real user: log in, create a booking, send a test email campaign, update a CMS image, and run the Safe-to-Publish gate. Once everything passes, click Publish in your builder. Because this is a white-label dashboard, your client accesses it at /admin on their own domain — no Prompt.Doctor branding, no third-party login required.
7 modules · 54 prompts · 7 workflow stages
System Prompt Architecture
Framework for writing system prompts that produce consistent, high-quality chatbot responses. Covers role definition, context injection, constraint setting, output format specification, and few-shot examples.
10 promptsConversation Flow Design
Intent detection patterns, slot filling for multi-step conversations, context window management, conversation state machine design, and multi-turn dialogue examples.
8 promptsReact Streaming Chat UI
Complete React TypeScript chat component with streaming response display, typing indicator, message history with timestamps, copy button, regenerate button, and mobile-responsive design.
10 promptsRAG Integration System
Document ingestion pipeline (PDF, markdown, web scraping), text chunking strategies, OpenAI embedding generation, vector database integration (pgvector), and context injection into system prompt.
12 promptsFallback & Escalation System
Confidence scoring for chatbot responses, graceful fallback messages, topic boundary enforcement, human handoff trigger logic, and escalation to live chat or email.
6 promptsPersona & Voice Design
Chatbot persona definition framework, voice and tone guide, response length calibration, personality consistency testing prompts, and brand voice alignment system.
4 promptsAnalytics & Improvement Loop
Conversation logging schema, intent tracking dashboard, unanswered question detection, weekly improvement review process, and A/B testing framework for system prompt variants.
4 promptsWrite a production-ready system prompt for a [CHATBOT TYPE: customer service/sales/support/knowledge base] chatbot for [COMPANY NAME], a [COMPANY DESCRIPTION]. Include: 1) Role definition (who the bot is, what it does, what it doesn't do), 2) Persona (name, personality, tone — 3 adjectives with behavioral examples), 3) Knowledge scope (what topics it can and cannot discuss), 4) Response format rules (length, structure, use of lists/headers), 5) Escalation triggers (when to offer human handoff), 6) Prohibited behaviors, 7) 3 few-shot examples (user message → ideal bot response). Format as a complete system prompt ready to paste into the API.
Build a React TypeScript chat interface component for an AI chatbot. Requirements: 1) Sends messages to POST /api/chat with { messages: Message[] } and streams the response using Fetch API ReadableStream, 2) Displays streaming tokens as they arrive, 3) Message types: user (right-aligned) and assistant (left-aligned), 4) Typing indicator: animated dots while waiting, 5) Each message: timestamp, copy-to-clipboard button, 6) Input: textarea (auto-resize), send button (disabled while streaming), Enter to send, 7) Auto-scroll to latest message, 8) Error state with retry button, 9) Mobile responsive. TypeScript with all imports.
Build a Node.js TypeScript RAG pipeline. Requirements: 1) Document ingestion: accepts PDF files, extracts text using pdf-parse, 2) Chunking: 500-token chunks with 50-token overlap, 3) Embedding: OpenAI text-embedding-3-small for each chunk, 4) Storage: PostgreSQL with pgvector extension, 5) Retrieval: top-5 most similar chunks using cosine similarity, 6) Context injection: formats retrieved chunks for system prompt, 7) Full TypeScript. Include schema SQL and npm install commands.
system
14 prompts
architecture
20 prompts
prompts
10 prompts
workflow
6 prompts
templates
4 prompts
"The system prompt architecture framework transformed how our team writes prompts. Chatbot accuracy went from 71% to 94% after implementing the role/context/constraints pattern."
CTO
Customer Service SaaS
"The RAG pipeline prompt produced a complete, working document chatbot in one session. The streaming UI component is production-quality out of the box."
Solo Developer
AI Product Builder
All 54 prompts across 7 modules are unlocked for your account.
Lifetime access