Skip to content

Latest commit

 

History

History
114 lines (81 loc) · 4.31 KB

README.md

File metadata and controls

114 lines (81 loc) · 4.31 KB
Clara

Clara: Your AI-Powered Support Assistant

An intelligent, embeddable chat widget designed to elevate your customer experience.

Live Demo

About the Project

This project is a comprehensive customer support solution featuring Clara, an AI-powered chat widget. It can be embedded on any website to provide instant assistance to users. The system is designed to handle user queries, escalate issues to a support team via Slack, and provide a seamless integration experience for developers.

Siren Platform Integration

The backend is powered by the Siren AI Agent Toolkit, which is used to orchestrate complex, multi-step workflows and perform actions like sending notifications:

  • Chat Behavior: The Siren Chat Node manages the conversation with the user. When it determines that human intervention is required, it triggers a workflow using the AI Agent Toolkit.It defines how the bot interacts with users and when to escalate to a human agent.
  • Slack Notifications: The chat workflow sends a detailed notification to a designated Slack channel, allowing the support team to see the user's query and respond.
  • Email Notifications: Siren is also used to send transactional emails. For example, when a support ticket is resolved, a webhook from Siren notifies the backend, which in turn sends an automated email to the user to inform them of the resolution.

Architecture

The project is a monorepo composed of three main parts:

  1. platform/agent: The backend service (Node.js/Express).
  2. platform/client: The frontend application/dashboard (Next.js).
  3. mock-ui: A mock user-facing website to demonstrate the chat widget.

Features

  • Embeddable Chat Widget: A self-contained chat widget that can be easily added to any website.
  • AI-Powered Support: Clara, the AI bot, provides intelligent responses to user queries.
  • Email Capture: Automatically detects and saves user email addresses provided in the chat.
  • Slack Integration: Escalates complex queries to a support team in a designated Slack channel.
  • Real-time Updates: Uses SSE to push messages from the server to the chat widget in real-time.
  • Easy Configuration: A simple dashboard for getting the widget embed code and configuring integrations.

Setup and Running the Project

Follow these steps to get the project running locally.

Prerequisites

  • Node.js and npm (or yarn/pnpm).
  • Access to Siren and an API Key.
  • An OpenAI API Key.

Environment Variables

You will need to create a .env file in the platform/agent directory with the following variables:

SIREN_API_KEY=your_siren_api_key
SIREN_API_BASE_URL=https://api.siren.io
OPENAI_API_KEY=your_openai_api_key

# Siren Workflow Configuration
CHAT_WORKFLOW_NAME="Siren Agent Chat"
CHAT_WORKFLOW_SLACK_CHANNEL="#support-alerts"
CHAT_NODE_ID="chat-user-message"

Installation

  1. Install root dependencies (if any, for monorepo tools):

    npm install

  2. Install Backend dependencies:

    cd platform/agent
npm install

  3. Install Frontend dependencies:

    cd platform/client
npm install

Running the Application

  1. Start the Backend Server:

    • Navigate to the backend directory and run the start command.
    • The server will run on http://localhost:3001.
    cd platform/agent
npm run dev

  2. Start the Frontend/Client Application:

    • Navigate to the client directory and run the start command.
    • The client dashboard will be available at http://localhost:3000.
    cd platform/client
npm run dev

  3. View the Mock UI with the Chat Widget:

    • Simply open the mock-ui/index.html file in your web browser.
    • This page demonstrates the embedded chat widget connecting to the local backend.

Using the Chat Widget

  1. Navigate to the client dashboard (http://localhost:3000/integrations).
  2. Copy the script tag provided.
  3. Paste this script tag into the HTML of any website to embed the Clara support bot.