Squadbase

AI-Powered Dashboard Development

A Practical Guide to Building with AI Assistants

Why Use AI for BI Dashboard Development?

Traditional BI tools offer pre-built components but often restrict layout and visualization options. Code-based dashboards, built with frameworks like Streamlit, provide limitless customization but traditionally require programming knowledge.

AI coding assistants bridge this gap, enabling users to build sophisticated, custom dashboards by describing requirements in plain English. An instruction like, "Visualize Q3 sales data by region," can generate the necessary code, making custom development accessible to a broader audience.

This chapter provides a practical guide to using AI assistants like ChatGPT and GitHub Copilot to build and refine BI dashboards.

Choosing the Right AI Tool

AI coding tools can be categorized by their primary use case:

Tool TypePrimary Use CaseRecommended For
Chat-basedGenerating code from natural language.Non-engineers, prototyping
Code CompletionAutocompleting code while typing.Engineers, accelerating development
CLI-basedOperating from the command line.Technically advanced users

For most business users building BI dashboards, chat-based tools are the ideal starting point.

A Comparison of Major AI Coding Tools

ToolKey FeaturesBest For
ChatGPTUser-friendly, versatile for general tasks.Prototyping and generating initial code.
GitHub CopilotIntegrates directly into code editors.Speeding up development for engineers.
CursorAn AI-native code editor with project-wide context.Complex, feature-rich development.
ClaudeAdvanced reasoning and instruction-following.Implementing complex business logic.

Recommended Path:

  1. Prototype with ChatGPT.
  2. Develop in GitHub Codespaces with GitHub Copilot.
  3. Scale to a dedicated AI editor like Cursor for large projects.

How to Write Effective Prompts

The quality of AI-generated output depends directly on the quality of the input. An effective prompt includes three key elements: Goal, Context, and Constraints.

1. Define a Clear Goal Explain why you are building the dashboard. This context helps the AI make better design choices.

❌ **Vague:** "Create a sales graph."
✅ **Specific:** "Create a line chart for our monthly board meeting to show sales revenue trends over the past 12 months."

2. Provide Sufficient Context Give the AI the information it needs, such as data structure, to generate accurate code.

❌ **Lacks Context:** "Visualize my sales data."
✅ **Provides Context:** "Here is a sample of my sales data in CSV format. Create a bar chart showing total revenue by product category."
[Paste a small, representative data sample]

3. Specify Constraints Inform the AI about technical requirements to ensure the code works in your environment.

❌ **Unspecific:** "Build a Streamlit app."
✅ **Specific:** "Build a Streamlit app using Python 3.11 with the pandas and plotly libraries. Data will be loaded from a user-uploaded CSV file."

Best Practice: Develop Incrementally

Build complex dashboards in small, verifiable steps rather than with a single, large prompt. This simplifies debugging.

Recommended Flow:

  1. Load Data: "Write a script to load a CSV and display it in a table."
  2. Add a Chart: "Add a line chart showing sales over time."
  3. Add Filters: "Add a sidebar with a dropdown to filter by region."
  4. Apply Styling: "Apply a clean, professional theme."

How to Handle Errors

When an error occurs, provide the AI with the necessary information to help.

  1. Paste the full error message.
  2. Specify your execution environment (OS, Python version).
  3. Show the exact code that caused the error.
I ran the following code in a GitHub Codespace (Python 3.11, Streamlit 1.45):

```python
[Paste your code here]
```

This produced the following error:

```
[Paste the full error message here]
```

My goal is to display the contents of `sales_data.csv` in a table. How can I fix this?

A Practical Guide: Building a Dashboard with ChatGPT

Let's apply these principles to build a sales dashboard.

Step 1: Write a System Prompt

A system prompt defines the AI's role and the rules for the interaction.

## System Prompt
You are an expert Streamlit developer. Your task is to help me build a BI dashboard by generating clean, efficient, and production-ready Python code.

**Guidelines:**
- Write code for a Streamlit application based on my instructions.
- The code must be compatible with Python 3.11 and use pandas and Plotly.
- Add concise comments to explain key code sections.
- Enclose all code in Markdown blocks (```python).
- If I report an error, analyze the code and error message, then provide a corrected version with an explanation.

Here is a sample of the data we will use:
Transaction ID,Date,Product Category,Product Name,Units Sold,Unit Price,Total Revenue,Region,Payment Method
10001,2024-01-01,Electronics,iPhone 14 Pro,2,999.99,1999.98,North America,Credit Card
...

Step 2: Write a Feature-Specific Prompt

Request the first feature using the Goal, Context, Constraints model.

Please create a Streamlit sales dashboard.

**Goal:** Analyze 2024 sales performance.
**Context:** The app will be used by the sales team to track monthly progress.
**Constraints:**
- Allow users to upload a CSV file with the specified format.
- Display the following three charts side-by-side:
  1. A line chart of monthly sales revenue.
  2. A pie chart of sales share by region.
  3. A bar chart of total revenue by product category, sorted descending.
- Add a sidebar with filters for date range and region.
- Use a professional, blue-toned color theme.

Step 3: Run and Verify the Code

  1. Paste the AI-generated code into app.py in your development environment.
  2. Run the app: streamlit run app.py.
  3. Verify that the app functions as expected.

App Screenshot

Step 4: Iterate and Refine

Continue the conversation with the AI to add features or fix issues, providing clear instructions and feedback at each step.

Critical Security Practices

Using AI assistants requires attention to security. Follow these practices to protect your application.

1. Always Work in a Sandbox

Never generate or run AI-written code directly on your primary machine. Use a sandboxed environment like GitHub Codespaces or VS Code Dev Containers to isolate the development process and prevent unintended system modifications.

2. Manage Secrets Securely

Never hardcode sensitive information like API keys or database credentials. Use environment variables and a .env file.

.env file:

DATABASE_URL="postgres://user:password@localhost/dbname"
API_KEY="your_secret_api_key"

.gitignore file:

# Prevent secrets from being committed to version control
.env

3. Follow the Principle of Least Privilege

When connecting to a database, use a dedicated account with the minimum required permissions. For a read-only dashboard, connect with a read-only user to minimize potential damage if the application is compromised.

Summary

Key Takeaways:

  • Choose the Right Tool: Start with chat-based tools for prototyping and move to integrated solutions for development.
  • Master the Prompt: A good prompt includes a clear Goal, sufficient Context, and well-defined Constraints.
  • Develop Incrementally: Build and test your application in small, manageable steps.
  • Prioritize Security: Use a sandbox, manage secrets securely, and grant least privilege.

Next Steps

In the next chapter, we will cover Exploratory Data Analysis (EDA). You will learn how to use Streamlit to uncover deeper insights from your data and build more powerful dashboard features.