Frontend API

Building a Grafana plugin or app? The @grafana/assistant TypeScript SDK puts Grafana Assistant inside your own UI. Open the Assistant with a prompt and the context your page already knows, drop in ready-made components, and generate content directly into your forms.

Your code picks the moment. The Assistant does the grounded work.

npm install @grafana/assistant

Open the Assistant from your code

Send users into a conversation that already knows what they're looking at. Pass a prompt, the feature it came from, and context items, and the Assistant opens ready to work:

import { openAssistant } from '@grafana/assistant';

openAssistant({
  origin: 'grafana/my-plugin',
  prompt: 'Show me CPU usage over the last hour',
  autoSend: true,
});

In React components, the useAssistant() hook adds availability state, so your UI only renders Assistant entry points where the Assistant can actually respond.

Drop in ready-made components

Skip the plumbing. The SDK ships components that handle availability, context, and hand-off for you:

• OpenAssistantButton: a one-line entry point that opens the Assistant with your prompt.
• QueryWithAssistantButton: for query editors; passes the selected data source and current queries so the Assistant can write or fix the query.
• AssistantPromptCard: an embedded prompt box with example prompts, scoped to the context you provide.

Every component hides itself when the Assistant isn't available, so one build ships everywhere.

Generate content inline

Not every job needs a conversation. AITextInput and AITextArea are controlled form inputs that ask the Assistant to write the value (a panel title, a description, an annotation) and stream the result straight into your form without opening the sidebar.

Register page context

Tell the Assistant what your page is about, and it answers accordingly. Register context against URL patterns (the current dashboard, the active data source, or any structured JSON) and update it as users select panels, change queries, or move through your app.

Get started

The SDK is on npm, and full guides live in the Grafana Assistant docs. For live examples you can edit and run, open Grafana Assistant in your stack and click Integration hub.

Read the SDK docs -> @grafana/assistant on npm ->

Calling from outside Grafana instead? See APIs for agent-to-agent, webhooks, and HTTP endpoints.