Elevate AI Client App

A Flutter package for building responsive chat applications that integrate with the Elevate AI conversation API. This package works seamlessly on web, mobile, and desktop platforms.

Features

  • 🎨 Beautiful & Responsive UI - Modern chat interface that adapts to any screen size
  • 🌐 Web Support - Automatic configuration from URL parameters for web deployments
  • 📦 Easy Integration - Simple API for Flutter apps to add chat functionality
  • 💾 Persistent Configuration - Stores integration keys and customer IDs locally
  • 🎯 Customizable - Customize colors, title, and maximum width
  • 🔌 API Integration - Built-in service to call the Chatty conversation endpoint

Getting Started

Installation

Add this package to your pubspec.yaml:

dependencies:
  elevate_ai_client_app:
    path: ../elevate_ai_client_app  # or use git/pub.dev when published

Run:

flutter pub get

Environment Configuration (.env)

For web deployments, you can configure the base URL using a .env file:

  1. Copy .env.example to .env in your project root:
cp .env.example .env
  1. Edit .env and set your configuration:
BASE_URL=http://localhost:3000

  1. Make sure .env is in your .gitignore to keep credentials secure

  2. Add .env to your pubspec.yaml assets:

flutter:
  assets:
    - .env

Usage

Method 1: Using as a Flutter Package Dependency

Configure the package with your credentials before using the chat widget:

import 'package:flutter/material.dart';
import 'package:chatty_client_app/chatty_client_app.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Initialize the package (loads .env file if available)
  await ChattyClientApp.initialize();
  
  // Configure with your integration key and customer ID
  await ChattyClientApp.configure(
    integrationKey: '1234',
    partnerCustomerId: '1ee',
    // baseUrl is optional - will use .env BASE_URL if not specified
  );
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ChatWidget(
          title: 'Customer Support',
          primaryColor: Colors.blue,
          userMessageColor: Colors.blue,
          botMessageColor: Colors.grey[300],
          maxWidth: 800, // Maximum width for responsive design
        ),
      ),
    );
  }
}

Method 2: Using on Web with URL Parameters and .env

For web deployments, you can pass configuration via URL parameters. The baseUrl will be automatically fetched from .env file if not provided in URL:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Try to initialize from URL parameters
  // This also loads .env and uses BASE_URL if baseUrl not in URL
  final initialized = await ChattyClientApp.initializeFromUrl();
  
  if (!initialized) {
    // Fallback to default configuration
    await ChattyClientApp.initialize();
    await ChattyClientApp.configure(
      integrationKey: 'default_key',
      partnerCustomerId: 'default_customer',
    );
  }
  
  runApp(MyApp());
}

Supported URL Parameters:

  • integrationKey or integration_key (required)
  • partnerCustomerId, partner_customer_id, customerId, or customer_id (required)
  • baseUrl, base_url, apiUrl, or api_url (optional - falls back to .env BASE_URL)

Example URLs:

# With baseUrl in URL
https://yourapp.com/?integrationKey=1234&partnerCustomerId=1ee&baseUrl=http://localhost:3000

# Without baseUrl (uses .env BASE_URL)
https://yourapp.com/?integrationKey=1234&partnerCustomerId=1ee

Method 3: Dynamic Configuration

You can also pass configuration directly to the widget:

ChatWidget(
  integrationKey: '1234',
  partnerCustomerId: '1ee',
  baseUrl: 'http://localhost:3000',
  title: 'Chat Support',
  primaryColor: Colors.teal,
)

API Endpoint

The package calls the following endpoint:

POST http://localhost:3000/chatty/conversation
Content-Type: application/json

{
  "integrationKey": "1234",
  "partnerCustomerId": "1ee",
  "message": "user message here"
}

Customization Options

The ChatWidget accepts the following parameters:

Parameter Type Description Default
integrationKey String? Integration key (overrides stored value) null
partnerCustomerId String? Partner customer ID (overrides stored value) null
baseUrl String? API base URL http://localhost:3000
title String? Chat window title 'Chat'
primaryColor Color? Primary theme color Colors.blue
userMessageColor Color? User message bubble color Colors.blue[700]
botMessageColor Color? Bot message bubble color Colors.grey[300]
maxWidth double? Maximum width for responsive layout 800

Static Methods

Initialize

Load the .env file (call this first, especially for web):

await ChattyClientApp.initialize();

Configure

await ChattyClientApp.configure(
  integrationKey: 'your_key',
  partnerCustomerId: 'your_customer_id',
  baseUrl: 'https://api.example.com', // optional - uses .env BASE_URL if not provided
);

Initialize from URL (Web only)

Automatically loads .env and reads URL parameters:

final success = await ChattyClientApp.initializeFromUrl();

Get Configuration

final integrationKey = await ChattyClientApp.getIntegrationKey();
final customerId = await ChattyClientApp.getPartnerCustomerId();
final baseUrl = await ChattyClientApp.getBaseUrl();

Clear Configuration

await ChattyClientApp.clearConfiguration();

Example

Check out the /example folder for a complete working example.

To run the example:

cd example
flutter pub get
flutter run

Platform Support

  • ✅ Android
  • ✅ iOS
  • ✅ Web
  • ✅ macOS
  • ✅ Windows
  • ✅ Linux

License

This project is licensed under the MIT License - see the LICENSE file for details.

Libraries

chatty_client_app