Docs: Build a plugin with AI #2601
Conversation
urbiz-grafana
added
the
no-changelog
|
Hello! 👋 This repository uses Auto for releasing packages using PR labels. ✨ This PR can be merged. It will not be considered when calculating future versions of the npm packages and will not appear in the changelogs. |
There was a problem hiding this comment.
Pull request overview
Adds a new tutorial that guides readers through building a Grafana data source plugin and app plugin by using structured prompts with an AI coding assistant.
Changes:
- Introduces a step-by-step workflow for scaffolding and iteratively implementing a data source plugin (with Go backend).
- Adds structured prompt templates for building an app plugin (list view, map view) that consumes the data source.
- Includes verification steps and troubleshooting guidance for frontend/backend iteration.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <copilot@github.com>
urbiz-grafana
moved this from 🧑💻 In development
to 🔬 In review
in Grafana Catalog Team
| - [Build a data source plugin](./build-a-data-source-plugin.md) | ||
| - [Build a data source plugin backend component](./build-a-data-source-backend-plugin.md) | ||
| - [Build an app plugin](./build-an-app-plugin.md) |
There was a problem hiding this comment.
These probably don't make sense as next steps? Maybe better to point towards more conceptual information to depend understanding
|
|
||
| ## Troubleshooting | ||
|
|
||
| ### The data source shows no data right after scaffolding |
There was a problem hiding this comment.
It should display a constant? But you do need to issue a query?
| ### 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 to 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 for a short plan**: 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. |
There was a problem hiding this comment.
Would this be better in a concepts section or broader than a tutorial?
|
|
||
| Before you begin, make sure to: | ||
|
|
||
| - Install Grafana v10.0 or later. |
There was a problem hiding this comment.
I don't think this is required since grafana is being provided by the dev environment?
But as a general rule, we shouldnt recommend end of life versions of Grafana. We should promote people using latest major
| - Do not call the Bicing API directly from the browser | ||
| - Do not invent extra endpoints or fields | ||
| - Keep the query model simple and typed | ||
| - Tell me which files you plan to change before editing them |
There was a problem hiding this comment.
Implies plan mode but not called out
|
|
||
| ## 3. Create the app plugin scaffold | ||
|
|
||
| :::important |
There was a problem hiding this comment.
do we have to keep repeating this?
| 1. Click **Save & Test**. If everything works, you see live station data. If there's any errors, run them by your tool until they're fixed. | ||
| 1. Go back to **Explore** and run both query types. | ||
|
|
||
| As a suggestion, you can check that: |
There was a problem hiding this comment.
This section feels weird
|
|
||
| ### Verify the app plugin | ||
|
|
||
| In your Grafana instance, go to **Connections** > **Apps** and check the app plugin has been scaffolded. |
There was a problem hiding this comment.
This isn't a place in Grafana
github-project-automation
Bot
moved this from 🔬 In review
to 🧑💻 In development
in Grafana Catalog Team
Co-authored-by: David Harris <david.harris@grafana.com>
Co-authored-by: David Harris <david.harris@grafana.com>
| Verify that the scaffold loads: | ||
|
|
||
| 1. Go to **Connections** > **Data sources**. | ||
| 1. Add your new data source. |
There was a problem hiding this comment.
it should already be provisioned as well?
Based on https://github.com/grafana/grafana-con-2026-ai-inception-workshop/.
Covers https://github.com/grafana/grafana-catalog-team/issues/854.
Preview - https://grafana-dev.com/developers/plugin-tools/tutorials/build-ai-plugin