Building simple iOS client for using chatGPT in 5 minutes

source: Unsplash deepmind

We’re all heard about chat GPT and how capable it is in a lot of different tasks. Might it be handy to keep it as a dedicated app on your iPhone? But instead of paying for a 3d party app, let’s build our own!

Requirements: XCode(link to download from AppStore), openAI API key

Let’s build it!

1. Let’s get an openAI API Key first.

Open homepage, create account and open your profile.

source: openAI website

Then navigate to API keys section and click Create new secret Key

Save it somewhere safe, we gonna need it soon.

2. Open Xcode and create new project. Then navigate to File — Add Package

We will use https://github.com/alfianlosari/ChatGPTSwift package to make things clear and easy.

3. Finally, let’s write some code!

First let’s import openAI package by adding

import ChatGPTSwift

Then create a constant for your API

 let api = ChatGPTAPI(apiKey: "paste_your_key_here")

and add placeholder to typing out prompts and for result output

 @State var prompt: String = ""
 @State var response: [String] = []

Next, let’s create simple layout. All we need for this simple app is 2 button (submit prompt, clear results), input field, output field. Let’s add it to the canvas and put it in a vertical scrollview(as out results might contain lots of words).

  ScrollView {
            //input field
            TextField(text: $prompt) {
                Text("Type your request")
                    .foregroundColor(.white)
            }
            .frame(width: 300, height: 50)
            .background(.gray)
            .cornerRadius(10)
            .foregroundColor(.white)
        
            
            //submit button
            Button{
              //here goes submit prompt action
            } label: {
                Text("Submit prompt")
            }
            .frame(width: 150, height: 50)
            .background(.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
           
            
            //clear button
            Button{
                responseFull.removeAll()
                text = ""
            } label: {
                Text("Clear")
            }
            .frame(width: 150, height: 50)
            .background(.red)
            .foregroundColor(.white)
            .cornerRadius(10)
           
            
            //result field
            Text(response.joined())
                .textSelection(.enabled)   
        }

To generate a prompt we will be calling a function sendMessageStream. This function might throw an error so let’s put it in a Do-Catch block to catch possible errors.

There are two ways for using this extension:

1. First one to wait until the whole answer is generated and then display it.
2. More “native” way — to get result dynamically appear while being generated.

I prefer second one as it how chatGPT works. To show dynamically updating response I used array of strings, which updets by appending word by word.

Task {
     do {
         let stream = try await api.sendMessageStream(text: text)
         for try await line in stream {
         result.append(line)
         print(line)
           }
              } catch {
              print(error.localizedDescription)
              }
          }

Let’s add clear action for our Clear Button by adding:

 result.removeAll()
 prompt = ""

Finally — let’s test it in Xcode simulator on your iPhone.

The whole code is available below.

import SwiftUI
import ChatGPTSwift



struct ContentView: View {
    let api = ChatGPTAPI(apiKey: "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")
    
    
    @State var prompt: String = ""
    @State var response: [String] = []
    
    var body: some View {
        ScrollView {
            //Input field
            TextField(text: $prompt) {
                Text("Type your request")
                    .foregroundColor(.white)
            }
            .frame(width: 300, height: 50)
            .background(.gray)
            .cornerRadius(10)
            .foregroundColor(.white)
        
            
            //submit button
            Button{
                Task {
                    do {
                        let stream = try await api.sendMessageStream(text: prompt)
                        for try await line in stream {
                            response.append(line)
                            print(line)
                        }
                    } catch {
                        print(error.localizedDescription)
                    }
                }
            } label: {
                Text("Submit prompt")
            }
            .frame(width: 150, height: 50)
            .background(.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
            
            //Clear button
            Button{
                response.removeAll()
                prompt = ""
            } label: {
                Text("Clear")
            }
            .frame(width: 150, height: 50)
            .background(.red)
            .foregroundColor(.white)
            .cornerRadius(10)
            
            //output field
            Text(response.joined())
                .textSelection(.enabled)
        }
        .padding()
    }
}

You can also download the whole project from github.

That’s it! See you in the next articles!

Follow me on Twitter & check out my Apps.