Next.js setup

Add YuktAI to a Next.js App Router project with one client component. Choose the floating buttons your users need; the files below are generated for exactly that choice.

Builder

Buttons ✨ Launcher

One button that shows or hides the others; remembers the choice; Esc closes.

♿ Accessibility

Contrast, text size, dyslexia font, colour-blind filters…

💬 Ask page

Questions about the page (RAG), answered on the device.

🤖 Agent

Page agent for multi-step tasks.

⚡ Vibe Coder

Developer tool: generate UI code. Usually off in production.

🛠 Page tools

Copilot, QA report (15 WCAG checks), Forms, Design, Ask page, Voice. New in 5.3.11.

Position

Ask page engine

🛠 opens on

Folder

Engine options Auto-fix on load

Your visitors will see

app/YuktaiClient.tsx

// generated

app/layout.tsx

// generated

index.html

<!-- generated -->

Steps

Install: npm install @yuktishaalaa/yuktai@5.3.12 (or newer). Works with Next.js 13 to 16 and TypeScript 5 to 7.
Create YuktaiClient.tsx next to your root layout and paste the first file. It must start with "use client": YuktAI uses browser APIs, and the package itself does not mark its components as client components.
In layout.tsx, wrap {children} with <YuktaiClient>. Keep metadata and fonts in the layout as they are.
Run npm run dev. The buttons appear at the side you chose.

Using other YuktAI components

app/staff/page.tsx

"use client"
import { YuktaiGrid, AgenticPanel } from "@yuktishaalaa/yuktai"
import { SearchIcon } from "@yuktishaalaa/yuktai/icons"

export default function Staff() {
  return (
    <main>
      <h1><SearchIcon size={28} color="#0a4a85" /> Staff</h1>
      <YuktaiGrid data={rows} columns={columns} rowKey="id" engine="auto" showSearchTime />
      <AgenticPanel defaultTab="ask" engine="rust" />
    </main>
  )
}

pages/_app.tsx (Pages Router)

import type { AppProps } from "next/app"
import { YuktAIWrapper } from "@yuktishaalaa/yuktai"

// Pages Router: everything in pages/ already runs on the client.
export default function App({ Component, pageProps }: AppProps) {
  return (
    <YuktAIWrapper position="left" launcher showAccessibility showRag engine="rust">
      <Component {...pageProps} />
    </YuktAIWrapper>
  )
}

The second tab here shows the Pages Router version instead of plain HTML.

Common problems

Symptom, cause and fix
Symptom	Fix
Error about hooks or `window` in a Server Component	Use YuktAI only inside a file that starts with `"use client"` (like `YuktaiClient.tsx`), not directly in `layout.tsx`.
Type error: `children` is missing	`YuktAIWrapper` must wrap your content: `<YuktAIWrapper>{children}</YuktAIWrapper>`, not self-closing.
Page content shows twice	Render `{children}` once, inside the wrapper only.
New props (`launcher`, `showVibeCoder`, `engine`) show type errors	Delete old hand-written `declare module "@yuktishaalaa/yuktai"` files (for example `src/types/*.d.ts`); the package ships its own types.
Old version still running	`npm ls @yuktishaalaa/yuktai`, then `npm install @yuktishaalaa/yuktai@latest` and restart `npm run dev`.
🛠 or ⚡ buttons overlap after updating	Remove any old custom CSS that moves YuktAI buttons (for example `transform: translateY(-64px)` on `html[data-yuktai-tools]`). Since 5.3.9 the `launcher` prop stacks every button itself.
In `npm run dev`, the Next.js "N" badge covers the left buttons	Development only. Move it with `devIndicators: { position: "bottom-right" }` in `next.config`, or put YuktAI on the right.
Rust engine reported as "ts"	The browser blocked WebAssembly (often a Content Security Policy). Allow `'wasm-unsafe-eval'` in `script-src`; YuktAI falls back to TypeScript meanwhile, with the same results.

YuktAIWrapper props
Prop	What it does
children	Your app (required)
position	"left" (default) or "right"
launcher	One ✨ button that shows or hides the others
showAccessibility, showRag, showAgent, showVibeCoder	Turn each button on. Setting showAccessibility, showVibeCoder or launcher switches every button to opt-in
showPageTools	5.3.11: adds 🛠 Page tools (Copilot, QA report, Forms, Design, Ask page, Voice), always the top button. Adding it does not change which other buttons show
pageToolsTab	Tab 🛠 opens on: "copilot" (default), "qa", "forms", "design", "ask" or "voice"
voiceLang	Speech language for the 🛠 Voice tab, for example "te-IN" (default "en-IN")
engine	"rust", "auto" or "ts": 💬 Ask page finds passages with the page RAG first, then the on-device model answers from them. Also used by the 🛠 Ask tab (Rust by default since 5.3.11)
config	Engine options, for example { autoFix: false }

Older usage still works: with none of showAccessibility, showVibeCoder or launcher set, ♿ is always shown and ⚡ follows showAgent.