Free tutorials & coupon codes. Join the WebDevEducation newsletter.

Database Data Visualization Using GitHub Copilot Agent Skills

No matter what database your project uses, stakeholders love one thing:

“Can you send me a chart of the last 12 months of activity?”

Instead of manually writing SQL, exporting CSVs, pasting into Excel, and screenshotting charts…

You can let Agent Skills in GitHub Copilot Chat handle it for you.

In this post, I’ll walk through a practical, real-world use case:

📊 Our manager asks for a bar chart PNG showing how many links were created each month over the past 12 months.

We’ll solve this cleanly using a custom Agent Skill called:

monthly-links-chart

The Stack

This use case assumes:

  • Database: PostgreSQL hosted on Neon (but any database with a connection string will work)
  • AI Assistant: GitHub Copilot Chat
  • Language for charting: Python (matplotlib)
  • Environment config: .env with DATABASE_URL

You can view the full repo example here from the GitHub Copilot course:

https://github.com/tomphill/linkshortenerproject/tree/dashboard/.agents/skills/monthly-links-chart

The Scenario

We have a links table in our PostgreSQL database (hosted on Neon, though any PostgreSQL-compatible database works the same way):

links (
  id UUID PRIMARY KEY,
  url TEXT,
  created_at TIMESTAMPTZ
);

Our manager asks:

“Can you send me a bar chart showing how many links were created each month over the last 12 months? PNG is fine.”

This is exactly the kind of repeatable analytics task that Agent Skills are perfect for.

What Is an Agent Skill?

An Agent Skill is a structured capability stored in:

.agents/skills/<skill-name>/

In our case:

.agents/skills/monthly-links-chart/SKILL.md

It defines:

  • Name
  • Description
  • When to use it
  • What it does
  • How to run it

Copilot Chat can automatically detect when a user request matches the skill description and invoke it.

Skill Definition

---
name: monthly-links-chart
description: Generates a bar chart PNG showing the number of links created each month for the past 12 months. Queries the project database using DATABASE_URL from the .env file. Use when the user asks to visualise, chart, or plot link creation statistics, monthly link counts, or link analytics over time.
---

That description is key — it teaches Copilot when to activate the skill.

What Happens When We Ask Copilot

Inside VS Code with Copilot Chat enabled, you type:

“Generate a PNG bar chart of monthly link creation counts for the past 12 months.”

Copilot sees:

  • “Generate”
  • “PNG”
  • “bar chart”
  • “monthly”
  • “link counts”

It matches the skill description and triggers:

.agents/skills/monthly-links-chart/scripts/plot_monthly_links.py

No manual wiring needed.

What the Script Does

The Python script:

  1. Finds .env or .env.local
  2. Reads DATABASE_URL (your database connection string)
  3. Connects to your database
  4. Runs a grouped SQL query
  5. Fills in missing months (ensures all 12 appear)
  6. Plots a bar chart
  7. Exports a PNG file

The SQL Query

SELECT
  TO_CHAR(DATE_TRUNC('month', created_at AT TIME ZONE 'UTC'), 'Mon YYYY') AS month_label,
  DATE_TRUNC('month', created_at AT TIME ZONE 'UTC') AS month_start,
  COUNT(*) AS link_count
FROM links
WHERE created_at >= NOW() - INTERVAL '12 months'
GROUP BY month_start, month_label
ORDER BY month_start ASC;

Key detail:

DATE_TRUNC('month', created_at AT TIME ZONE 'UTC')

This ensures consistent monthly bucketing in UTC — important when your database serves users across multiple time zones.

Why This Works with Any Database

The skill doesn’t care whether you’re using Neon, Supabase, Railway, a self-hosted PostgreSQL instance, or even MySQL or SQLite. All it needs is a connection string in your .env file.

Because the skill reads credentials directly from .env, there’s zero additional configuration:

  • Your project already has a DATABASE_URL (or equivalent)
  • The schema is stable and queryable
  • No application code needs to be touched

In this example we’re using Neon, which provides a standard PostgreSQL connection string — but the same pattern applies to any database you already have credentials for.

That means the skill can:

  • Run anywhere in the project
  • Automatically locate credentials
  • Work across projects with completely different database providers

It’s an operational analytics tool built directly into your repo — database-agnostic by design.

Output

The script generates:

monthly_links_chart.png

Or a custom path:

python3 .agents/skills/monthly-links-chart/scripts/plot_monthly_links.py charts/links_2026.png

The PNG includes:

  • 12 months on X-axis
  • Link counts on Y-axis
  • Labels above each bar
  • Zero-filled months
  • Professional formatting

Perfect to:

  • Email to management
  • Drop into Notion
  • Include in investor updates
  • Add to a quarterly report

Why Use an Agent Skill Instead of Writing Code Manually?

Let’s compare.

Traditional Approach

  • Write SQL manually
  • Create script
  • Install dependencies
  • Ensure formatting
  • Handle missing months
  • Export chart
  • Test output

Time: 30–60 minutes.

With Agent Skill

  • Ask Copilot
  • Skill runs
  • PNG generated

Time: 30 seconds.

Why This Is a Great Use Case

This is ideal because:

✅ It’s repeatable
✅ It’s data-driven
✅ It requires database access
✅ It produces a tangible artifact (PNG)
✅ It doesn’t change application logic
✅ It doesn’t expose internal APIs

It’s exactly the kind of operational automation Agent Skills are designed for.

Architecture Overview

Database (e.g. Neon PostgreSQL)
    ↓
Agent Skill Script (Python)
    ↓
matplotlib
    ↓
PNG File Output

Your database remains untouched.
The skill lives alongside your project.
Copilot orchestrates everything.

Why Not Build a Dashboard Instead?

You could build a dedicated analytics dashboard. But:

  • It adds significant development time
  • It requires authentication and access control
  • It adds ongoing maintenance overhead
  • It’s overkill for internal, on-demand reporting

Agent Skills are perfect for internal tooling.

They’re like having DevOps scripts — but AI-aware.

Extending the Skill

Once this works, you can easily create:

  • monthly-users-chart
  • monthly-revenue-chart
  • daily-clicks-chart
  • top-domains-pie-chart

Each becomes reusable, discoverable, and AI-triggerable — all reading directly from whatever database your project uses.

You’re building an analytics toolkit that Copilot understands.

When This Becomes Extremely Powerful

Imagine your manager asks:

“Can you generate the monthly links chart but exclude internal domains?”

Copilot could:

  • Modify the SQL
  • Add a WHERE clause
  • Rerun the script
  • Export a new PNG

All via chat.

That’s not autocomplete.

That’s AI orchestration talking directly to your database.

Final Thoughts

Agent Skills in GitHub Copilot Chat allow you to:

  • Formalize internal scripts
  • Connect AI directly to your database — any database with a connection string
  • Generate real business artifacts
  • Reduce operational friction
  • Turn your repository into an AI-aware workspace

In this post we used Neon PostgreSQL as the example, but the same approach works whether you’re on Supabase, Railway, a local Postgres instance, or something else entirely. As long as your credentials live in a .env file, the skill can reach your data.

Query production data → Visualize it → Export it → Deliver it.

All without building a single dashboard page.

If you want fast, repeatable data visualizations from any database, Agent Skills should absolutely be part of your workflow.