Skip to content

A Cross-platform AI chat application built with React Native and powered by Amazon Bedrock

License

Notifications You must be signed in to change notification settings

aws-samples/swift-chat

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

5 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

δΈ­ζ–‡

SwiftChat - A Cross-platform AI Chat App

SwiftChat is a fast and responsive AI chat application developed with React Native and powered by Amazon Bedrock. With its minimalist design philosophy and robust privacy protection, it delivers real-time streaming conversations and AI image generation capabilities across Android, iOS, and macOS platforms.

Key Features:

  • Real-time streaming chat with AI
  • AI image generation with progress
  • Multimodal support (images, videos & documents)
  • Conversation history list view and management
  • Cross-platform support (Android, iOS, macOS)
  • Tablet-optimized for iPad and Android tablets
  • Fast launch and responsive performance
  • Multiple AI model support and switching

New Features For Amazon Nova πŸŽ‰πŸŽ‰πŸŽ‰

  • Stream conversations with Amazon Nova Micro, Lite and Pro
  • Understand images, documents and videos with Nova Lite and Pro
  • Record 30-second videos directly on Android and iOS for Nova analysis
  • Upload large videos (1080p/4K) beyond 8MB with auto compression
  • Support using natural language to make Nova Canvas generate images, remove backgrounds, replace backgrounds, and create images in similar styles.

Architecture

By default, we use AWS App Runner, which is commonly used to host Python FastAPI servers, offering high performance, scalability and low latency.

Alternatively, we provide the option to replace App Runner with AWS Lambda using Function URL for a more cost-effective solution, as shown in this example.

Getting Started

Prerequisites

Ensure you have access to Amazon Bedrock foundation models. SwiftChat default settings are:

  • Region: us-west-2
  • Text Model: Claude 3.5 Sonnet
  • Image Model: Stable Image Core 1.0

Follow the Amazon Bedrock User Guide to enable your models.

Step 1: Set up your API Key

  1. Sign in to your AWS console and right-click Parameter Store to open it in a new tab.

  2. Check whether you are in the supported region, then click on the Create parameter button.

  3. Fill in the parameters below, leaving other options as default:

    • Name: Enter a parameter name (e.g., "SwiftChatAPIKey", will be used as ApiKeyParam in Step 2).

    • Type: Select SecureString

    • Value: Enter any string without spaces.(this will be your API Key in Step 3)

  4. Click Create parameter.

Step 2: Deploy stack and get your API URL

  1. Click one of the following buttons to launch the CloudFormation Stack in the same region where your API Key was created.

    • App Runner

      Launch Stack

    • Lambda (Note: For AWS customer use only)

      Launch Stack

  2. Click Next, On the "Specify stack details" page, provide the following information:

    • Fill the ApiKeyParam with the parameter name you used for storing the API key (e.g., "SwiftChatAPIKey").
    • For App Runner, choose an InstanceTypeParam based on your needs.
  3. Click Next, Keep the "Configure stack options" page as default, Read the Capabilities and Check the "I acknowledge that AWS CloudFormation might create IAM resources" checkbox at the bottom.

  4. Click Next, In the "Review and create" Review your configuration and click Submit.

Wait about 3-5 minutes for the deployment to finish, then click the CloudFormation stack and go to Outputs tab, you can find the API URL which looks like: https://xxx.xxx.awsapprunner.com or https://xxx.lambda-url.xxx.on.aws

Step 3: Download the app and setup with API URL and API Key

  1. Download the App

    • Android App click to Download
    • macOS App click to Download
    • iOS (Currently we do not provide the iOS version, you can build it locally with Xcode)
  2. Launch the App, open the drawer menu, and tap Settings.

  3. Paste the API URL and API Key then select the Region.

  4. Click the top right βœ“ icon to save your configuration and start your chat.

Congratulations πŸŽ‰ Your SwiftChat App is ready to use!

Supported Region

  • US East (N. Virginia): us-east-1
  • US West (Oregon): us-west-2
  • Asia Pacific (Mumbai): ap-south-1
  • Asia Pacific (Singapore): ap-southeast-1
  • Asia Pacific (Sydney): ap-southeast-2
  • Asia Pacific (Tokyo): ap-northeast-1
  • Canada (Central): ca-central-1
  • Europe (Frankfurt): eu-central-1
  • Europe (London): eu-west-2
  • Europe (Paris): eu-west-3
  • South America (SΓ£o Paulo): sa-east-1

Detailed Features

Message Handling

  • Text copy support:
    • Copy button in message header
    • Copy button in code blocks
    • Direct Select and copy code on macOS (double click or long click on iOS)
    • Long press text to copy entire sentence (Right-click on macOS)
  • Text selection mode by tapping message title or double-clicking text
  • Message timeline view in history
  • Delete messages through long press in history
  • Click to preview for uploaded documents and images
  • Support Markdown format for both questions and answers
  • Support table display and code syntax highlighting
  • Maximum 20 images and 5 documents per conversation

