Bring Your Own Model (BYOM) data visualization
Upload a CSV, ask natural language questions, get interactive charts via the Agent-to-User Interface (A2UI) pattern.

Live demo

The frontend UI is published on GitHub Pages: edvardhov.github.io/a2prism

Note: The hosted demo is the static UI only. Chart generation requires the FastAPI backend running locally (or your own deployment) with your LLM API key configured in Settings.

How it works

You ask (query + CSV) → Your model (your API key) → JSON (A2UI) → A2Prism validates → Recharts renders

1. You upload a CSV and ask a question in plain English.
2. The backend summarizes the dataset (columns, dtypes, stats, sample rows) and sends a structured prompt to your LLM via LiteLLM.
3. The model returns JSON describing an InteractiveChart config.
4. A2Prism validates the response and the frontend renders a bar, line, pie, or scatter chart.

Click the ? button in the app header for a full pipeline walkthrough.

Architecture

User → Next.js UI → FastAPI (/api/analyze) → Pandas + LiteLLM → A2UI JSON → Recharts

Layer	Stack
Frontend	Next.js (App Router), Tailwind CSS, Lucide React, Recharts
Backend	FastAPI, Pandas, LiteLLM, Uvicorn
State	React useState, API keys in browser localStorage

Quick start (Docker)

docker compose up --build

• Frontend: http://localhost:3000
• Backend: http://localhost:8000
• Health check: http://localhost:8000/health

Local development

Backend

cd backend
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
uvicorn main:app --reload --port 8000

Frontend

cd frontend
cp .env.local.example .env.local   # if present
npm install
npm run dev

Open http://localhost:3000.

BYOM configuration

1. Open Settings in the sidebar.
2. Select a provider (OpenAI, Anthropic, Groq, Google Gemini) or choose Custom for any LiteLLM-supported model string.
3. Enter your API key and model name.
4. Settings are stored in localStorage and sent only as request headers to your LLM provider via the backend.

Your API key and CSV data go directly to your configured model provider. A2Prism does not store them.

Supported model examples

Provider	Model string example
OpenAI	gpt-4o-mini
Anthropic	claude-3-5-sonnet-20241022
Groq	groq/llama-3.1-70b-versatile
Google	gemini/gemini-2.5-flash

Usage

1. Configure API key and model in Settings.
2. Upload a .csv file or pick an example dataset from the sidebar.
3. Ask a question, e.g. "Show me sales by region" or "Plot revenue over time".
4. The backend summarizes the CSV with Pandas, calls your model via LiteLLM, and returns A2UI JSON.
5. The frontend renders the chart with Recharts.

API

POST /api/analyze

Headers:

• x-api-key — your LLM provider API key
• x-model-name — LiteLLM model string

Body (multipart/form-data):

• file — CSV file
• query — natural language question

Response (A2UI JSON):

{
  "component": "InteractiveChart",
  "config": {
    "chartType": "bar",
    "title": "Sales by Region",
    "xAxisDataKey": "region",
    "yAxisDataKey": "sales",
    "description": "Total sales aggregated by region",
    "data": [
      { "region": "North", "sales": 12000 },
      { "region": "South", "sales": 9500 }
    ]
  }
}

Project structure

a2prism/
├── backend/
│   ├── main.py              # FastAPI app, /api/analyze endpoint
│   ├── requirements.txt
│   └── Dockerfile
├── frontend/
│   ├── app/                 # Next.js App Router pages
│   ├── components/          # UI + ChartRenderer
│   ├── lib/                 # API client, localStorage helpers
│   └── Dockerfile
├── docs/
│   ├── logo-light.svg       # README logo (light mode)
│   └── logo-dark.svg        # README logo (dark mode)
├── .github/workflows/       # GitHub Pages deployment
├── docker-compose.yml
├── LICENSE                  # MIT
└── package.json             # semver (0.1.0)

Versioning

This project follows Semantic Versioning. Current release: v0.1.0.

License

MIT © 2026 Edvard Hovhannisyan