Skip to main content

​
What you’ll build

An AI writing assistant where users chat with GPT to draft blog posts, edit copy, and brainstorm ideas. The app includes conversation history so users can pick up where they left off, user accounts with authentication, and a Pro subscription tier that unlocks unlimited messaging.

​
Tech stack

IntegrationWhat it does
OpenAIGPT models for chat completions and content generation
SupabaseUser authentication, conversation storage, and usage tracking
StripePro subscription billing ($12/month)
ResendWelcome emails and daily usage alerts
NetlifyOne-click deployment to production
Next.js + TypeScriptApp framework with server-side API routes

​
Architecture overview

Here is how data flows through the app:
  1. Sign in. The user creates an account or logs in through Supabase Auth.
  2. Send a message. The user types a prompt in the chat interface. The message is sent to an API route that calls the OpenAI Chat Completions endpoint.
  3. Stream the response. GPT’s response is streamed back to the browser in real time, token by token.
  4. Save the conversation. Each message pair (user + assistant) is saved to a Supabase messages table, grouped by conversation.
  5. Track usage. A counter in Supabase tracks how many messages the user has sent today.
  6. Enforce limits. Free users are capped at 20 messages per day. When they hit the limit, the app shows an upgrade prompt.
  7. Upgrade. Clicking “Upgrade to Pro” redirects to a Stripe Checkout session for the $12/month plan.
  8. Send emails. Resend delivers a welcome email on signup and a daily usage summary for Pro users.

​
How long does it take?

PhaseWhat you’re buildingEstimated time
SetupProject, Supabase, OpenAI5-10 minutes
ChatInterface, streaming, history10-15 minutes
Business logicUsage limits, Pro plan5-10 minutes
CommunicationEmail notifications5 minutes
LaunchDeploy, test, go live5 minutes
TotalComplete AI app30-45 minutes

​
Step-by-step build

1

Start the project

Open rocket.new and describe the app you want to build. Be specific about the core features so Rocket generates a solid foundation.Prompt:
Build an AI writing assistant called "DraftAI". Users can sign in, start
a new chat conversation with GPT, and get help drafting blog posts, editing
copy, and brainstorming content ideas. The chat should feel fast and modern
with a clean, minimal UI. Use Next.js with TypeScript and Tailwind CSS.
Include a sidebar with a list of past conversations and a "New Chat" button.
A detailed initial prompt saves you from reworking the layout later. Include the app name, core features, and UI preferences up front.
2

Connect Supabase for auth and data

Connect Supabase to handle user accounts and store all conversation data. Rocket will create the database tables and auth flow automatically.Prompt:
Connect Supabase. Set up email/password authentication with a sign-up page,
login page, and protected routes. Create these database tables:

- conversations: id, user_id, title, created_at, updated_at
- messages: id, conversation_id, role (user or assistant), content, created_at
- usage: id, user_id, date, message_count

Add row-level security so users can only access their own data.
After this step, you should be able to create an account, log in, and see the chat interface. Verify that the Supabase integration shows a green dot in your project settings.
3

Connect OpenAI

Add your OpenAI API key so the app can send messages to GPT and receive completions.Prompt:
Connect OpenAI. Use the GPT-4o model for all chat completions. Add a system
prompt that says: "You are DraftAI, a helpful writing assistant. You help
users draft blog posts, edit copy, brainstorm ideas, and improve their writing.
Be concise, clear, and encouraging. When asked to write content, match the
tone the user requests."
Your OpenAI API key is billed separately by OpenAI based on token usage. Monitor your spending in the OpenAI usage dashboard.
4

Build the chat interface with streaming

Make the chat feel responsive by streaming GPT’s responses token by token instead of waiting for the full completion.Prompt:
Update the chat so that GPT responses stream in real time, word by word.
Use the OpenAI streaming API. Show a typing indicator while the response
is loading. Each message should display the sender (user or AI) with a
subtle avatar. Add a text input at the bottom with a send button and
support Enter to send. Auto-scroll to the latest message.
Streaming makes the app feel much faster because users see the first words immediately instead of waiting several seconds for a complete response.
5

Add conversation history

Let users create multiple conversations, switch between them, and pick up past chats where they left off.Prompt:
Add conversation history. The sidebar should list all past conversations
for the logged-in user, sorted by most recent. Clicking a conversation
loads its full message history. Add a "New Chat" button at the top of
the sidebar that creates a fresh conversation. Auto-generate a short
title for each conversation based on the first user message. Add a
delete button on each conversation with a confirmation dialog.
6

Implement usage limits for the free tier

Add a daily message cap for free users to control costs and incentivize upgrades.Prompt:
Add usage tracking. Free users can send up to 20 messages per day.
Track the count in the usage table in Supabase, resetting at midnight UTC.
Show a small counter in the chat header like "5 of 20 messages used today".
When a free user hits 20 messages, disable the input and show a friendly
banner that says "You've reached your daily limit. Upgrade to Pro for
unlimited messages." with an upgrade button.
Pick a daily limit that gives users enough value to see the product’s potential while still creating a reason to upgrade. 20 messages is a good starting point.
7

Connect Stripe for the Pro plan

Add a paid tier that removes usage limits. Stripe handles the checkout, billing, and subscription management.Prompt:
Connect Stripe. Create a Pro plan at $12/month. Add a pricing section
accessible from the sidebar and from the upgrade banner. The pricing
page should show Free vs Pro with a feature comparison:

Free: 20 messages/day, basic writing assistance, 5 saved conversations
Pro: Unlimited messages, priority responses, unlimited saved conversations,
export conversations as Markdown

