How to Build an App Like ChatGPT (Chatbot Guide, 2026)

What does it actually take to build an app like ChatGPT?

In November 2023, less than a year after launch, OpenAI's chief executive told developers that ChatGPT had reached 100 million weekly users. Since then, founders, agencies and curious weekend builders have asked the same question: could I make one of those?

The honest answer is yes, with one clarification that changes everything. The hard part of ChatGPT, the model, is something you rent, not something you build. Training a frontier model costs more than most companies will ever raise. Calling one costs a fraction of a cent per message. Everything a user actually touches (the sidebar of past chats, the text that streams in word by word, the code blocks with a Copy button) is ordinary web software.

That splits the project into three layers you can reason about separately:

1. The interface: a chat window, a history sidebar, a composer, Markdown rendering, a model picker. This is a front-end app, and it is exactly the kind of thing an AI app builder writes well.
2. The server: a small endpoint that receives a message, checks who is asking, adds your instructions (the system prompt) and past messages, calls the model provider, and streams the reply back.
3. The data: users, conversations and messages in a database, plus, optionally, your own documents so the bot can answer questions about your business.

Get those three right and you have a ChatGPT-style app. Everything else (voice, image input, plug-ins) is a later chapter.

How does a ChatGPT-style app work under the hood?

Follow one message through the system. A user types “Summarise this contract” and presses Enter. The browser sends a POST request to your own endpoint, for example /api/chat, with the conversation so far. Your server checks the session, applies a rate limit, prepends a system prompt (“You are Atlas, a careful assistant for freelance designers…”) and calls the provider's API with your secret key.

The provider does not return the whole answer at once. It streams tokens, small chunks of text, as they are generated. Your server forwards them to the browser, typically as server-sent events, and the interface paints each chunk as it arrives. That is why ChatGPT feels fast even when a long answer takes ten seconds to finish. Usability research has long put the limit for keeping a user's attention at about one second before something visibly happens; streaming gets the first words on screen well inside it. Both OpenAI and Anthropic document streaming, and libraries like the AI SDK wrap it in a few lines of TypeScript.

Two details separate a toy from a product:

• Memory is something you send, not something the model has. Models are stateless. Each request includes the recent conversation, so long chats get more expensive per message. Real apps trim or summarise old turns.
• Knowledge comes from retrieval. To answer questions about your own help docs or catalogue, store them as embeddings and fetch the most relevant passages for each question (retrieval-augmented generation, or RAG). Postgres with pgvector, which Supabase supports, is a common way to do it.

How much does it cost to run a chatbot?

Model providers bill per million tokens (MTok), separately for input (what you send, including history) and output (what the model writes). A token is roughly three-quarters of an English word. Prices below are Anthropic's published list prices as of November 2026; check the current page before you budget, and compare with OpenAI's pricing and Google's Gemini pricing.

600,000 messages is what 1,000 active users sending 20 messages a day for a month looks like. The spread is the lesson: the same app can cost a couple of hundred dollars or several thousand depending on the model behind it. Three levers matter most:

• Route by difficulty. Use a small, fast model for routine questions and a larger one only when needed.
• Cap the history. Send the last few turns plus a short summary rather than the entire conversation.
• Cache the fixed part. A long system prompt that never changes can be cached; Anthropic documents prompt caching with much cheaper cache reads.

Hosting is the smaller line item. A Next.js app on Vercel runs its API routes as functions, and a database for chat history fits comfortably in a free or entry tier while you are small.

How do you build a ChatGPT-style app step by step?

Here is the fastest honest path we know: build and publish the interface with Supacode today, then connect a real model when you are ready. Supacode writes real HTML, React or Next.js code, runs it in a live preview and saves every change as a version you can restore.

Step 1: Start from a template, or from one prompt

The quickest start is the Nova template: a React chat app with a history sidebar, Markdown answers, tool-call cards and a model picker. Copying a template uses 0 credits. Its replies are simulated with sample conversations, and the app says so on screen, which makes it a safe prototype to show people.

If you would rather start from a blank page, describe the product in the home composer. Be specific about the parts that make it feel like ChatGPT:

