Chatbot Template

This project is a React Native template for building AI chat applications on Android and iOS. It uses Google Gemini for chat functionality and Supabase for authentication and storage. The original plant identification and shopping features were removed to serve as a lightweight starting point for multiple chatbot experiences.

The anty folder is fully decoupled from the web widget located at the repository root. You can work on the mobile app by itself without pulling in any AWS or web-specific dependencies.

Features

• 💬 AI Chatbot: Chat with domain‑specific bots. Multiple bots can be configured (e.g. parking reservations, room bookings).
• 🎨 Configurable Palette: Colors are defined in config/colors.js so the palette can easily be customized.
• 📱 Cross-Platform: Works on both Android and iOS using Expo.
• 🗨️ CX Chat: Basic Amazon Connect chat screen mimicking the web widget.
• 🔐 Special Message Prompts: Requests username or password when the agent sends DFX5-ASK-USERNAME or DFX5-ASK-PASSWORD.
• 🎥 Video Escalation: Start a WebRTC video call using AWS_VIDEO_FLOW_ID with simple mute controls.
• 🔥 Tech Stack: React Native, Expo and Supabase backend.

Screenshots

Onboarding & Home

Authentication

Chat

Installation & Setup

Prerequisites

• Node.js (Latest LTS recommended)
• Expo CLI
• Android Studio & Xcode (for Android and iOS development)
• Supabase account

Clone the Repository

git clone https://github.com/yourusername/anty.git
cd anty

Install Dependencies

npm install
# or
yarn install

Setting up Supabase

1. Create a Supabase project at supabase.com
2. Navigate to Settings > API and copy the Project URL and Anon Key.
3. Set up authentication and database tables for storing user data and any domain‑specific information your bots might need.
4. Create the tables required for your project, for example:
   • users: Store user profiles
   • add other domain‑specific tables as needed

Environment Variables

Copy .env.example to .env and update the values for your environment:

SUPABASE_URL=your-supabase-url
SUPABASE_ANON_KEY=your-supabase-anon-key
GEMINI_API_KEY=your-openai-api-key # For chatbot functionality
AWS_API_GATEWAY=your-api-gateway-endpoint
AWS_CONTACT_FLOW_ID=your-contact-flow-id
AWS_INSTANCE_ID=your-connect-instance-id
AWS_VIDEO_FLOW_ID=your-video-flow-id
SPACE_FLOW_ID=space-reservation-flow-id
BUS_FLOW_ID=bus-reservation-flow-id
WIDGET_COUNTER=0
COGNITO_POOL_ID=your-cognito-identity-pool-id
COGNITO_REGION=us-east-1
STORE_SESSION_TOKEN_API_URL=https://example.com/storeSessionTokens
NEXT_PUBLIC_API_URL=https://your-api.example.com
# Valid options: DEVELOPMENT or PRODUCTION
DFX5_ENVIRONMENT=DEVELOPMENT
# Base URL for the Chime API when DFX5_ENVIRONMENT=DEVELOPMENT
DFX5_DEV_CHIME_API=https://your-dev-chime-api.example.com
# Base URL for the Chime API when DFX5_ENVIRONMENT=PRODUCTION
DFX5_PROD_CHIME_API=https://your-prod-chime-api.example.com
DFX5_LOGIN_URL=https://your-login-api.example.com/user/login
DFX5_ASSOCIATE_LOGIN_URL=https://your-login-api.example.com/associate/login
DFX5_CONNECT_INSTANCE_ARN=arn:aws:connect:us-east-1:xxxxxxxxxxxx:instance/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
CLOUD_FRONT_S3_URL=https://your-cloudfront.example.com
VIDEO_AWS_ACCESS_KEY=your-video-access-key
VIDEO_AWS_SECRET_KEY=your-video-secret-access-key
INIT_CUSTOMER_NAME=customer
[email protected]
INIT_LANGUAGE=es # initial language code (e.g., en or es)

If STORE_SESSION_TOKEN_API_URL is set, the mobile app will send session tokens to this endpoint whenever a Connect chat is started.

The app now includes a simple language selector component. The initial language is taken from the INIT_LANGUAGE variable and can be changed at runtime using the selector on the Connect chat screen.

Space & Bus Reservation Bots

This mobile template mirrors the web widget's functionality with two preconfigured chatbots: Space Booking and Bus Reservations. They are defined in app/(tabs)/home.tsx and their prompts live in app/(tabs)/message.tsx.

Both bots use the same Amazon Connect contact flow specified by AWS_CONTACT_FLOW_ID in your .env file. To add more bots or change these defaults, edit the bots array and systemPrompts object in the mentioned files.

The app now also supports the web widget's WIDGET_COUNTER variable. When set, WIDGET_COUNTER=0 uses SPACE_FLOW_ID while WIDGET_COUNTER=1 uses BUS_FLOW_ID automatically.

Running the App

npx expo start

Deployment

Building for Production

Setup EAS Build (for development build)

npm install -g eas-cli
eas login
eas build:configure

Android APK/Bundle

eas build -p android --profile preview
# For production release
eas build -p android --profile production

iOS Release

eas build -p ios --profile preview
# For production release
eas build -p ios --profile production

Deploying to S3/CloudFront

To host the web version of the app similarly to the chat widget:

1. Run expo export --platform web in the anty directory. This generates a dist folder.
2. Upload the contents of dist to your bucket:

   BUCKET_NAME=<bucket-name> node scripts/upload-web-build-to-s3.js

The bucket can then be served through a CloudFront distribution.