Use Stripe Checkout for payment. After successful payment, update the user's
subscription status in Supabase and immediately unlock Pro features.
Handle subscription cancellation and show billing status in account settings.
Start with Stripe Test mode keys during development. Use test card number 4242 4242 4242 4242 to simulate payments. Switch to Live keys only when you are ready to accept real payments.
8

Add email notifications with Resend

Send a welcome email when users sign up and notify them about usage milestones.Prompt:
Connect Resend. Send these emails:
1. Welcome email when a new user signs up, with a brief intro to DraftAI
   and tips for getting started.
2. Upgrade confirmation email when a user subscribes to Pro, with a
   thank-you message and a summary of their new features.
3. Usage alert email when a free user hits 15 of their 20 daily messages,
   nudging them toward the Pro plan.

Use clean, minimal email templates that match the app's branding.
9

Deploy to Netlify and test end-to-end

Push the app to production and run through the full user journey.Prompt:
Connect Netlify and deploy the app. Make sure all environment variables
are configured for production: Supabase URL and anon key, OpenAI API key,
Stripe publishable and secret keys, Resend API key. Set up the Stripe
webhook endpoint for the production URL.
Test checklist:
  • Sign up with a new email and verify the welcome email arrives
  • Start a conversation and confirm GPT responses stream correctly
  • Create multiple conversations and switch between them
  • Send 20 messages to trigger the usage limit banner
  • Complete a Stripe test checkout and verify Pro features unlock
  • Cancel the subscription and confirm the user reverts to the free tier
10

Go live

Once testing is complete, switch to production credentials and launch.Prompt:
Switch Stripe to Live mode keys. Double-check that Supabase row-level
security is enabled on all tables. Verify that the OpenAI system prompt
does not leak sensitive information. Update the Netlify deployment with
the production environment variables. Add a custom domain if I have one.
Your AI writing assistant is live. Share the URL, collect feedback, and iterate.

​
Customization ideas

Let users choose between OpenAI GPT-4o, Anthropic Claude, and Google Gemini. Add a model selector dropdown in the chat header so users can switch models mid-conversation.Prompt:
Add a model selector dropdown in the chat header with three options:
GPT-4o (OpenAI), Claude 3.5 Sonnet (Anthropic), and Gemini Pro (Google).
Connect all three integrations. Default to GPT-4o. Show the active model
name next to each AI response so users know which model generated it.
Let users upload PDFs, text files, or Markdown documents and ask the AI to summarize, edit, or rewrite the content.Prompt:
Add a file upload button next to the chat input. Support PDF, TXT, and MD files
up to 5MB. When a user uploads a file, extract the text content, include it in
the conversation context, and show a preview card in the chat. The user can then
ask questions about the document or request edits.
Enable shared workspaces where team members can collaborate on conversations, share templates, and manage a shared Pro subscription.Prompt:
Add team workspaces. A user can create a team, invite members by email, and
share conversations within the team. Add a workspace switcher in the sidebar
for personal vs team spaces. Team conversations are visible to all members.
The team admin manages the Stripe subscription for the whole team.
Let users create and save custom personas or writing styles that modify how the AI responds.Prompt:
Add a "Personas" section in settings where users can create custom system prompts.
Each persona has a name and a system prompt, for example "Blog Editor" with the
instruction "Edit the user's text for clarity, grammar, and flow. Return the
edited version with tracked changes in Markdown." Let users select a persona
before starting a new conversation.
Let users speak their prompts instead of typing, using the browser’s built-in speech recognition API.Prompt:
Add a microphone button next to the chat input that starts voice recording.
Use the Web Speech API for speech-to-text. Show a pulsing animation while
recording. When the user stops speaking, convert the audio to text and
populate the chat input. The user can review and edit before sending.

​
Troubleshooting

If messages appear all at once instead of streaming token by token, the API route may not be configured for streaming. Ask Rocket to fix it:
The chat responses are not streaming. Update the OpenAI API call to use
streaming mode and pipe the response chunks to the client in real time
using a ReadableStream.
Also check that your OpenAI API key is valid and has sufficient credits.
If you see errors about exceeding the maximum context length, your conversation history is too long for the model’s token window. Ask Rocket to add context management:
Add conversation context management. Only send the last 20 messages as
context to OpenAI instead of the full conversation history. Add a summary
of older messages at the beginning of the context window so the AI still
has relevant background.
If users see “429 Too Many Requests” errors, your OpenAI account is hitting its rate limit. This is common with new accounts or heavy traffic.
Add rate limit handling for OpenAI API calls. If a 429 error is returned,
show a friendly message to the user like "The AI is busy right now. Please
try again in a few seconds." Add automatic retry with exponential backoff
for up to 3 attempts.
You can also request a rate limit increase from OpenAI at platform.openai.com/account/limits.
If messages disappear when you refresh or switch conversations, the Supabase insert may be failing. Common causes include missing row-level security policies or incorrect table schemas.
Debug the conversation saving issue. Check that the messages table has the
correct columns: id, conversation_id, role, content, created_at. Verify
that row-level security policies allow authenticated users to insert and
select their own messages. Add error handling that shows a toast notification
if a message fails to save.
You can also check the Supabase dashboard logs for failed queries at supabase.com/dashboard.

​
What’s next?

Build a SaaS app

Follow the full SaaS recipe with auth, billing, dashboards, and deployment.

OpenAI integration

Deep dive into connecting OpenAI, prompt patterns, and model selection.

Compare AI models

GPT vs Claude vs Gemini: see strengths, pricing, and recommendations for your use case.

Supabase integration

Learn more about authentication, database design, and row-level security with Supabase.