intermediate25 min7 steps

Getting Started with DAC: Build AI-Ready Dashboards as Code

Learn how to install DAC, define declarative dashboard configurations, and version-control your BI infrastructure for seamless AI agent integration.

By AI Indigo Team

This tutorial uses:

🔹

DAC

Define and deploy dashboards as code for AI agents and human developers

Install DAC and Verify Environment

Before diving into configuration, ensure your development environment is ready. DAC is distributed via npm, making it accessible to any Node.js-based workflow. Open your terminal and run the global installation command: `npm install -g @bruin-data/dac`. Once installed, verify the version by running `dac --version`. This ensures you are running the latest stable release, which is crucial for compatibility with modern data connectors. DAC requires Node.js 18 or higher; if you use a version manager like nvm, switch to the correct LTS version first. The CLI provides a robust command-line interface that allows you to initialize projects, validate configurations, and serve dashboards locally. Unlike traditional BI tools that rely on heavy GUIs, DAC operates entirely through code, meaning your terminal is your primary workspace. Ensure you have a code editor like VS Code installed, as you will be editing YAML or JSON files directly. This step sets the foundation for treating your dashboard as a software artifact, enabling integration with CI/CD pipelines later.

Pro Tip

If you encounter permission errors during global installation, try using `sudo` or switching to a non-root user with proper npm permissions.

Initialize Your First DAC Project

Create a new directory for your dashboard project and navigate into it. Run `dac init` to scaffold a basic project structure. This command generates a `dac.config.yaml` file, which serves as the single source of truth for your dashboard definition. It also creates a `src/` directory where you will store your visualization components and data source definitions. The generated config includes a basic example dashboard with a title and a placeholder chart. Open `dac.config.yaml` in your editor. You will see a declarative structure defining the dashboard layout, data sources, and widgets. This structure is human-readable and machine-parsable, which is the core value proposition of DAC. For AI agents, this flat, structured configuration allows them to understand the dashboard's schema without interacting with a complex UI. Review the default configuration to understand the hierarchy: `dashboard` > `widgets` > `data_source`. This step transforms an empty folder into a version-controllable BI project, ready for Git integration.

Pro Tip

Commit your initial `dac init` output to Git immediately. This establishes a baseline for tracking changes and facilitates code reviews for dashboard updates.

Define Data Sources Declaratively

In `dac.config.yaml`, locate the `dataSources` section. Here, you define where your data comes from. DAC supports various connectors, including SQL databases, REST APIs, and CSV files. For this tutorial, we will use a PostgreSQL example. Add a new source named `sales_db` with the appropriate connection string, host, and database name. Use environment variables for sensitive credentials like passwords to maintain security. For example: `password: ${DB_PASSWORD}`. DAC resolves these variables at runtime. Next, define a query for this source. You can write raw SQL or use a simplified query builder syntax provided by DAC. Let's define a query `monthly_revenue` that selects date and total sales. This separation of connection details and query logic allows you to reuse data sources across multiple widgets. If you are working with AI agents, this explicit definition ensures the agent knows exactly what data is available and how to access it, reducing hallucination risks when generating insights. Validate your config by running `dac validate`. This command checks for syntax errors and connection issues without rendering the full dashboard.

Pro Tip

Never hardcode secrets in your YAML files. Use a `.env` file or your CI/CD pipeline's secret management system to inject credentials securely.

Configure Dashboard Layout and Widgets

Now, define the visual layer. In the `widgets` section of your config, create a grid layout. DAC uses a flexible grid system similar to CSS Grid. Define a widget for your `monthly_revenue` query. Specify the type (e.g., `line_chart`, `bar_chart`, `kpi`), the title, and the data binding. For a line chart, map the `date` field to the x-axis and `total_sales` to the y-axis. You can also add filters, such as a date range picker or a region selector, which dynamically update the query parameters. This declarative approach means you describe *what* you want to see, not *how* to draw it pixel-by-pixel. For instance, if you want a KPI showing total users, create a widget with type `kpi` and bind it to a `user_count` query. DAC handles the rendering logic. This abstraction is vital for AI agents, which can modify the `type` or `filters` programmatically to generate different views based on user queries. Experiment with changing the chart type from `line` to `bar` and save the file. This step bridges the gap between data logic and visual presentation.

Pro Tip

Use consistent naming conventions for your widgets and data bindings. This improves readability and makes it easier for AI agents to parse and modify your dashboard structure.

Run and Debug Locally

With your configuration defined, it's time to see the result. Run `dac serve` in your terminal. This starts a local development server, defaulting to `http://localhost:3000`. Open this URL in your browser. You should see your dashboard rendered with the live data from your database. DAC supports hot-reloading, so any changes you make to `dac.config.yaml` will automatically refresh the browser. This iterative cycle is crucial for rapid development. If a chart doesn't display data, check the browser console and the terminal logs for errors. Common issues include typos in field names or incorrect data types. Use the `dac debug` command to output the final JSON state of your dashboard, which can help identify mismatches between your query results and widget expectations. This local server acts as a sandbox where you can test layout adjustments and filter interactions without affecting production. For developers, this mirrors the standard web development workflow, making it intuitive and efficient.

Pro Tip

Keep the terminal open while developing. The logs provide real-time feedback on data fetches and render errors, speeding up the debugging process significantly.

Integrate with AI Agents for Dynamic Insights

The true power of DAC emerges when AI agents interact with your dashboard. Since DAC exposes a structured, code-based interface, AI agents can read and modify the dashboard configuration. For example, you can write a simple script that calls the DAC API to add a new filter based on user intent. If a user asks, "Show me sales for Q1," the AI agent can update the `filters` section in the config and trigger a re-render. In this step, explore the DAC API documentation to understand how to send programmatic updates. You can use the `dac apply` command with a JSON payload to push changes. This allows for dynamic dashboard generation where the layout adapts to the user's query. Imagine an agent that analyzes query patterns and automatically suggests new widgets or rearranges the layout for better visibility. By treating the dashboard as code, you enable AI to not just query data, but to curate the presentation layer. This step transforms your static dashboard into a dynamic, intelligent interface.

Pro Tip

Implement version control for your dashboard configs. When AI agents make changes, track them in Git. This allows you to review and revert any automatic modifications made by the AI.

Deploy to Production and CI/CD

Once your dashboard is polished, deploy it. DAC provides a `dac build` command that bundles your configuration and assets into a static site. You can deploy this output to any static hosting provider like Vercel, Netlify, or AWS S3. For maximum reliability, integrate DAC into your CI/CD pipeline. Create a GitHub Actions workflow that runs `dac validate` and `dac build` on every push to the `main` branch. This ensures that any changes to the dashboard code are tested before deployment. If the validation fails, the pipeline stops, preventing broken dashboards from reaching users. This infrastructure-as-code approach guarantees consistency and reproducibility. You can also set up automated backups of your dashboard configurations. In the 2026 landscape, where dashboards are dynamic and AI-driven, having a reliable, versioned deployment process is critical. This final step operationalizes your dashboard, making it a robust, maintainable part of your data infrastructure rather than a fragile, manually maintained artifact.

Pro Tip

Use environment-specific configs (e.g., `dac.config.prod.yaml`) to manage different data sources or settings for development and production environments.

Try DAC →

🔥Stay ahead of the AI curve

Never Miss a Breakthrough AI Tool

Get the hottest AI tools, exclusive tutorials, and insider tips delivered to your inbox every Friday. Free forever.

🔒 No spam, unsubscribe anytime. We respect your inbox.

AI Tools

Free Tools

Weekly

Updates