SifraAI

Build, personalize, and embed a voice-powered AI assistant on any website

SifraAI is a deployed full-stack assistant platform that turns business context into a branded website voice experience. Site owners configure an assistant from a protected dashboard, receive a lightweight embed script, and give visitors a natural way to ask questions or navigate pages using their voice.

Launch the application · Check the API · Explore the source

---

Overview

Adding an AI assistant to a website usually requires building a chat interface, connecting an AI provider, managing user configuration, and wiring the result into every target site. SifraAI brings that workflow together in one application.

A site owner signs in with Google, describes the business, selects the assistant's tone and visual theme, adds navigation rules, and connects a Gemini API key. SifraAI persists that configuration and generates a script tag for an embeddable floating widget. The widget captures visitor speech in the browser, sends the transcript to the Express API, and speaks the resulting answer aloud. Navigation requests are resolved against the owner's configured page keywords before the backend calls Gemini.

The result is a compact but complete product flow spanning authentication, configuration, AI inference, browser speech APIs, usage controls, payments, and third-party website integration.

Live Deployment

Service	URL	Role
Web application	sifraai.onrender.com	React dashboard, assistant builder, billing UI, and hosted widget assets
Backend API	sifraai-backend.onrender.com	Authentication, persistence, assistant inference, navigation, and billing endpoints
Source repository	github.com/tusharg007/SifraAI	Client and server source code

Both hosted services are configured directly in the current client, widget, and server CORS setup.

Product Highlights

Configurable Assistant Builder

Create a distinct assistant for a business without changing widget code. The builder supports:

• assistant and business names;
• business type and contextual description;
• friendly, professional, or sales response tone;
• light, dark, glass, or neon widget themes;
• per-user Gemini API key configuration;
• custom page paths and navigation keywords;
• live assistant preview and generated embed code.

End-to-End Voice Experience

The public widget uses native browser capabilities to keep the integration lightweight:

• SpeechRecognition or webkitSpeechRecognition captures a spoken request;
• the transcript is sent to the public assistant endpoint;
• the backend returns either a navigation command or a short AI answer;
• SpeechSynthesisUtterance reads the response aloud;
• visible listening, thinking, speaking, transcript, and error states keep the visitor informed.

Context-Aware Gemini Responses

The backend builds each prompt from the saved assistant identity, business name, business type, business description, selected tone, and current visitor question. It calls Gemini's generateContent REST endpoint and requests concise, natural answers designed for quick voice playback.

Voice-Controlled Page Navigation

SifraAI resolves configured navigation intents before invoking the LLM. Commands beginning with terms such as open, go, show, navigate, or take me are matched against user-defined page keywords. A match returns a structured navigation action that the widget uses to open the requested path.

Authentication, Plans, and Billing

• Firebase Google sign-in provides the client identity flow.
• The Express backend creates or reuses the corresponding MongoDB user.
• JWT cookie middleware protects dashboard and billing endpoints.
• Free-plan requests are tracked with a stored message counter and request limit.
• Razorpay order creation and HMAC signature verification support Pro upgrades.
• Gemini status states surface active, invalid-key, and quota-exceeded outcomes.

Architecture

flowchart LR
    Owner["Site owner"] --> Dashboard["React + Vite dashboard"]
    Dashboard --> Firebase["Firebase Google Auth"]
    Dashboard --> PrivateAPI["Protected Express routes"]
    Dashboard --> RazorpayUI["Razorpay Checkout"]

    PrivateAPI --> Auth["JWT cookie middleware"]
    Auth --> MongoDB["MongoDB via Mongoose"]
    PrivateAPI --> RazorpayAPI["Razorpay API + HMAC verification"]

    Website["Owner's website"] --> Widget["Embedded assistant.js"]
    Visitor["Website visitor"] --> Widget
    Widget --> BrowserVoice["Browser speech recognition + synthesis"]
    Widget --> PublicAPI["Public assistant routes"]
    PublicAPI --> MongoDB
    PublicAPI --> Router["Keyword navigation router"]
    Router -->|"No page match"| Gemini["Gemini generateContent API"]
    Router -->|"Page match"| Widget
    Gemini --> Widget

Loading

Repository Boundaries

Area	Responsibility
Client/	React dashboard, protected routing, builder and billing screens, Firebase integration, preview UI, and public widget assets
Server/	Express routes, JWT middleware, Mongoose models, Gemini integration, Razorpay integration, and request handling
Client/public/assistant.js	Standalone widget injection, configuration loading, speech capture, assistant requests, navigation, and speech playback

Runtime Workflow

