Build a SwiftUI Chat Messaging App

To start with the SwiftUI SDK, open Xcode and create a new project.

• Create a new Swift project in Xcode 13
• Choose iOS from the list of platforms
• Choose the "App" template
• Use SwiftUIChatDemo for the project name
• Select "SwiftUI" in the Interface option

We are going to use the Swift Package Manager to fetch the SDK. If you'd like, the SDK can also be installed with CocoaPods. You can find more information on using CocoaPods on the SDK doc pages.

• Select "Add Packages…" in File menu
• Paste the URL https://github.com/getstream/stream-chat-swiftui
• In the option "Dependency Rule" choose "Branch", in the single text input next to it, enter "main"
• Choose "Add Package" and wait for the dialog to complete
• Only select "StreamChatSwiftUI" and select "Add Package" again

You now have an empty project for your chat app with the SwiftUI SDK as a dependency. Let's get started by displaying some content.

The Stream SwiftUI SDK builds on top of the low-level Stream SDK. The low-level SDK facilitates a lot of the basic functionality you will need to create a chat application. And based on that functionality the SwiftUI SDK provides convenient UI Components allowing you to quickly display a channel list.

Add an AppDelegate to our project

The first step is to have an AppDelegate available in your SwiftUI App. We will need some of its life cycle methods to correctly setup our SDK.

• Create a Swift file called AppDelegate, part of the SwiftUIChatDemo target
• Replace the entire contents of the AppDelegate.swift file with the following.

We now have a class defined that implements the UIApplicationDelegate protocol. But before we can move on, we need to let the app know about it.

To do that we need to add a couple of things in the Swift file SwiftUIChatDemoApp.app

• Open up the Swift file SwiftUIChatDemoApp.
• Add the StreamChat and StreamChatSwiftUI imports to the top of the file.
• Add the property appDelegate to the body of this class. Notice it is decorated with the property wrapper UIApplicationDelegateAdaptor.

The property wrapper UIApplicationDelegateAdaptor declares our AppDelegate to the iOS SDK. Doing so causes our AppDelegate to receive the life cycle callbacks happening within the life cycle of our app.

The end result should look like this:

Create StreamChat and ChatClient instances

Now we have our AppDelegate in place. It is time to start using the Stream SDK. To do that we need to do a couple of things:

• Add a streamChat variable to the body of the AppDelegate class. Assigning a value will happen later in our implementation.
• Add a ChatClient property to our implementation. This requires a ChatClientConfig.
• Define a ChatClientConfig and pass it as a parameter to the ChatClient.

Here is the AppDelegate class with the above additions.

The StreamChat class is the central object in our SwiftUI Chat SDK. It is available for use in other areas of our SDK through a dependency injection system. We will explain how to conveniently get a reference to the StreamChat object later in this tutorial.

We will need to create a ChatClientConfig with an apiKey and an applicationGroupIdentifier. You can grab your API Key from https://getstream.io/dashboard/

The applicationGroupIdentifier is an App Group ID and is an iOS concept that you will need to use if you want to share credentials between your app bundle and any extensions you want to add to your messaging app later on. So it is a good idea to configure your application group from the start.

More information is available here and here.

Connecting the user

The next step is to get user credentials and feed these into the SDK and connect to our backend as an authenticated user.

To keep things simple we will be working with some hardcoded credentials in this tutorial.

To get a chat going, here’s what you need to do:

• Initialise the StreamChat client.
• Add a connectUser function.
• Call the connectUser function from the body of application(_:didFinishLaunchingWithOptions:)

Let's apply all of the above to the contents of the AppDelegate.swift file. Here is the finished result:

Did you remember the fact that the chatClient variable was defined with a lazy property initialiser? And notice how calling into this property for the first time also creates the ChatClient instance.

After creating and assigning the StreamChat object we need to connect our hardcoded user. This will require a token to be submitted when connecting the user.

The chat client connects the user to our backend with some hard-coded user information and the token.

If anything is wrong, we log it to the console.

This is all you need to do to make sure our SDK is started and connected to our chat backend. But we still need to do something to present a chat UI to the end-user.

Presenting a chat user interface

As mentioned we still need to present a user interface to the user. To do that there is just one thing left to do.

• Open your chat app's starting point, the file SwiftUIChatDemoApp.swift and replace the line ContentView() with `ChatChannelListView().

The completed code will look like this

Now run your project.

Let's review

Let's look back at all the things we just did:

A lot of the features of the SwiftUI Chat SDK can be modified through theming. It offers a quick and easy way to add basic branding and style to your chat implementation. Let's get a taste of what is possible.

What if you want to do a more intricate customisation? Our SwiftUI SDK supports that too.

In this section, we will add an overlay on top of the chat message view.

To do that we need to do a couple of things:

• Open up the AppDelegate file.
• At the end of the file, add a new class: CustomViewFactory
• At the end of the file, add a new class: CustomMessageTextView
• Add a parameter to the ChatChannelListView instantiation, passing the CustomViewFactory as an argument.

Something of interest here is how we provide dependencies to our own and your custom views.

Currently these are the injectable values.

Imagine certain pieces of content in your chat messages carry special meaning. A bit like a URL, it shows a preview and clearly entices the user to interact with the content. As a simple example, we will create a Custom Attachment display for messages containing email addresses. It illustrates how you can create modifications to the display of a message based on the content of the message.

Open up the AppDelegate.swift file and find the line that creates the Utils instance, it should be right before the creation of the StreamChat instance.

This is the line you need to replace.

First create the CustomMessageResolver and pass it into the Utils constructor.

It should look like this.

Finally, to hook things up, we need to implement yet another factory method in your CustomViewFactory in the AppDelegate.swift file.

Now run the app and send a message with an email address in its contents.

There is more information on how to work with Custom Attachment Views when sending messages in our documentation.

By completing this SwiftUI chat app tutorial you in fact created a fully functional chat experience. You learned how easy it is to customise the look and feel of the experience to make everything look and feel exactly how you would want.

To get started with the integration of chat into your own app, sign up for our free chat trial, and get your own API key to build with!