DataTalk

An AI-powered Chrome extension that lets you chat with your data. Upload a CSV/Excel file or scrape tables from any webpage, then ask questions, get insights, and generate visualizations — all inside the browser.

---

Architecture

Chrome Extension (React + Vite)
  └─ Side Panel UI
       ├─ Upload CSV/Excel  ──► POST /ingest/upload
       ├─ Scrape page tables ──► POST /ingest/scrape
       └─ Chat              ──► POST /chat
                                     │
                             FastAPI Backend
                                     │
                               Groq (LLM)

---

Tech Stack

Layer	Technology
Extension UI	React 18, TypeScript, Vite
Charts	Recharts
Backend	FastAPI, Python 3.10+
Data	pandas, openpyxl
Scraping	BeautifulSoup4
LLM	Groq (Llama 3.3 70B via groq)

---

Development Setup

1. Backend

# From repo root
cp .env.example .env
# Edit .env and add your GROQ_API_KEY (get one at console.groq.com)

pip install -r requirements.txt
uvicorn app:app --reload --port 8000

The backend runs at http://localhost:8000. Verify with:

curl http://localhost:8000/health

2. Extension

cd extension
npm install
npm run build

Then in Chrome:

1. Go to chrome://extensions
2. Enable Developer mode (top right)
3. Click Load unpacked and select extension/dist/
4. Click the DataTalk icon (or the puzzle piece) to open the side panel

The extension's .env.development already points to http://localhost:8000.

---

Production Deployment

Render (recommended): See DEPLOY_RENDER.md for a full step-by-step guide.

Summary:

1. Deploy backend on Render
   Connect the repo, set build command pip install -r requirements.txt, start command uvicorn app:app --host 0.0.0.0 --port $PORT, and add GROQ_API_KEY in the dashboard. The repo includes a render.yaml you can use.

2. Point the extension at your API
   From repo root: ./deploy.sh https://YOUR-RENDER-URL
   This sets the production API URL and builds the extension into extension/dist/.

3. Ship the extension
   Zip the contents of extension/dist/ and share with users (Load unpacked) or publish to the Chrome Web Store.

---

API Reference

Endpoint	Method	Description
/health	GET	Health check
/ingest/upload	POST	Upload CSV/Excel (multipart)
/ingest/scrape	POST	Ingest scraped tables (JSON)
/session/{id}/datasets	GET	List datasets for a session
/session/clear	POST	Clear session or dataset
/chat	POST	Chat with dataset

---

Project Structure

DataTalk/
├── app.py                  # FastAPI backend (all endpoints)
├── requirements.txt        # Python dependencies
├── .env.example            # Env var template
├── datasets/               # Sample datasets
└── extension/
    ├── manifest.json       # Chrome Manifest V3
    ├── sidepanel.html      # Side panel entry point
    ├── vite.config.ts      # Vite build config
    ├── .env.development    # API URL for dev
    ├── .env.production     # API URL for prod
    ├── public/
    │   ├── manifest.json   # Copied for build output
    │   └── icons/          # Extension icons
    └── src/
        ├── main.tsx        # React entry
        ├── App.tsx         # Main app (tabs, session, chat, upload, scrape)
        ├── App.css         # Styles (dark theme)
        ├── api.ts          # Typed API client
        ├── background.ts   # Service worker (opens side panel on click)
        ├── content.ts      # Content script placeholder
        └── components/
            ├── Chart.tsx   # Recharts chart renderer
            ├── DataSource.tsx  # Upload/scrape/dataset selector
            └── Message.tsx # Chat message (text + chart)