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>
| ### 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?
There was a problem hiding this comment.
Well it's already a subsection in Before you begin...
There was a problem hiding this comment.
There was a problem hiding this comment.
As an individual doc? I dunno... Not sure it's our "job" to be thorough about that.
There was a problem hiding this comment.
I'd rather remove it.
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>
|
|
||
| In your Grafana instance, go to **Connections** and check the app plugin has been scaffolded. | ||
|
|
||
| ## 4. Prompt your AI tool to build the app list view |
There was a problem hiding this comment.
There is a missing link between app and datasources - we need to symlink the datasource into the app so that when you run the Grafana server in app folder it actually picks up / installs the datasource. This is happening here in our workshop https://github.com/grafana/grafana-con-2026-ai-inception-workshop/blob/8c51401c32fd06f765235ba9160b746efe64eaad/milestone2.sh#L64-L105
There was a problem hiding this comment.
This can either be done manually or prompted in the app folder, something along the lines of
I want to add dist folder of ../myorg-bcapi-datasource plugin to volumes of this plugin so that when I start this app plugin it has the datasource installed. Also add it to run unsigned.
but the prompt can also be a bit more detailed ofc.
There was a problem hiding this comment.
It worked for me but let me add it!
Co-authored-by: Timur Olzhabayev <timur.olzhabayev@grafana.com>
Co-authored-by: Timur Olzhabayev <timur.olzhabayev@grafana.com>
Co-authored-by: Timur Olzhabayev <timur.olzhabayev@grafana.com>
Co-authored-by: Timur Olzhabayev <timur.olzhabayev@grafana.com>
Co-authored-by: Timur Olzhabayev <timur.olzhabayev@grafana.com>
Co-authored-by: Timur Olzhabayev <timur.olzhabayev@grafana.com>
Co-authored-by: Timur Olzhabayev <timur.olzhabayev@grafana.com>
|
@tolzhabayev @sympatheticmoose let's try to unblock this one. Timur, can you take a quick look at the last changes? |
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