Generative Dashboards

AI-generated UI components with 13 component types, data binding from any source, template variables, and real-time updates.

Imagine...

You need to see how your business is performing. Revenue trends, customer acquisition, churn rates, product usage. The data's all there in your databases, but building a dashboard means hours of configuring charts, writing queries, tweaking layouts.

What if you could just... describe what you want to see?

You

"Show me monthly revenue for the last 12 months, top 10 customers by spend, and a table of recent signups with their plan and status."

Your Awareness

*Generates SQL queries, creates line chart for revenue, bar chart for customers, table for signups*

"Here's your dashboard. It updates every 5 minutes with fresh data. Want me to adjust anything?"

You

"Add a churn prediction score for each customer. Use the ML model we built last week."

Your Awareness

*Adds column to table calling Python ML model, adds color badges for risk level*

"Updated. High-risk customers are highlighted in red. The dashboard now shows churn probability for each account."

You

"Perfect. Can I share this with my team?"

Your Awareness

"Here's your shareable link: awareness.app/d/revenue-overview. Anyone on your team can view it."

This isn't magic. This is collaboration.

No drag-and-drop builders. No manual chart configuration. Just describe what you want to see and your Awareness builds it.

Core Component Types

Chart

Interactive visualizations

• Bar, Line, Pie, Area, Scatter
• Multi-series support
• Custom colors, stacked mode
• Legend, grid, tooltips

Table

Paginated data grids

• Auto-detected or custom columns
• Sortable, filterable, selectable
• Column types: string, number, date, json, link, badge
• Pagination with configurable page size

Card

KPI metric displays

• Number, currency, percentage, text formats
• Trend indicators with up/down arrows
• Custom icons and colors
• Comparison with previous values

Form

User input collection

• Text, number, select, checkbox, date inputs
• Validation with JSON Schema
• Submit actions to workflows or APIs
• Conditional field visibility

List

Vertical item lists

• Custom item templates
• Icons, badges, actions per item
• Click handlers
• Empty state messages

Graph

Network visualizations

• Node-edge force-directed layouts
• Neo4j query integration
• Node clustering and filtering
• Interactive zoom and pan

Content Components

Markdown

Rich text rendering with GitHub-flavored Markdown

{
  "type": "markdown",
  "content": "# Hello\n\nThis is **bold**"
}

Code

Syntax-highlighted code blocks

{
  "type": "code",
  "content": "SELECT * FROM users",
  "language": "sql",
  "showLineNumbers": true
}

HTML

Custom HTML templates with Tailwind CSS and variable interpolation

{
  "type": "html",
  "template": "<div class='text-xl'>{{name}}</div>",
  "variables": { "name": "John" }
}

Custom

User-defined React components registered in the component registry

Layout & Control Flow

Composite

Layout containers

• Grid (columns, gap, span)
• Flex (row/column, wrap, align, justify)
• Stack (vertical/horizontal)
• Tabs, Accordion

Conditional

Render based on data

• Comparison operators (eq, gt, lt, etc.)
• String checks (contains, startsWith, endsWith)
• Existence checks
• Then/else components

Ref

Component reuse

• Reference components by ID
• Override props per instance
• DRY principle for dashboards

Data Sources

Components can bind to multiple data source types with automatic refresh:

// Query data store
{
  "type": "query",
  "storeId": "postgres_main",
  "query": "SELECT * FROM users WHERE active = true",
  "params": [],
  "refreshInterval": 30000  // 30 seconds
}

// Static data
{
  "type": "static",
  "data": [
    { "name": "Alice", "score": 95 },
    { "name": "Bob", "score": 87 }
  ]
}

// API endpoint
{
  "type": "api",
  "endpoint": "https://api.example.com/metrics",
  "refreshInterval": 60000
}

// Multi-source (parallel fetch)
{
  "type": "multi",
  "sources": {
    "users": { "type": "query", "storeId": "postgres", "query": "SELECT * FROM users" },
    "stats": { "type": "api", "endpoint": "/api/stats" }
  }
}

// Join (combine sources)
{
  "type": "join",
  "join": {
    "left": { "type": "query", "storeId": "postgres", "query": "SELECT * FROM orders" },
    "right": { "type": "query", "storeId": "postgres", "query": "SELECT * FROM users" },
    "on": { "leftKey": "userId", "rightKey": "id" },
    "type": "inner"
  }
}

// Transform (apply JS expression)
{
  "type": "query",
  "storeId": "postgres",
  "query": "SELECT * FROM sales",
  "transform": "data.map(d => ({ ...d, total: d.quantity * d.price }))"
}

