AIWebApp

Dashboards from sample data or your own CSV

A sales dashboard with revenue, orders and region: 60 reproducible sample rows, a revenue-by-region bar chart and a monthly trend line.

DashboardDashboardExample — not saved until you change it

Runs on this device in under a second. Ctrl+Enter also generates.

What the planner understood

Confidence100%
  • dashboardDashboard template
  • salesDashboard template
  • customer, date, region, revenue, ordersdata fields
  • 60 sample rows60 sample rows
Feasibility, templates and prompt history

Feasibility

  • NATIVELight and dark theme
  • NATIVEResponsive layout

Start from a template

Picking a template keeps the name, colours and fields from your description.

Prompt history

Off by default. Prompts are only kept in this browser if you turn this on.

index.html
Sandboxed · network off · fits 772px

App type

Dashboard — KPI tiles, SVG charts, filters and a data table.

Pages and sections

  • index.html
    1. App (Dashboard)

Drag sections to reorder, or use the arrow buttons. Navigation links are generated for every page.

Wireframe

Data model NATIVE

FieldTypeReq.

Seed 15167: the same seed always produces the same 60 rows.

Component library (8)

Native <dialog> with focus return, Escape to close and a labelled title.

<button class="btn btn-primary" type="button" data-open-dialog="demo-dialog">Open dialog</button>
<dialog class="c-modal" id="demo-dialog" aria-labelledby="demo-dialog-title">
  <h2 id="demo-dialog-title">Delete this project?</h2>
  <p>This removes it from this device. You can export a copy first.</p>
  <div class="c-modal-actions">
    <button class="btn" type="button" data-close-dialog>Cancel</button>
    <button class="btn btn-primary" type="button" data-close-dialog value="confirm">Delete</button>
  </div>
</dialog>

Charts without a chart library

Charts are small SVG drawings generated by charts.js inside the project — about a hundred lines you can read and change. Each chart has a title and a hidden data table, so screen-reader users get the same numbers.

KPI tiles sum the first numeric field and average the next ones. Pick which fields exist in the Plan tab; the first select-type field becomes the filter and the bar-chart grouping, and a date field produces the monthly line.

Your data stays put

Sample rows come from a seeded generator, so the same seed always produces the same numbers. Import a CSV in the Plan tab to infer fields and types from your own data; the file is read in the browser and never uploaded. The exported dashboard can also import CSV files on its own.

Frequently asked questions

How big can my CSV be?

Up to 500 rows are embedded in the project (larger files are trimmed with a warning). The exported dashboard accepts files up to 2 MB.

Can it connect to a live database?

No. There is no server. Export your data to CSV and import it, or edit data.js.