How to Build an AI Chatbot App with SwiftUI (2026)

The 7 Steps to Ship

Each step takes 4–8 hours with the Swift Kit. From scratch, double that.

1. 1

   Step 1 — Project setup

   Clone Swift Kit, run setup.sh, pick "AI Chat" preset. The CLI configures: app name, brand colors, OpenAI + Anthropic + Supabase + RevenueCat keys, surface style.

   git clone <swift-kit-repo> MyChatApp
   cd MyChatApp
   ./setup.sh

2. 2

   Step 2 — Define the chat data model

   Messages have a role, content, timestamp, and optional model metadata. Conform to Identifiable + Hashable for SwiftUI Lists.

   struct ChatMessage: Identifiable, Hashable {
     let id = UUID()
     let role: Role
     var content: String
     let timestamp: Date
   
     enum Role: String { case user, assistant, system }
   }

3. 3

   Step 3 — Wire OpenAI streaming

   Use AsyncSequence to consume server-sent events. Bind to @Observable so SwiftUI re-renders on every token.

   @Observable @MainActor
   final class ChatViewModel {
     var messages: [ChatMessage] = []
     var isStreaming = false
   
     func send(_ prompt: String) async throws {
       messages.append(.init(role: .user, content: prompt, timestamp: .now))
       var assistant = ChatMessage(role: .assistant, content: "", timestamp: .now)
       messages.append(assistant)
       isStreaming = true
       defer { isStreaming = false }
   
       for try await chunk in openAI.streamCompletion(messages: messages) {
         assistant.content += chunk
         messages[messages.count - 1] = assistant
       }
     }
   }

4. 4

   Step 4 — Render the chat UI

   Scrollable List with role-styled bubbles. Use AttributedString + .init(markdown:) for inline formatting. Auto-scroll to the latest message with scrollTo(_:anchor:).

   struct ChatView: View {
     @State private var viewModel = ChatViewModel()
     @State private var input = ""
   
     var body: some View {
       VStack {
         ScrollViewReader { proxy in
           List(viewModel.messages) { msg in
             ChatBubble(message: msg)
               .id(msg.id)
           }
           .onChange(of: viewModel.messages.last?.content) {
             if let last = viewModel.messages.last {
               withAnimation { proxy.scrollTo(last.id, anchor: .bottom) }
             }
           }
         }
         ChatComposer(text: $input) {
           Task { try await viewModel.send(input); input = "" }
         }
       }
     }
   }

5. 5

   Step 5 — Gate with paywall + rate limit

   Check the RevenueCat subscription model before allowing send. For free users, check the Supabase-stored daily quota. Show the paywall when limit hits.

   if !subscription.isPremium && await rateLimiter.exceedsDailyQuota() {
     showPaywall = true
     return
   }
   try await viewModel.send(input)

6. 6

   Step 6 — Persist message history

   Store conversations in Supabase Postgres with RLS so users only see their own threads. SwiftData (iOS 17+) handles the offline cache.

   // Supabase schema (already in Swift Kit)
   // CREATE TABLE conversations (
   //   id uuid PRIMARY KEY,
   //   user_id uuid REFERENCES auth.users(id),
   //   title text,
   //   created_at timestamptz DEFAULT now()
   // );
   // + RLS: auth.uid() = user_id

7. 7

   Step 7 — Ship to App Store

   Use the included App Store screenshot templates + description generator. Tag the app correctly (Productivity > Utilities) — NOT "AI" (saturates ranking).

   fastlane release  // or use Xcode Cloud

Frequently Asked Questions