yuktai: accessible, agentic AI that runs in the browser

What's new in v5: 10 agentic features

Live demo: talk to a grid

useAgenticGrid + AgenticGridBar on 10 sample rows. Try the examples, or type your own. For 10 lakh rows on a real database, open the Yuktai Grid demo.

Live demo: test this page

runQaAudit() runs 15 WCAG checks and reviewDesign() checks hierarchy and readability, on this very page, right now.

import { runQaAudit, auditToMarkdown } from "@yuktishaalaa/yuktai";

const report = runQaAudit();          // 15 WCAG checks on the current page
console.log(report.score);            // 0–100
console.log(report.issues[0].fix);    // what to change, in plain English
const md = auditToMarkdown(report);   // paste into a ticket or PR

Live demo: ask this page

askAboutPage() reads the page structure (headings, forms, links, images) and answers questions about it. Search across page and grid text uses a BM25 index that also handles Telugu.

Live demo: multi-step tasks and voice commands

All-in-one: AgenticPanel

One component with six tabs: Copilot, QA, Forms, Design, Ask and Voice. Drop <AgenticPanel /> into any page.

Core: accessibility engine

• WCAG 2.2 auto-fix: adds missing ARIA roles, labels and states to plain markup.
• Speak on focus: reads the focused element aloud with the browser's speech engine.
• Dyslexia-friendly mode, larger targets, reduced motion and keyboard mode.
• Colour-blind filters: deuteranopia, protanopia, tritanopia, grayscale.

Open it from the ♿ button in the yuktai tools (bottom-left).

Core: in-browser RAG

• Gemini Nano when Chrome's built-in AI is available.
• Transformers.js fallback with 4-bit quantised models, so it also works on phones.
• BM25 context index for fast keyword search over page and grid text, no model needed.

Try it from the 💬 button in the yuktai tools.

Core: Vibe Coder

Describe a page and get a starting layout from built-in templates. Free, offline, no API. Open it from the ⚡ button in the yuktai tools.

Use it in your Next.js app

1. Agentic grid with your own question bar

"use client";
import { YuktaiGrid, AgenticGridBar, useAgenticGrid } from "@yuktishaalaa/yuktai";

const columns = [
  { key: "name",   label: "Name",   type: "text"   },
  { key: "salary", label: "Salary", type: "number" },
  { key: "joined", label: "Joined", type: "date"   },
];

export default function StaffPage({ rows }) {
  // The agent: plain-English questions → filters, sort, highlights, summaries
  const grid = useAgenticGrid({ data: rows, columns, rowKey: "id" });

  return (
    <>
      <AgenticGridBar
        grid={grid}
        examples={["salary over 1 lakh", "joined this month", "anything unusual?"]}
      />
      <YuktaiGrid
        data={grid.gridData}
        highlightIds={grid.highlightIds}
        columns={columns.map((c) => ({ ...c, sortable: true }))}
      />
    </>
  );
}

2. Or the grid's built-in assistant with your own rules

<YuktaiGrid
  data={rows}
  columns={columns}
  ai                         // built-in assistant: chat + voice
  webmcp                     // exposes the grid as a tool to browser AI agents
  toolName="my_staff_grid"
  inputLanguage="te-IN"      // understands Telugu questions too
  customRules={[
    {
      name: "high-earners",
      phrases: ["high earners", "top people"],
      description: "Salary over 1 lakh",
      execute: ({ executeTool }) =>
        executeTool("filter", { key: "salary", operator: "greaterThan", value: 100000 }),
    },
  ]}
/>

Custom rules run before the built-in intents and match by phrase, so you can teach the assistant your own words.

Technical compatibility