Image Features

  • Support image generation with Chinese prompts(Make sure Claude 3 Haiku is enabled in your selected region)
  • View and zoom generated images
  • Long press images to save or share
  • Automatic image compression to optimize token usage

User Experience

  • Haptic feedback for Android and iOS (can be disabled in Settings)
  • Support landscape mode on Android/iOS devices
  • Double tap title bar to scroll to top
  • Click bottom arrow to view latest messages
  • View current session token usage by tapping Chat title
  • Check detailed token usage and image generation count in Settings
  • In-app upgrade notifications (Android & macOS)

What Makes SwiftChat Really "Swift"?

πŸš€ Fast Launch Speed

  • Thanks to the AOT (Ahead of Time) compilation of RN Hermes engine
  • Added lazy loading of complex components
  • App launches instantly and is immediately ready for input

🌐 Fast Request Speed

  • Speed up end-to-end API requests through image compression
  • Deploying APIs in the same region as Bedrock provides lower latency
  • Minimal response payload with zero parsing needed for direct display

πŸ“± Fast Render Speed

  • Using useMemo and custom caching to creates secondary cache for session content
  • Reduce unnecessary re-renders and speed up streaming messages display
  • All UI components are rendered as native components

πŸ“¦ Fast Storage Speed

  • By using react-native-mmkv Messages can be read, stored, and updated 10x faster than AsyncStorage
  • Optimized session content and session list storage structure to accelerates history list display

App Privacy & Security

  • Encrypted API key storage
  • Minimal permission requirements
  • Local-only data storage
  • No user behavior tracking
  • No data collection
  • Privacy-first approach

App Build and Development

First, clone this repository. All app code is located in the react-native folder. Before proceeding, execute the following command to download dependencies.

cd react-native && npm i

Build for Android

npm start && npm run android

Build for iOS

npm start && npm run ios

Build for macOS

  1. Modify as isMac = true in /src/App.tsx and execute npm start.
  2. Double click ios/SwiftChat.xcworkspace to open the project in your Xcode.
  3. Change the build destination to My Mac (Mac Catalyst) then click the β–Ά Run button.

API Reference

API Schema

First, please configure you API URL and API Key like:

export API_URL=<API URL>
export API_KEY=<API Key>
  1. /api/converse

    curl -N "${API_URL}/api/converse" \
    --header 'Content-Type: application/json' \
    --header "Authorization: Bearer ${API_KEY}" \
    --data '{
      "messages": [
        {
          "role": "user",
          "content": [
            {
              "text": "Hi"
            }
          ]
        }
      ],
      "modelId": "anthropic.claude-3-5-sonnet-20240620-v1:0",
      "region": "us-west-2"
    }'

    This API is used to implement streaming conversations, and it only returns the text and token usage for display.

    The messages under body fully complies with the messages structure specification in Amazon Bedrock converse stream API. You can also add image or document according to the specification to support multimodal conversations.

  2. /api/image

    curl "${API_URL}/api/image" \
    --header 'Content-Type: application/json' \
    --header "Authorization: Bearer ${API_KEY}" \
    --data '{
      "prompt": "Beautiful countryside",
      "modelId": "stability.stable-image-core-v1:0",
      "region": "us-west-2",
      "width": "1024",
      "height": "1024"
    }'

    This API is used to generate images and returns a base64 encoded string of the image.

  3. /api/models

    curl "${API_URL}/api/models" \
    --header 'Content-Type: application/json' \
    --header 'accept: application/json' \
    --header "Authorization: Bearer ${API_KEY}" \
    --data '{
      "region": "us-west-2"
    }'

    This API is used to get a list of all streaming-supported text models and image generation models in the specified region.

  4. /api/upgrade

    curl "${API_URL}/api/upgrade" \
    --header 'Content-Type: application/json' \
    --header 'accept: application/json' \
    --header "Authorization: Bearer ${API_KEY}"

    This API is used to get the new version of SwiftChat for Android and macOS App updates.

API Code Reference

How to upgrade?

Upgrade App

  • Android and macOS: Navigate to Settings Page, if there is a new version, you will find it at the bottom of this page, then click the app version to download and install it.
  • iOS: If a new version is released in the Release page, update your local code, rebuild and install your app by Xcode.

Note: After downloading a new version, please check the release notes to see if an API version update is required.

Upgrade API

  • For AppRunner: Click and open App Runner Services page, find and open swiftchat-api, click top right Deploy button.
  • For Lambda: Click and open Lambda Services, find and open your Lambda which start with SwiftChatLambda-xxx, click the Deploy new image button and click Save.

Security

See CONTRIBUTING for more information.

License

This library is licensed under the MIT-0 License. See the LICENSE file.