Skip to main content
Add annotations to a chart with natural language. Send a GraphConfig and a prompt, receive a GraphConfig with highlights, tooltips, stickers, and other annotations applied.

​
Methods

​
generateAnnotations

Processes the request and returns the final result. Internally handles streaming and collects the response. 
async generateAnnotations(
  params: GenerateAnnotationsParams,
  onProgress?: (event: ProgressEvent) => void,
  signal?: AbortSignal
): Promise<GenerateAnnotationsResponse>

​
generateAnnotationsStream

Returns an async iterator that yields events as they arrive. 
async generateAnnotationsStream(
  params: GenerateAnnotationsParams,
  signal?: AbortSignal
): Promise<AsyncIterableIterator<SSEEvent<GenerateAnnotationsResponse>>>

​
Parameters

interface GenerateAnnotationsParams {
  config: GraphConfig;
  userPrompt?: string;
  metadata?: Metadata;
}
FieldTypeRequiredDescription
configGraphConfigYesThe current chart configuration to annotate
userPromptstringNoNatural language description of the annotations to add or remove
metadataMetadataNoRequest tracking information

​
Response

interface GenerateAnnotationsResponse {
  response: {
    message: string;
    steps: string[];
  };
  config: GraphConfig;
}
FieldTypeDescription
response.messagestringExplanation of the annotations applied
response.stepsstring[]Ordered breakdown of each annotation step
configGraphConfigUpdated chart configuration with annotations applied
The response is validated with Zod. Invalid responses throw an error.

​
Basic Usage

import { GraphyAiSdk } from '@graphysdk/agents-sdk';
import type { GraphConfig } from '@graphysdk/core';

const ai = new GraphyAiSdk({
  apiKey: process.env.GRAPHY_API_KEY,
  baseUrl: 'https://agents.graphy.dev',
});

const config: GraphConfig = {
  type: 'column',
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'revenue', label: 'Revenue' },
    ],
    rows: [
      { month: 'Jan', revenue: 100 },
      { month: 'Feb', revenue: 140 },
      { month: 'Mar', revenue: 220 },
      { month: 'Apr', revenue: 130 },
    ],
  },
};

const result = await ai.generateAnnotations({
  config,
  userPrompt: 'Highlight the March peak and add a tooltip explaining it',
});

console.log(result.config.annotations); // Annotations applied to the chart

​
With Progress Callback

Use the onProgress callback to show real-time progress without full streaming: 
const result = await ai.generateAnnotations(
  {
    config,
    userPrompt: 'Add a difference arrow between the first and last month',
  },
  (progress) => {
    console.log(progress.message);
  }
);

​
Streaming

For full control over the event stream: 
import { isProgressEvent, isCompleteEvent, isErrorEvent } from '@graphysdk/agents-sdk';

const stream = await ai.generateAnnotationsStream({
  config,
  userPrompt: 'Highlight every month above 150',
});

for await (const event of stream) {
  if (isProgressEvent(event)) {
    console.log(event.message);
  }

  if (isCompleteEvent(event)) {
    console.log('Result:', event.data.config);
  }

  if (isErrorEvent(event)) {
    console.error('Error:', event.error);
  }
}
See Streaming for cancellation and React patterns.

​
Error Handling

import { isGraphyApiError } from '@graphysdk/agents-sdk';

try {
  const result = await ai.generateAnnotations({
    config,
    userPrompt: 'Highlight the peak value',
  });
} catch (error) {
  if (isGraphyApiError(error)) {
    console.error('API error:', error.message);
  }
}
See Error Handling for retry behavior and error types.