***
title: Quickstart
subtitle: Get up and running with the Sunny Agents SDK in minutes
slug: quickstart
---------------------
For clean Markdown of any page, append .md to the page URL. For a complete documentation index, see https://docs.sunnyhealthai.com/ask-sunny/llms.txt. For full documentation content, see https://docs.sunnyhealthai.com/ask-sunny/llms-full.txt.
This guide shows you how to integrate the Sunny Agents SDK into your application using `createSunnyChat`.
## Quick start
Sign in to [Sunny Central](https://platform.sunnyhealthai.com) (or [staging](https://platform.sunnyhealthai-staging.com)) and go to **Developer Tools**. Create an API key and note your partner name. See [Partner Setup](/partner-setup) for details.
Install the Sunny Agents SDK:
```bash npm
npm install @sunnyhealthai/agents-sdk
```
```bash pnpm
pnpm add @sunnyhealthai/agents-sdk
```
```bash yarn
yarn add @sunnyhealthai/agents-sdk
```
Create an HTML file and add a container for the chat widget:
```html title="index.html"
Sunny Agents Chat
```
Open your HTML file in a browser and start chatting! The widget will automatically connect and handle all WebSocket communication.
## Authentication options
Choose the authentication mode that fits your application:
**Custom Token Exchange:**
```typescript
import { createSunnyChat } from "@sunnyhealthai/agents-sdk";
const chat = createSunnyChat({
container: document.getElementById("chat"),
partnerIdentifier: "acme-health",
publicKey: "pk-sunnyagents_abc_xyz",
authType: "tokenExchange",
idTokenProvider: async () => {
return localStorage.getItem("id_token");
},
});
```
## Return value
`createSunnyChat` returns a `VanillaChatInstance` with these members:
| Member | Description |
| ------------------------------ | --------------------------------------------------------------------------------------------------------- |
| `client` | The underlying client for programmatic control (events, sending messages, state) |
| `destroy()` | Unmount the widget and close the WebSocket connection |
| `setAuthType(authType, opts?)` | Switch authentication mode at runtime (see [Authentication](/authentication#runtime-auth-type-switching)) |
## Programmatic control
Use the `client` property for programmatic access:
```typescript
const chat = createSunnyChat({
container: document.getElementById("chat"),
partnerIdentifier: "acme-health",
publicKey: "pk-sunnyagents_abc_xyz",
authType: "passwordless",
});
// Listen to state changes
chat.client.on("snapshot", (snapshot) => {
console.log("Current conversations:", snapshot.conversations);
console.log("Active conversation:", snapshot.activeConversationId);
});
// Listen to streaming updates
chat.client.on("streamingDelta", ({ conversationId, messageId, text }) => {
console.log("Streaming response:", text);
});
// Send a message programmatically
await chat.client.sendMessage("I need to find a cardiologist");
// Clean up when done
chat.destroy();
```
## Customization
Customize the widget's appearance:
```typescript
const chat = createSunnyChat({
container: document.getElementById("chat"),
partnerIdentifier: "acme-health",
publicKey: "pk-sunnyagents_abc_xyz",
authType: "passwordless",
headerTitle: "Sunny Health Concierge",
placeholder: "How can I help you find care?",
colors: {
primary: "#006fff",
secondary: "#212124",
accent: "#22c55e",
},
fontSize: "14px",
fontFamily: "'Inter', sans-serif",
dimensions: {
width: "1200px", // Modal width (default: 1390px)
height: "800px", // Modal height (default: 980px)
triggerMaxWidth: "500px", // Collapsed bar max-width (default: 600px)
},
});
```
## React example
```tsx title="ChatWidget.tsx"
import { useEffect, useRef } from "react";
import { createSunnyChat } from "@sunnyhealthai/agents-sdk";
import type { VanillaChatInstance } from "@sunnyhealthai/agents-sdk";
export function ChatWidget() {
const containerRef = useRef(null);
const chatRef = useRef(null);
useEffect(() => {
if (!containerRef.current) return;
chatRef.current = createSunnyChat({
container: containerRef.current!,
partnerIdentifier: "acme-health",
publicKey: "pk-sunnyagents_abc_xyz",
authType: "passwordless",
});
return () => {
chatRef.current?.destroy();
};
}, []);
return ;
}
```
## Next steps
Set up authenticated sessions
Parse and render rich content
Events, state management, and more