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

# Framework Guides

> Framework-agnostic integration patterns for Char using publishableKey and optional idToken

Char is a web component, so every framework follows the same auth model.

## Universal pattern

1. Render `<char-agent publishable-key="pk_live_...">`
2. If you have user auth, call `connect({ publishableKey, idToken })`
3. Never pass tokens in HTML attributes

```ts theme={null}
agent.connect({
  publishableKey: "pk_live_...",
  idToken,
});
```

<Info>
  Use `publishableKey` for every embed and pass `idToken` when user identity is available.
</Info>

## Guides

<CardGroup cols={2}>
  <Card title="React" icon="react" href="/guides/frameworks/react">
    React and Next.js integration
  </Card>

  <Card title="Vue" icon="vuejs" href="/guides/frameworks/vue">
    Vue and Nuxt integration
  </Card>

  <Card title="Angular" icon="angular" href="/guides/frameworks/angular">
    Angular standalone/component patterns
  </Card>

  <Card title="Svelte" icon="code" href="/guides/frameworks/svelte">
    Svelte and SvelteKit integration
  </Card>

  <Card title="Solid" icon="code" href="/guides/frameworks/solid">
    Solid and SolidStart integration
  </Card>

  <Card title="HTMX" icon="code" href="/guides/frameworks/htmx">
    Partial-update integration
  </Card>

  <Card title="Hotwire" icon="gem" href="/guides/frameworks/hotwire">
    Rails Turbo + Stimulus
  </Card>

  <Card title="Livewire" icon="laravel" href="/guides/frameworks/livewire">
    Laravel Livewire
  </Card>

  <Card title="LiveView" icon="code" href="/guides/frameworks/liveview">
    Phoenix LiveView
  </Card>
</CardGroup>

## Reference

* [Embedding the Agent](/guides/embedding-agent)
* [Identity Providers](/identity-providers/index)