# Widget Tech Stack

This system powers AI-driven document Q\&A and contextual conversation experiences across decentralized applications (dApps), using a modular backend and a React-based frontend.

### Backend Overview

Purpose: Provide an intelligent, multi-tenant backend system for Elsa-enabled dApps.

Highlights:

* RAG (Retrieval-Augmented Generation) for document Q\&A
* Contextual chat with session memory
* Role-based access control
* Vector-based document search
* Isolated environments per DApp

#### Backend Technologies

#### Runtime & Language

Node.js, TypeScript (ES2020)

#### API Framework

Express.js, CORS, Multer, REST

#### Data & Storage

MySQL (via mysql2), Custom ORM

ChromaDB (vector database for embeddings)

#### Security & Auth

JWT, bcryptjs, UUID

Role-based access (\
admin\
,\
dapp\_admin\
)

#### AI & Embeddings

OpenAI GPT-4.1 +\
text-embedding-3-small

LangChain framework for RAG

ChromaDB client for semantic search

#### External Services (Backend)

| Service    | Purpose                          |
| ---------- | -------------------------------- |
| OpenAI API | GPT-4.1 completions & embeddings |
| ChromaDB   | Vector similarity search         |
| MySQL      | Relational data storage          |

### Frontend Overview

Built as a modular React widget to integrate seamlessly into any dApp UI.

#### Frontend Technologies

#### Framework

React

> \= 16.8.0

– Core UI framework

TypeScript

5.3.3

– Type-safe development

React Hooks – State and lifecycle handling

#### Styling & UI

Inline Styles – React

CSSProperties

CSS-in-JS – Programmatic styling

PostCSS – CSS optimization pipeline

Responsive Design – Mobile-first layout

#### Web3 & Blockchain

Web3 Provider Detection (e.g., MetaMask)

EIP-1193 compliance

Multi-chain Support: Ethereum, Polygon, Base

Transaction signing, broadcasting, tracking

#### API & Communication

REST API integration

Fetch API for HTTP requests

WebSocket (planned) for real-time

CORS handling