Build Athena User Interfaces and Dashboards

Create a User Interface asset for a dashboard, form, or other browser-based interface.

Overview
Step-by-Step Guide
Developer Resources

Athena User Interfaces enable you to create interactive, data-driven applications and dashboards directly from your spreadsheet data. Transform static data into dynamic, professional interfaces that your team can interact with in real-time.Build dashboards and forms that read from your selected data sources. Specify which data the interface uses and when it should refresh.

Generated financial dashboard with revenue bars beside its code

Key Features

Convert an HTML file

Open an HTML file in Spaces.
Select Convert to user interface in the file toolbar.
Open the new User Interface asset to edit it.

The conversion creates a separate asset from the HTML content. The action appears when your deployment supports conversion and you can create User Interface assets.

Custom App Builder

Create sophisticated applications and dashboards using Athena’s intuitive Custom App Builder. Transform your data into interactive interfaces with professional design components.

Data Integration

Connect the interface to the spreadsheet or database data it needs. Support for various formats including CSV, XLSX, and live data connections.

Real-Time Synchronization

Enable bidirectional data flow between your user interfaces and underlying data sources. Form submissions automatically update both the interface display and source spreadsheets.

Enterprise-Grade Components

Build with modern, responsive design components that scale with your business requirements. Includes customizable themes, security features, and compliance standards.

Interactive Dashboards

Create dynamic dashboards with filtering, sorting, and real-time data visualization capabilities. Perfect for monitoring, reporting, and data analysis workflows.

Agent Operating Procedures (AOPs) Integration

Trigger pre-configured AI workflows directly from your user interfaces. Add buttons or automated triggers that execute AOPs, enabling users to run complex analysis, generate reports, or perform multi-step operations without leaving your custom application.

Athena Sheets Data Connectivity

Use the Sheets APIs to read spreadsheet data or submit new rows from an interface. Use the Get Table API to display spreadsheet data in your interfaces and the Insert Table Row API to enable form submissions that automatically update your sheets, creating a complete data management solution.

Version Control and History

Track changes to your user interfaces over time. Access previous versions, review modifications, and restore earlier configurations if needed. Version control ensures you can experiment with interface designs while maintaining the ability to revert to stable versions.

Learn how to create user interfaces from your spreadsheet data and enable form submissions that update both the dashboard and underlying sheets.

Create User Interface
Connect Sheets Data
Form Submissions

Build an interactive dashboard or application from your spreadsheet data using Athena’s Custom App Builder.

Start with Athena Assist

In the chat UI, select Athena Assist and make sure the User Interface Toolkit is selected from the available tools.

Chat toolkit selector with User Interface selected

Describe Your Interface

Describe your desired interface in natural language in the chat. For example: “Create a financial dashboard showing quarterly revenue, expenses, and profit margins with interactive charts and filters.”

Interface creation prompt with the User Interface toolkit selected

Submit Your Request

Hit enter to submit your natural language description. Athena will process your request and begin generating the user interface based on your specifications.

Athena response generating code for a user interface

Review Generated Interface

Athena will create your interface and display it for review. You can see the generated components, layout, and functionality based on your description.

Test and Refine

Test the generated interface and provide additional instructions if you need modifications. You can ask Athena to adjust layouts, add features, or modify styling.

Learn how to properly connect and structure your spreadsheet data for optimal user interface creation.

Add Data to Athena Sheet

First, add your data to an Athena Sheet. Ensure your data is properly formatted in tabular structure with clear column headers and consistent data types.

Data Requirements

• Clear column headers in first row
• Consistent data types per column
• No merged cells or complex formatting
• Complete data without gaps

Spreadsheet with tabular source data for a dashboard

Use Get Table API

Prompt: Use the data from the given sheet and build a dashboard using the data. Use the API given below.Use the Get Table API to retrieve data from your Athena Sheet for use in your user interface.POST /api/v0/tools/sheets/table/get

curl -X POST https://api.athenaintel.com/api/v0/tools/sheets/table/get \
  -H "X-API-KEY: <apiKey>" \
  -H "Content-Type: application/json" \
  -d '{
    "asset_id": "string",
    "table_name": "string"
  }'

{
  "asset_id": "string",
  "columns": [
    {}
  ],
  "message": "string",
  "rows": [
    {}
  ],
  "success": true
}

Try it

Connect Data to Interface

Reference the sheet data in your user interface description when talking to Athena Assist. Specify which columns should be displayed and how they should be formatted.

Configure Data Display

Athena will automatically map your sheet data to appropriate interface components like tables, charts, and filters based on your natural language instructions.

Enable users to submit data through your interface that automatically updates both the dashboard display and underlying spreadsheet.

Provide Natural Language Instructions

In the chat UI with Athena Assist, provide natural language instructions for form functionality. For example: “Add a form that allows users to submit new financial records with fields for date, amount, category, and description.”

Athena chat with instructions and code for an intake form

Use Insert Table Row API

Prompt: Create a new intake form and connect it to the sheet, data upon form submission should be added to the sheet, use the API given below.Configure your interface to use the Insert Table Row API to import submitted data into your Athena Sheet.POST /api/v0/tools/sheets/table/insert-row

curl -X POST https://api.athenaintel.com/api/v0/tools/sheets/table/insert-row \
  -H "X-API-KEY: <apiKey>" \
  -H "Content-Type: application/json" \
  -d '{
    "asset_id": "string",
    "row_data": [
      {}
    ],
    "table_name": "string"
  }'

{
  "asset_id": "string",
  "message": "string",
  "success": true
}

Try it

Configure Form Fields

Athena will generate appropriate form fields based on your natural language description and the structure of your target Athena Sheet.

Generated financial records form and results table beside its code

Test Form Submission

Test the form submission workflow by entering sample data and verifying it appears correctly in both the interface and the connected Athena Sheet.

Get started

Core concepts

Work with Athena

Connect your data

Analyze and create

Automate

Meetings, email and voice

Account, security and apps

Build Athena User Interfaces and Dashboards

Key Features

Convert an HTML file

Custom App Builder

Data Integration

Real-Time Synchronization

Enterprise-Grade Components

Interactive Dashboards

Agent Operating Procedures (AOPs) Integration

Athena Sheets Data Connectivity

Version Control and History

Integration Guides

Sheets API (TypeScript)

Execute AOPs (TypeScript)

AOP API Reference

Common Integration Patterns

​Key Features

​Convert an HTML file

​Custom App Builder

​Data Integration

​Real-Time Synchronization

​Enterprise-Grade Components

​Interactive Dashboards

​Agent Operating Procedures (AOPs) Integration

​Athena Sheets Data Connectivity

​Version Control and History

​Integration Guides

Sheets API (TypeScript)

Execute AOPs (TypeScript)

AOP API Reference

​Common Integration Patterns

Key Features

Convert an HTML file

Custom App Builder

Data Integration

Real-Time Synchronization

Enterprise-Grade Components

Interactive Dashboards

Agent Operating Procedures (AOPs) Integration

Athena Sheets Data Connectivity

Version Control and History

Integration Guides

Common Integration Patterns