// Aggregate (group by + metrics)
{
  "type": "query",
  "storeId": "postgres",
  "query": "SELECT * FROM transactions",
  "aggregate": {
    "groupBy": ["category"],
    "metrics": [
      { "field": "amount", "function": "sum", "as": "total" },
      { "field": "id", "function": "count", "as": "count" }
    ]
  }
}

Template Variables

Use {{field.path}} to access data fields in component definitions:

// Chart example
{
  "type": "chart",
  "chartType": "line",
  "xAxis": "date",
  "yAxis": ["revenue", "profit"],
  "title": "Revenue vs Profit"
}
// Data: [{ date: "2024-01", revenue: 1000, profit: 200 }, ...]

// Card with trend
{
  "type": "card",
  "valueField": "total",
  "format": "currency",
  "currency": "USD",
  "trend": {
    "field": "total",
    "compareField": "lastMonth",
    "goodDirection": "up"
  }
}

// Table with custom columns
{
  "type": "table",
  "columns": [
    { "field": "name", "header": "Name", "sortable": true },
    { "field": "email", "header": "Email", "type": "link" },
    { "field": "status", "header": "Status", "type": "badge" }
  ]
}

// HTML template
{
  "type": "html",
  "template": "<div class='flex gap-4'><div class='font-bold'>{{name}}</div><div class='text-neutral-600'>{{email}}</div></div>"
}

Example: Sales Dashboard

{
  "name": "Sales Dashboard",
  "description": "Real-time sales metrics and trends",
  "components": [
    {
      "id": "total_revenue",
      "type": "card",
      "title": "Total Revenue",
      "valueField": "revenue",
      "format": "currency",
      "currency": "USD",
      "icon": "💰",
      "dataSource": {
        "type": "query",
        "storeId": "postgres_main",
        "query": "SELECT SUM(amount) as revenue FROM sales WHERE date >= CURRENT_DATE - INTERVAL '30 days'",
        "refreshInterval": 60000
      }
    },
    {
      "id": "revenue_chart",
      "type": "chart",
      "title": "Revenue by Day",
      "chartType": "line",
      "xAxis": "date",
      "yAxis": ["revenue"],
      "showGrid": true,
      "dataSource": {
        "type": "query",
        "storeId": "postgres_main",
        "query": "SELECT date, SUM(amount) as revenue FROM sales WHERE date >= CURRENT_DATE - INTERVAL '30 days' GROUP BY date ORDER BY date"
      }
    },
    {
      "id": "top_products",
      "type": "table",
      "title": "Top Products",
      "columns": [
        { "field": "product", "header": "Product", "sortable": true },
        { "field": "quantity", "header": "Qty Sold", "type": "number" },
        { "field": "revenue", "header": "Revenue", "type": "number" }
      ],
      "dataSource": {
        "type": "query",
        "storeId": "postgres_main",
        "query": "SELECT product, COUNT(*) as quantity, SUM(amount) as revenue FROM sales WHERE date >= CURRENT_DATE - INTERVAL '30 days' GROUP BY product ORDER BY revenue DESC LIMIT 10"
      }
    }
  ],
  "layout": {
    "type": "grid",
    "columns": 3,
    "gap": "4",
    "placements": [
      { "componentId": "total_revenue", "col": 1, "row": 1, "colSpan": 1, "rowSpan": 1 },
      { "componentId": "revenue_chart", "col": 1, "row": 2, "colSpan": 3, "rowSpan": 1 },
      { "componentId": "top_products", "col": 1, "row": 3, "colSpan": 3, "rowSpan": 1 }
    ]
  }
}

Export & Sharing

•PDF Export - Generate PDF reports of dashboards with embedded charts
•PNG Screenshots - Export individual components or entire dashboards as images
•Public Links - Share read-only dashboard URLs with expiration dates
•Embedded iframes - Embed dashboards in external websites with CORS support

Available Tools

list_components

List all component definitions

create_component

Create component from JSON definition

create_dashboard

Create dashboard with layout

add_placement

Add component to dashboard grid

update_data_source

Change component data binding

export_dashboard

Export to PDF/PNG

Generative Dashboards

Imagine...

Core Component Types

Chart

Table

Card

Form

List

Graph

Content Components

Markdown

Code

HTML

Custom

Layout & Control Flow

Composite

Conditional

Ref

Data Sources

Template Variables

Example: Sales Dashboard

Export & Sharing

Available Tools

Data Stores

Workflows

Awareness Spaces

Your Awareness

Awareness Spaces

Capabilities

Security & Privacy

Framework

Philosophy

Research

FAQ