> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

<Note>AI Agents is currently in alpha. APIs may change.</Note>

Get your first AI-generated chart modification working in 5 minutes.

## Prerequisites

* Node.js 18+
* A Graphy API key — [create one in the console](/agents/api-keys)
* An existing `GraphConfig` (or use the example below)

## 1. Install the SDK

<CodeGroup>
  ```bash npm theme={null}
  npm install @graphysdk/agents-sdk @graphysdk/core
  ```

  ```bash yarn theme={null}
  yarn add @graphysdk/agents-sdk @graphysdk/core
  ```

  ```bash pnpm theme={null}
  pnpm add @graphysdk/agents-sdk @graphysdk/core
  ```
</CodeGroup>

## 2. Create the Client

```typescript theme={null}
import { GraphyAiSdk } from '@graphysdk/agents-sdk';

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

## 3. Prepare a Graph Configuration

```typescript theme={null}
import type { GraphConfig } from '@graphysdk/core';

const config: GraphConfig = {
  type: 'column',
  data: {
    columns: [
      { key: 'quarter', label: 'Quarter' },
      { key: 'revenue', label: 'Revenue ($)' },
    ],
    rows: [
      { quarter: 'Q1', revenue: 50000 },
      { quarter: 'Q2', revenue: 62000 },
      { quarter: 'Q3', revenue: 58000 },
      { quarter: 'Q4', revenue: 71000 },
    ],
  },
};
```

## 4. Call the Agent

```typescript theme={null}
const result = await ai.generateGraph({
  config,
  userPrompt: 'Change this to a line chart and add a trend line',
});

console.log(result.config); // Updated GraphConfig
console.log(result.response.message); // "Changed chart type to line and added trend line"
```

## 5. Render the Result

```tsx theme={null}
import { GraphProvider, Graph } from '@graphysdk/core';

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

## Next Steps

<CardGroup cols={2}>
  <Card title="Configuration" icon="gear" href="/agents/sdk/configuration">
    Timeouts, retries, and logging
  </Card>

  <Card title="Streaming" icon="signal-stream" href="/agents/sdk/streaming">
    Real-time progress updates
  </Card>

  <Card title="Error Handling" icon="circle-exclamation" href="/agents/sdk/errors">
    Retries and error types
  </Card>

  <Card title="REST API" icon="code" href="/agents/rest/authentication">
    Direct HTTP integration
  </Card>
</CardGroup>