App Builder

Intermediate

AI Chatbot Feature

Add a real AI chat feature with streaming responses, conversation history, and graceful failure handling.

6 steps20 verify checks60-120 minutesWorks with: emergent · chatgpt · claude · cursor

Start Guided Walkthrough

#ai #chatbot #llm #chat #streaming

The Route

0/6 verified

Define the assistant spec

Decide what the assistant does, its boundaries, and its system prompt.

3 checks 02

Build the chat UI

A trustworthy chat surface with all interaction states.

3 checks 03

Integrate the real LLM API

Replace nothing with something: real model responses through the backend.

3 checks 04

Persist conversation history

Chats must survive refresh and be scoped to their owner.

4 checks 05

Harden failure and limit handling

AI features fail in production - make every failure visible and recoverable.

3 checks 06

Chat QA pass

Verify realness, persistence, and resilience end to end.

4 checks

Every step ends at a Verify Gate. Do not continue until every check passes.

Context Pack

Paste this first. It briefs the AI on requirements, constraints, and the Definition of Done before your first build prompt.

Context Pack

PROJECT CONTEXT:
I am adding an AI chat assistant to my app using an LLM API.

GOAL:
Implement a working AI chat with real LLM responses, persisted history, and robust loading/error states.

REQUIREMENTS:
- Chat UI with user/assistant message bubbles
- Real LLM API integration server-side (key never in frontend)
- Conversation history persisted and reloadable
- Typing/streaming indicator while responding
- Clear error states for API failures and rate limits

CONSTRAINTS:
- No hardcoded canned responses pretending to be AI
- API keys live only on the backend
- The send button must disable while a response is pending

DEFINITION OF DONE:
- Sending a message returns a real AI response
- History survives refresh
- API failure shows a visible, recoverable error
- The assistant follows its configured system prompt

COMMON FAILURES TO AVOID:
- A chat UI answering from a hardcoded response array
- API key pasted into frontend code
- History lost on refresh because messages are only in state
- Infinite spinner when the API errors

Paste this into your AI builder first. It teaches the AI what you want before you give it the build prompt.

Related routes

More App Builder flows that share ground with this one.

App Builder

Generated

Add Real-Time Presence Indicators to a Chat App with WebSockets

A step-by-step flow for implementing real-time online, offline, and typing presence in a chat app using WebSockets, including backend presence tracking, frontend updates, reconnect handling, and verification.

01Inspect the existing chat architecture and choose presence data flow

02Define the presence event contract and server-side state model

03Implement authenticated WebSocket connection handling on the server

+7 more steps to Done

Best forbuilders who have shipped a basic app before

10 steps60-120 minutesIntermediate

Start Route Details

App Builder

Generated

Add Team Invites to a SaaS App

Build a real team invitation system for a SaaS app, including invite creation, email/share flow, acceptance, membership creation, role assignment, validation, and end-to-end testing.

01Audit Existing Team, User, and Auth Models

02Add Invitation Data Model and Migration

03Implement Secure Invite Creation API

+7 more steps to Done

Best forbuilders who have shipped a basic app before

10 steps60-120 minutesIntermediate

Start Route Details

App Builder

Generated

Add a Working Team Invite System to a SaaS App

Build a real invite flow for a SaaS app so existing users can invite teammates by email, store invite records, validate tokens, accept invitations, and join the correct workspace with proper permissions.

01Audit the current auth and workspace model

02Add the invite data model and migration

03Build secure invite creation on the server

+6 more steps to Done

Best forbuilders who have shipped a basic app before

9 steps60-120 minutesIntermediate

Start Route Details