---
url: https://chartbuddy.io/embed/docs/getting-started/installation.md
---
> Docs index: [llms.txt](https://chartbuddy.io/embed/docs/llms.txt)

# Installation

## Prompt for non-developers

Paste into a new agent chat:

```text
Use Chartbuddy Embed (@chartbuddy.io/embed) to create an editable Chartbuddy in an HTML page.
1) Fetch https://chartbuddy.io/embed/docs/llms.txt (index)
2) Copy the seriesData grid from Quick start. Fetch linked .md pages you need
```

For client-specific steps, see [Chart with AI](https://chartbuddy.io/embed/docs/connect-ai.md).

## npm

```bash
npm install @chartbuddy.io/embed
```

```js
import { Insight, version } from '@chartbuddy.io/embed';
```

## CDN

```js
import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed';
```

jsDelivr is the same package: `https://cdn.jsdelivr.net/npm/@chartbuddy.io/embed`.

## TypeScript

Types ship as `chartbuddy-embed.d.ts` from the package (`types` field).

## Framework bindings

| Framework | Import | Peer dependency |
|---|---|---|
| React 18/19 | `@chartbuddy.io/embed/react` | `react` (optional) |
| Vue 3 | `@chartbuddy.io/embed/vue` | `vue` (optional) |
| Angular, Svelte, Solid, Lit, plain HTML | `@chartbuddy.io/embed/element` | none |

Each ships its own types. Angular uses the `<chartbuddy-insight>` custom element
rather than a compiled Angular library, so Chartbuddy upgrades are not tied to
your Angular major – see the [Angular guide](https://chartbuddy.io/embed/docs/guides/angular.md).

Guides: [React](https://chartbuddy.io/embed/docs/guides/react.md) · [Vue](https://chartbuddy.io/embed/docs/guides/vue.md) ·
[Angular & web components](https://chartbuddy.io/embed/docs/guides/angular.md).