sequenceDiagram
    actor Owner as Site owner
    participant UI as React dashboard
    participant API as Express API
    participant DB as MongoDB
    participant Widget as Website widget
    participant Gemini as Gemini API

    Owner->>UI: Continue with Google
    UI->>API: POST /api/auth/google
    API->>DB: Find or create user
    API-->>UI: User profile + JWT cookie

    Owner->>UI: Configure and save assistant
    UI->>API: POST /api/user/save-assistant
    API->>DB: Persist assistant settings
    UI-->>Owner: Generate embed script

    Widget->>API: GET /api/assistant/config/:userId
    API->>DB: Load public configuration
    API-->>Widget: Theme and assistant identity

    Widget->>Widget: Capture visitor speech
    Widget->>API: POST /api/assistant/ask
    API->>DB: Load configuration and plan usage
    alt Configured navigation intent
        API-->>Widget: Return action, path, and spoken response
        Widget->>Widget: Speak and open path
    else Business question
        API->>Gemini: Generate concise contextual response
        Gemini-->>API: Response text
        API->>DB: Update usage and Gemini status
        API-->>Widget: Return AI response
        Widget->>Widget: Display and speak response
    end

Loading

Technology Stack

Layer	Technology	Use in SifraAI
Frontend	React 19, React Router 7	Dashboard pages, protected routes, configuration state, and billing flow
Build and styling	Vite 8, Tailwind CSS 4, custom CSS	Client build pipeline, application UI, and widget themes
Client communication	Axios, Fetch API	Protected dashboard requests and public widget calls
Authentication	Firebase Auth, Google provider, JWT, cookies	Google sign-in and backend session protection
Backend	Node.js ESM, Express 5	REST API and middleware composition
Persistence	MongoDB, Mongoose 9	User profiles, assistant configuration, usage, plans, and billing records
AI	Gemini generateContent REST API	Short responses grounded in configured business context
Voice	Web Speech API	Browser speech recognition and speech synthesis
Payments	Razorpay Checkout and Node SDK	Order creation, signature verification, and Pro-plan activation
Deployment	Render	Hosted frontend and backend services
Development	npm, ESLint, nodemon	Package management, static analysis, and server reloads

Repository Structure

