# Getting Started
The SwiftUI SDK is built on top of the `StreamChat` framework, and it's a SwiftUI alternative to the `StreamChatUI` SDK. It's made entirely in SwiftUI, using declarative patterns that will be familiar to developers working with SwiftUI.
This section provides a high-level overview of the SwiftUI components library. It is a great starting point for discovering how to use Stream's SwiftUI components in your app. For a complete step-by-step guide, check out [iOS Chat tutorial](https://getstream.io/tutorials/ios-chat/).
Before starting this guide, make sure you have installed `StreamChatSwiftUI` as explained in the [Installation](/chat/docs/sdk/ios/basics/integration/) section.
## Setup
The SwiftUI SDK provides a context provider object that allows simple access to functionalities exposed by the SDK, such as branding, presentation logic, icons and the low-level `ChatClient`. The first step you would need to start using the SDK is to create the context provider object, called `StreamChat`.
```swift
let apiKeyString = "your_api_key_string"
let config = ChatClientConfig(apiKey: .init(apiKeyString))
let chatClient = ChatClient(config: config)
let streamChat = StreamChat(chatClient: chatClient)
```
It would be best to do this setup when the app starts, for example, in the `AppDelegate`'s `didFinishLaunchingWithOptions` method. Also, be sure to keep a strong reference to the created `StreamChat` instance, for example, as a variable in the `AppDelegate`. This is the minimal setup that is required for the context provider object.
Trying to show a view from the SwiftUI chat SDK, without setting up the `StreamChat` instance, would result in a crash (`fatalError`), to help spot the missing step.
Therefore, it's important that after you create the `chatClient`, to initialize the `StreamChat` context provider object:
```swift
let streamChat = StreamChat(chatClient: chatClient)
```
## Connect User
## Disconnect & Logout
## Create a Channel
## Show the Channel List
Now that we have a channel, we can show it in the Channel List.
Here is an example of how to present the Channel List in SwiftUI:
```swift
struct ContentView: View {
@Injected(\.chatClient) var chatClient
var body: some View {
ChatChannelListView(
channelListController: channelListController
)
}
}
let streamChat = StreamChat(chatClient: chatClient, appearance: appearance)
```
In this way, you can change all the colors used in the SDK. For a complete reference, please check our source code [here](https://github.com/GetStream/stream-chat-swiftui/blob/develop/Sources/StreamChatSwiftUI/ColorPalette.swift).
### Changing Images
All of the images used in the SDK can be replaced with your custom ones. To customize the images, create a new instance of the `Images` class and update the images you want to change. For example, if we're going to change the love reaction, we need to override the corresponding image property.
```swift
let images = Images()
images.reactionLoveBig = UIImage(systemName: "heart.fill")!
let appearance = Appearance(colors: colors, images: images)
let streamChat = StreamChat(chatClient: chatClient, appearance: appearance)
```
The full reference of images can be found [here](https://github.com/GetStream/stream-chat-swiftui/blob/develop/Sources/StreamChatSwiftUI/Images.swift).
### Changing Fonts
You can provide your font to match the style of the rest of your app. In the SDK, the default system font is used, with dynamic type support. To keep this support with your custom fonts, please follow Apple's guidelines about scaling fonts [automatically](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically).
The fonts used in the SDK can be customized via the Fonts struct, which is part of the `Appearance` class. So, for example, if we don't want to use the bold footnote font, we can easily override it with our non-bold version.
```swift
var fonts = Fonts()
fonts.footnoteBold = Font.footnote
let appearance = Appearance(colors: colors, fonts: fonts)
let streamChat = StreamChat(chatClient: chatClient, appearance: appearance)
```
Similarly, you can create your own font and replace the corresponding property. The full reference of fonts can be found [here](https://github.com/GetStream/stream-chat-swiftui/blob/develop/Sources/StreamChatSwiftUI/Fonts.swift).
### Changing Presentation Logic
In some cases, you might want to change parts of the way the data is displayed in our UI components. For example, you want to change the date formatting, the naming logic of the channels, or use your CDN for storing the images. For cases like this, you should use the `Utils` class, which is part of the `StreamChat` object. For example, if we want to change the way the channel names are displayed in the channel list component, we need to do the following:
```swift
let channelNamer: ChatChannelNamer = { channel, currentUserId in
"This is our custom name: \(channel.name ?? "no name")"
}
let utils = Utils(channelNamer: channelNamer)
let streamChat = StreamChat(chatClient: chatClient, appearance: appearance, utils: utils)
```
### Accessing Chat Context Functionalities Through Injectable Variables
If you build your own view components and you want to use the chat context providing options, you can do so in a way that's very similar to SwiftUI's environment. You need to define the corresponding `keypath` of the functionality you need anywhere in your code.
```swift
@Injected(\.chatClient) var chatClient
@Injected(\.fonts) var fonts
@Injected(\.colors) var colors
@Injected(\.images) var images
@Injected(\.utils) var utils
```
You can find more details about the dependency injection approach we are using [here](https://www.avanderlee.com/swift/dependency-injection/).
### Connect User
The next step is to connect the `ChatClient` with a user. In order to connect, the chat client needs an authorization token.
In case the **token does not expire**, the connection step can look as follows:
```swift
// You can generate the token for this user from /chat/docs/ios-swift/tokens_and_authentication/
// make sure to use the `leia_organa` as user id and the correct API Key Secret.
let nonExpiringToken: Token = "<# User Token Here #>"
// Create the user info to connect with
let userInfo = UserInfo(
id: "leia_organa",
name: "Leia Organa",
imageURL: URL(string: "https://cutt.ly/SmeFRfC")
)
// Connect the client with the static token
chatClient.connectUser(userInfo: userInfo, token: nonExpiringToken) { error in
/* handle the connection error */
}
```
The code snippet above will also create the `ChatChannelListController` with the specified query. The `ChannelListQuery` allows us to define the channels to fetch and their order. In this case, the query will load all the channels the user is a member of.
Read more about channel list query and low-level channel list controller [here](/chat/docs/sdk/ios/client/controllers/channels/).
You can load test data for your application using the test data generator [here](https://generator.getstream.io/).
---
This page was last updated at 2026-03-06T17:05:03.491Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/ios/swiftui/getting-started/](https://getstream.io/chat/docs/sdk/ios/swiftui/getting-started/).