Skip to main content

Build a plugin with AI

View as Markdown

This tutorial shows you how to build a Grafana plugin by prompting an AI coding assistant step by step. First, you create a data source plugin using the Barcelona Bicing API, and then you create an app plugin that uses that data source to show station data in a list and on a map.

In this tutorial, you'll:

  1. Scaffold a data source plugin with a backend component.
  2. Prompt your AI tool to implement the data source.
  3. Scaffold an app plugin.
  4. Prompt your AI tool to build the app views.

Before you begin​

Before you begin, make sure to:

  • Install the latest version of Grafana.
  • Install a current LTS version of Node.js.
  • Install Docker.
  • Install Go and Mage for the data source plugin backend.
  • Have an AI coding assistant available in your editor or terminal.

This tutorial uses the following API details:

  • Station information URL: https://barcelona.publicbikesystem.net/customer/ube/gbfs/v1/en/station_information
  • Station status URL: https://barcelona.publicbikesystem.net/customer/ube/gbfs/v1/en/station_status

No access token is required for the endpoints used in this tutorial.

Useful tips to work with AI tools​

important

Do not let AI bootstrap the plugin. Make sure you're using create-plugin.

When working with AI, you're steering the wheel! Do not let your AI tool guess. Instead, give it clear prompts with guidelines and constraints, keep it inside Grafana plugin patterns, and verify each milestone in Grafana before moving on.

These patterns help keep the AI useful:

  • Start with facts: Give the API contract, plugin type, and hard constraints first.
  • Ask it to confirm before executing any task: This helps catch drift before the AI edits files.
  • Tell it what not to do: For example, no invented API fields and no direct app-to-API calls.
  • Ask it to name files before editing: This makes review easier.
  • Keep prompts milestone-sized: One milestone for the data source, one for the list page, one for the map page.

1. Create the data source plugin scaffold​

important

Do not let AI bootstrap the plugin. Make sure you're using create-plugin to perform the initial scaffolding.

Scaffold the plugin and build the frontend​

Scaffold a data source plugin (in this case, let's call it bcapi) with a backend component:

npx @grafana/create-plugin@latest --plugin-type=datasource