SifraAI/
|-- Client/
|   |-- public/
|   |   |-- assistant.css       # Embeddable widget styling and themes
|   |   |-- assistant.js        # Widget runtime and browser voice flow
|   |   |-- logo.png
|   |   `-- mic.svg
|   |-- src/
|   |   |-- Components/         # Navbar, route guard, and assistant preview
|   |   |-- pages/              # Login, home, builder, and billing screens
|   |   |-- utils/firebase.js   # Firebase client configuration
|   |   |-- App.jsx             # Routes, session loading, and service URLs
|   |   `-- main.jsx
|   |-- package.json
|   `-- vite.config.js
|-- Server/
|   |-- Configs/                # Database, Gemini, Razorpay, and JWT helpers
|   |-- Controllers/            # Auth, user, assistant, and billing logic
|   |-- Middleware/isAuth.js    # JWT cookie verification
|   |-- Models/                 # User and billing Mongoose schemas
|   |-- Routes/                 # Express route definitions
|   |-- index.js                # API bootstrap, CORS, and route mounting
|   `-- package.json
`-- README.md

Getting Started

Prerequisites

• Node.js 20.19+ or 22.12+
• npm
• MongoDB database
• Firebase project with Google authentication enabled
• Gemini API key
• Razorpay credentials if testing billing

Clone and Install

git clone https://github.com/tusharg007/SifraAI.git
cd SifraAI

cd Server
npm install

cd ..\Client
npm install

Environment Configuration

The repository does not include .env.example files. Create local .env files and keep real credentials out of version control.

Server/.env

PORT=5000
MONGODB_URL=mongodb://localhost:27017/sifraai
JWT_SECRET=replace-with-a-long-random-secret
RAZORPAY_KEY_ID=your-razorpay-key-id
RAZORPAY_KEY_SECRET=your-razorpay-key-secret

Client/.env

VITE_FIREBASE_API_KEY=your-firebase-api-key
VITE_RAZORPAY_KEY_ID=your-public-razorpay-key-id

Additional Firebase identifiers are currently configured in Client/src/utils/firebase.js. The deployed frontend/backend origins are currently configured in Client/src/App.jsx, Client/public/assistant.js, and Server/index.js.

Run Locally

Start the API:

cd Server
npm run dev

Start the client in a second terminal:

cd Client
npm run dev

The current source points to the hosted Render services. A fully local end-to-end run requires changing the client API URL, widget asset/API URLs, and server CORS origin to local addresses.

Using SifraAI

1. Open the live application and continue with Google.
2. Open the builder and enter the assistant identity and business context.
3. Choose a response tone and widget theme.
4. Add a Gemini API key.
5. Add website pages with paths and comma-separated navigation keywords.
6. Save the assistant configuration.
7. Copy the generated script tag into the target website before </body>.
8. Open the widget, press the microphone, and speak a question or navigation command.

The generated integration follows this shape:

<script
  src="https://sifraai.onrender.com/assistant.js"
  data-user-id="YOUR_SIFRAAI_USER_ID"
></script>

Example navigation setup:

Page	Path	Keywords	Example voice command
Pricing	/pricing	pricing, plan, upgrade	Open pricing
Contact	/contact	contact, support, help	Go to contact
Services	/services	services, solutions, work	Show services

API Surface

Health and Authentication

Method	Endpoint	Access	Purpose
GET	/	Public	Basic backend health response
POST	/api/auth/google	Public	Create or reuse a user and set the JWT cookie
GET	/api/auth/logout	Public	Clear the authentication cookie

User and Assistant

Method	Endpoint	Access	Purpose
GET	/api/user/current-user	JWT cookie	Load the authenticated user profile
POST	/api/user/save-assistant	JWT cookie	Persist assistant settings, pages, and Gemini key
GET	/api/assistant/config/:userId	Public	Load embeddable widget configuration without exposing the Gemini key
POST	/api/assistant/ask	Public	Resolve navigation or generate an assistant response

Billing

Method	Endpoint	Access	Purpose
POST	/api/billing/order	JWT cookie	Create a Razorpay order for the Pro plan
POST	/api/billing/verify	JWT cookie	Verify the Razorpay signature and activate Pro access

AI and Voice Design

SifraAI deliberately uses a direct and understandable inference path:

1. Validate the message and user identifier.
2. Load the owner's assistant configuration and usage state.
3. Check the free-plan limit or Pro expiry.
4. Resolve configured navigation commands first.
5. Build a Gemini prompt from business context, tone, and the visitor's question.
6. Request a response under 15 words for fast voice playback.
7. Track Gemini provider status and free-plan usage.
8. Return the text to the widget for visible and spoken output.

This is a direct LLM integration. The repository does not currently implement retrieval-augmented generation, embeddings, a vector database, conversation memory, or an agent framework.

Validation and Testing

The client provides lint and production-build checks:

cd Client
npm run lint
npm run build

There is no automated test suite in the current client or server package scripts. Backend runtime validation requires configured environment variables and access to MongoDB and the relevant external providers.

Deployment Notes

The current application is deployed as two Render services:

• the Vite client is served from https://sifraai.onrender.com;
• the Express API is served from https://sifraai-backend.onrender.com;
• private API CORS permits the deployed frontend origin with credentials;
• public assistant routes permit cross-origin widget requests so the script can be embedded on other websites;
• widget JavaScript, CSS, logo, and microphone assets are served from the deployed frontend.

There is no Render blueprint, Dockerfile, or CI workflow in the repository, so deployment settings are managed outside the tracked project files.

Security and Data Handling

Implemented safeguards include:

• JWT verification on protected user and billing routes;
• ignored local .env files for client and server secrets;
• omission of geminiApiKey from the public assistant configuration query;
• Razorpay HMAC SHA-256 signature verification before plan upgrades;
• explicit private and public CORS policies for dashboard and widget traffic;
• stored usage counters and request limits for free accounts;
• provider-state tracking for invalid Gemini keys and exhausted quota.

Current hardening opportunities:

• configure the authentication cookie as httpOnly;
• encrypt user-provided Gemini keys at rest;
• add rate limiting to the public assistant endpoint;
• validate request bodies with schemas;
• move service origins and Firebase identifiers into environment configuration;
• add stronger tenant/origin controls around public assistant requests.

Current Limitations

• Browser speech-recognition availability and behavior vary by browser.
• Recognition currently uses en-US, while speech synthesis is configured as hi-IN.
• The widget sends no currentPath, although the backend supports checking it for already-open pages.
• The Pro-expiry branch contains a comparison where a plan assignment appears intended.
• There are no automated unit, integration, or end-to-end tests.
• There are no checked-in deployment or CI definitions.
• The project does not yet provide .env.example files.
• Server/node_modules/ is currently tracked in Git and should be removed from version control in a future maintenance pass.

Roadmap

• Add schema validation and rate limiting across public endpoints.
• Encrypt saved Gemini API keys and harden cookie settings.
• Make frontend, backend, CORS, Firebase, and voice-language settings environment-driven.
• Add backend tests for authentication, navigation matching, plan enforcement, and billing verification.
• Add frontend tests for protected routing, builder validation, widget behavior, and billing states.
• Add end-to-end coverage for the embedded voice-assistant workflow.
• Improve multilingual recognition and synthesis configuration.
• Add deployment manifests and automated CI checks.
• Remove tracked dependency output and add complete environment templates.

---

Built as a full-stack voice AI product with React, Express, MongoDB, Gemini, Firebase, Razorpay, and the Web Speech API.

Try SifraAI