Introduction
Yak is an embeddable AI assistant that integrates directly into your web application. It connects to your data layer, understands your application's routes, and can take actions on behalf of your users — all through a simple chat interface.
Available SDKs
| Package | Description | Use When |
|---|---|---|
@yak-io/nextjs | First-class Next.js support with automatic route scanning | Building with Next.js App Router |
@yak-io/react | React components and hooks | Any React application |
@yak-io/javascript | Core SDK and server handlers | Non-React frameworks or custom runtimes |
@yak-io/trpc | tRPC procedure adapter | Exposing tRPC procedures as AI tools |
@yak-io/nextjs includes @yak-io/react and @yak-io/javascript as dependencies — you only need to install one package.
Integration Overview
Adding Yak to your application takes three steps:
- Install the SDK for your framework
- Set up a server handler that defines which routes and tools the AI can access
- Embed the widget in your layout
// 1. Install
// pnpm add @yak-io/nextjs
// 2. Server handler — app/api/yak/[[...yak]]/route.ts
import { createNextYakHandler } from "@yak-io/nextjs/server";
export const { GET, POST } = createNextYakHandler();
// 3. Widget — app/layout.tsx
import { YakProvider, YakWidget } from "@yak-io/nextjs/client";
<YakProvider appId={process.env.NEXT_PUBLIC_YAK_APP_ID!}>
{children}
<YakWidget />
</YakProvider>What Can Yak Do?
- Navigate users — Understands your app's pages and can guide users to the right place
- Execute actions — Calls your APIs through tool adapters to fetch data or perform operations
- Contextual assistance — Reads the current page context to provide relevant help
- Customizable appearance — Match your brand with theming and styling
- Programmatic control — Open the widget, send prompts, and react to tool calls from your code
Next Steps
Pick your framework to get started:
- Next.js — Recommended for Next.js applications
- React — For any React application
- JavaScript — For non-React frameworks or custom setups
Or explore specific topics:
- Tool Adapters — Connect your APIs and data sources
- Styling — Customize the widget appearance
- Security — Security model and best practices