# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.heyelsa.ai/elsa-widget/widget-tech-stack.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.