Chatbot with SwiftUI & OpenAI API

 

AI chatbots are transforming the way users interact with mobile applications. Whether it’s customer support, personal assistance, or interactive learning, integrating a conversational AI can take your app to the next level. In this tutorial, you’ll learn how to create a SwiftUI-based chatbot powered by the OpenAI API.

✨ What You’ll Build

A fully functional chatbot UI built with SwiftUI that communicates with OpenAI’s GPT model to generate intelligent responses.

🚀 Requirements

🔧 Setting Up

  1. Create a new SwiftUI project in Xcode.
  2. Add networking support using URLSession.
  3. Store your API Key securely (avoid hardcoding).

✏️ Define the Model

struct Message: Identifiable {
    let id = UUID()
    let text: String
    let isUser: Bool
}

🌐 ChatViewModel

class ChatViewModel: ObservableObject {
    @Published var messages: [Message] = []
    private let apiKey = "YOUR_OPENAI_API_KEY" // Use secure method in production

func sendMessage(_ userInput: String) {
        let userMessage = Message(text: userInput, isUser: true)
        messages.append(userMessage)
        let systemPrompt = "You are a helpful assistant."
        let requestBody: [String: Any] = [
            "model": "gpt-3.5-turbo",
            "messages": [
                ["role": "system", "content": systemPrompt],
                ["role": "user", "content": userInput]
            ]
        ]
        guard let url = URL(string: "https://api.openai.com/v1/chat/completions"),
              let bodyData = try? JSONSerialization.data(withJSONObject: requestBody) else { return }
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.setValue("application/json", forHTTPHeaderField: "Content-Type")
        request.setValue("Bearer \(apiKey)", forHTTPHeaderField: "Authorization")
        request.httpBody = bodyData
        URLSession.shared.dataTask(with: request) { data, response, error in
            guard let data = data,
                  let json = try? JSONSerialization.jsonObject(with: data) as? [String: Any],
                  let choices = json["choices"] as? [[String: Any]],
                  let message = choices.first?["message"] as? [String: Any],
                  let content = message["content"] as? String else {
                print("Failed to decode response")
                return
            }
            DispatchQueue.main.async {
                let botMessage = Message(text: content.trimmingCharacters(in: .whitespacesAndNewlines), isUser: false)
                self.messages.append(botMessage)
            }
        }.resume()
    }
}

🎨 Build the Chat UI

struct ChatView: View {
    @StateObject private var viewModel = ChatViewModel()
    @State private var inputText = ""

var body: some View {
        VStack {
            ScrollViewReader { proxy in
                ScrollView {
                    VStack(alignment: .leading, spacing: 10) {
                        ForEach(viewModel.messages) { message in
                            HStack {
                                if message.isUser {
                                    Spacer()
                                    Text(message.text)
                                        .padding()
                                        .background(Color.blue.opacity(0.7))
                                        .foregroundColor(.white)
                                        .cornerRadius(12)
                                } else {
                                    Text(message.text)
                                        .padding()
                                        .background(Color.gray.opacity(0.3))
                                        .cornerRadius(12)
                                    Spacer()
                                }
                            }
                        }
                    }
                    .padding()
                }
            }
            HStack {
                TextField("Enter your message...", text: $inputText)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                Button(action: {
                    guard !inputText.trimmingCharacters(in: .whitespaces).isEmpty else { return }
                    viewModel.sendMessage(inputText)
                    inputText = ""
                }) {
                    Image(systemName: "paperplane.fill")
                        .foregroundColor(.blue)
                }
            }
            .padding()
        }
    }
}

🚀 Final Result

You now have a working SwiftUI chatbot that uses OpenAI’s GPT model to generate responses.

You can customize it further by:

  • Adding chat roles
  • Displaying timestamps
  • Persisting chat history
  • Supporting markdown or rich content

📊 Wrap-Up

With just a few lines of code, you can integrate cutting-edge AI into your SwiftUI app. Use this power responsibly to build delightful and meaningful user experiences.

Comments

Post a Comment

Popular posts from this blog

Using Core ML with SwiftUI: Build an AI-Powered App

Image
  Artificial Intelligence (AI) is revolutionizing mobile app experiences, and with  Core ML , Apple makes it easy to integrate machine learning into iOS applications. When combined with  SwiftUI , you can create powerful, AI-driven applications with a modern and interactive UI. In this guide, we’ll explore how to integrate  Core ML  into a SwiftUI app, process images, and display real-time AI-powered results. What is Core ML? Core ML is Apple’s machine learning framework that allows developers to integrate trained models into iOS apps for tasks like  image recognition, text analysis, and object detection . Key Benefits of Core ML: ✅ Optimized for Apple hardware (fast and efficient on-device processing) ✅ Supports popular ML models like Vision, Natural Language Processing (NLP), and Sound Analysis ✅ Works  offline  without needing an internet connection ✅ Ensures privacy by running models on-device Step 1: Get a Pre-Trained Core ML Model You can do...
Read more

CI/CD for iOS Projects with Xcode: A Complete Guide

Image
  Continuous Integration and Continuous Deployment (CI/CD) are essential for iOS developers looking to streamline their development workflow, improve code quality, and automate testing and deployment. In this guide, we’ll walk through setting up CI/CD for an iOS project using Xcode, GitHub Actions, and Fastlane. Why CI/CD for iOS Development? CI/CD automates the process of testing, building, and deploying iOS applications, ensuring: Faster feedback loops Reduced manual errors Higher code quality Efficient team collaboration Prerequisites Before setting up CI/CD, ensure you have: A macOS machine with Xcode installed A GitHub repository for your iOS project An Apple Developer Account Fastlane installed ( brew install fastlane ) A valid development certificate and provisioning profile Step 1: Setting Up GitHub Actions for CI 1.1 Creating a GitHub Actions Workflow GitHub Actions automates building and testing iOS apps. To set it up: Inside your project, navigate to  .github/workfl...
Read more

Dependency Injection in iOS with SwiftUI

Image
  A Beginner-Friendly Guide to Building Modular, Testable Apps Dependency Injection (DI) is a powerful design pattern that helps you write  more modular, testable, and maintainable code . In SwiftUI, while the framework encourages composition and simplicity, adopting DI can elevate your architecture — especially as your app grows. In this post, you’ll learn: What Dependency Injection is Why it’s useful in SwiftUI apps Different DI techniques in Swift Real-world SwiftUI examples with DI Best practices and when to use DI 🧠 What is Dependency Injection? Dependency Injection  means providing an object with its dependencies from the outside instead of creating them internally. Think of it this way: instead of a class  making  its own tools, it is  handed  the tools it needs. Without DI: class UserViewModel { private var userService = UserService () } With DI: class UserViewModel { private var userService: UserService init ( userService : U...
Read more