Build a ChatGPT-style chat app called Atlas. Left sidebar with chat history grouped by Today / Yesterday / Previous 7 days and a New chat button. A centered conversation with streaming-style replies, Markdown and code blocks with a Copy button, regenerate and thumbs up/down under each answer, and a model picker in the header. Dark and light themes. Use realistic sample conversations and simulate the replies for now.

Step 2: Shape the experience by chatting

Supacode applies each request as a focused edit and saves a new version, so you can undo anything. Ask for one change at a time:

Make replies appear word by word with a blinking cursor, add a Stop generating button while a reply is streaming, and keep the composer pinned to the bottom on phones. Don't change the sidebar.

Step 3: Give it a job

General-purpose chat is ChatGPT's home turf. A focused assistant (a contract explainer for freelancers, a recipe coach, a support bot for your product) is where a small app can win. Put the job into the sample data and copy:

Turn Atlas into Clause, an assistant that explains freelance contracts in plain English. Replace the sample chats with contract questions, add a 'Paste a clause' starter card on the empty state, and write the system prompt we'll use later into src/lib/system-prompt.ts.

Step 4: Publish and share it

Press Publish to put the app on your own your-name.supacode.app address. Anyone with the link can open it; it appears in the public gallery only if you switch that on. The publishing guide covers updates and unpublishing.

Step 5: Connect a real model

A React or HTML app runs entirely in the browser and cannot keep a secret, so the real model call needs a server. Create the production version as a Next.js project (pick Next.js instead of Auto in the composer, and paste in the design prompts from Steps 1 to 3) and ask for a server route:

Add a Next.js route handler at app/api/chat/route.ts that streams replies from the Anthropic API using the AI SDK. Read the key from process.env.ANTHROPIC_API_KEY (never send it to the browser), use the system prompt from src/lib/system-prompt.ts, send only the last 10 messages, and limit each IP to 20 messages per hour. Replace the simulated replies with this endpoint.

Supacode notices that a server route needs a server: instead of a static publish, the Publish menu offers Deploy to my Vercel, which creates a project in your own Vercel account. Add ANTHROPIC_API_KEY under that project's environment variables, deploy again, and the bot answers for real. Your key lives with you, in your account, not in Supacode.

Step 6: Add sign-in and saved chats

Connect your own Supabase project in the Backend tab and ask for accounts and history. Supacode writes the tables and row-level security policies as a migration, and nothing runs on your database until you approve it (how it works).

Add email sign-in with Supabase Auth. Store conversations and messages in Supabase with row-level security so each user can only read their own chats. Load the sidebar from the database and save every message.

How do you build a chatbot for a website?

Many people searching for a ChatGPT clone really want something smaller: a chat bubble in the corner of their site that answers customer questions. The architecture is identical (interface, server, model), just with a narrower interface and a knowledge base made of your own pages.

Add a floating chat button to the bottom-right of every page. It opens a 380px panel with a greeting, three suggested questions about our opening hours, prices and booking, and a composer. For now, answer from the FAQ content on the site with simulated replies; keep the panel keyboard accessible and closable with Esc.

Start with simulated answers drawn from your FAQ, test the experience with real visitors, then connect a model through a server route as in Step 5 and feed it your pages. If your site lives elsewhere, the widget is ordinary code you can read in the Code tab, download as a zip, or push to GitHub on paid plans; the server route still needs a host that can keep your key secret.

Can you make a chatbot for free?

You can get surprisingly far without paying anything, as long as you know where the free tiers end.

So the realistic plan is: prototype for free, show it to people, and start paying for the model once real users arrive. Supacode's pricing page lists what each plan includes; every action shows its credit cost before it runs, and if an automatic fix fails, those credits come back.

Should you use a chatbot builder, an AI app builder or code from scratch?

The middle path is also a bridge. Because Supacode writes plain code into a project you own, a developer can pick it up later without a rewrite.

What should you check before you launch?

• Prompt injection. Users will try to talk your bot out of its instructions. The OWASP Top 10 for LLM applications is the best short list of these risks; never let model output trigger actions without checks.
• Abuse and cost. Rate-limit by user and IP, cap message length and history, and alert on unusual spend.
• Honesty. Tell users they are talking to an AI, and that answers can be wrong. Add a way to report bad answers.
• Privacy. Say what you store and for how long. Don't log full conversations you don't need.
• Accessibility. Chat interfaces are easy to make keyboard-hostile; our accessibility checklist covers focus, labels and motion.