Skip to main content
The Chart Maker Agent lets you create and modify charts using natural language. Describe what you want in plain English, and the agent transforms your graph configuration accordingly.

​
Step 1: Set up the client

First, create an instance of the AI SDK with your credentials: 
import { GraphyAiSdk } from '@graphysdk/ai';

const ai = new GraphyAiSdk({
  apiKey: <GRAPHY_API_KEY>,
  baseUrl: 'https://api.graphy.app',
});

​
Step 2: Prepare your graph configuration

The agent works with an existing GraphConfig. This can be a chart you’ve already created or a minimal starting point: 
import type { GraphConfig } from '@graphysdk/core';

const config: GraphConfig = {
  data: {
    columns: [
      { key: 'quarter', label: 'Quarter' },
      { key: 'revenue', label: 'Revenue' },
      { key: 'profit', label: 'Profit' }
    ],
    rows: [
      { quarter: 'Q1', revenue: 50000, profit: 12000 },
      { quarter: 'Q2', revenue: 62000, profit: 15500 },
      { quarter: 'Q3', revenue: 58000, profit: 14000 },
      { quarter: 'Q4', revenue: 71000, profit: 18200 }
    ]
  },
  type: 'column'
};

​
Step 3: Send a prompt to the agent

Call generateGraph() with your configuration and a natural language prompt: 
const result = await ai.generateGraph({
  config,
  userPrompt: 'Change this to a grouped bar chart comparing revenue and profit'
});

// The updated configuration
console.log(result.config);

// The agent's explanation of what changed
console.log(result.response.message);
The agent returns:
  • config — The modified graph configuration ready to render
  • response.message — A human-readable explanation of the changes
  • response.steps — Optional breakdown of individual modifications

​
Step 4: Render the result

Pass the updated configuration to your graph component: 
import { GraphProvider, Graph } from '@graphysdk/core';

function MyChart() {
  return (
    <GraphProvider config={result.config}>
      <Graph />
    </GraphProvider>
  );
}