yuktai: accessible, agentic AI that runs in your browser
One free toolkit for Next.js, React and plain HTML: a data grid you can talk to, small agents that test and explain a page, WCAG accessibility fixes and 163 icons. No API keys and no yuktai servers.
- Free and open source (GPL-3.0)
- Zero API keys
- Next.js, React and plain HTML
- 163 icons
- English + Telugu
- Accessible by design
Big data, small browser
Talk to a grid
Ask in plain English. The agent turns your words into filters, sorting and summaries, and every answer says what it did, so you can check it. Sample data: volunteers of an imaginary community project.
Try one of the examples, or type your own question. Each question builds on the last one; press Reset to start again.
Want more? The Grid demo pages through 10 lakh rows from a database, and the browser only ever holds one page.
Every feature, one by one
15 features in one install. Each card says what it does and how to use it.
YuktaiGrid
An accessible data grid: search, sort, pages, row selection and CSV export, with full keyboard support.
- Mobile card view, 5 WCAG themes
- English and Telugu interface
- Server mode for lakhs of rows
<YuktaiGrid data={rows} columns={columns} rowKey="id" />Open the Grid demoTalk to your data
useAgenticGrid and AgenticGridBar turn plain sentences into real filters, sorting and summaries.
- Understands 10k, lakh and crore
- Group-by, trends, unusual rows
- Multi-step tasks: filter, then sort, then summarize
const grid = useAgenticGrid({ data: rows, columns, rowKey: "id" }) <AgenticGridBar grid={grid} />Grid assistant and WebMCP
A built-in chat and voice assistant for the grid. Teach it your own words, in any language.
- Voice input in 22 Indian languages
- Custom rules run before the built-in parser
- WebMCP: the same tools for browser AI agents
<YuktaiGrid ai webmcp inputLanguage="te-IN" customRules={rules} />Page agents
Small agents that test and explain any page, with results you can read and share.
- QA tester: 15 WCAG checks, 0–100 score
- Form review and design review
- Reports as Markdown or JSON
const report = runQaAudit() auditToMarkdown(report)Test your websiteAgenticPanel
Six page tools in one panel: Copilot, QA report, Forms, Design, Ask page and Voice.
- Drop it into any page
- Works on top of your existing layout
- Never audits its own panel
<AgenticPanel defaultTab="qa" voiceLang="en-IN" />Accessibility engine
WCAG 2.2 fixes that run in the browser, and a copilot that explains each issue first.
- Speak on focus, colour-blind modes, dyslexia font
- Large targets and skip links
- Every automatic fix can be undone
wcagPlugin.execute(config) createA11yCopilot().applyAllFixes()Voice commands
Control reading and accessibility settings by voice, in English and Telugu.
- “bigger text”, “next row”, “dark mode”
- Telugu phrases too
- Uses the browser's speech recognition
createVoiceA11yController({ lang: "te-IN" })Ask this page
Questions about the current page, answered in the browser.
- Gemini Nano on desktop Chrome
- Transformers.js on phones
- Keyword search keeps Telugu words whole
await askAboutPage("Which fields have no label?")Autonomous agent
Type a goal in plain English. It reads the page, plans the steps and highlights what to do.
- Works on old portals too
- Shows each step on the page
- You stay in control
showAgent()Vibe Coder
Describe a site and download a Next.js starter as a ZIP.
- Pure templates
- No AI writes the code
- Ready to run with npm run dev
showAgent() → Vibe Coder- New in 5.3
Plain HTML (vanilla JS)
Every module for pages without React: one script tag, built from the same source as the npm package.
- Grid, agents, panel and engine
- Installable, offline demo app
- CDN builds on jsDelivr and unpkg
<script src="https://cdn.jsdelivr.net/npm/@yuktishaalaa/yuktai@5/vanilla/index.min.js"></script>Open the live demo - New in 5.3
163 yuktai icons
One icon set for Next.js, React and plain HTML, safe in Server Components. Browse them all below.
- Outline and filled styles
- Glyph colour picked for 3:1 contrast
- Works in Windows High Contrast
import { HomeIcon } from "@yuktishaalaa/yuktai/icons"Browse the icons - New in 5.3
Switch a whole project
Scripts that move Material, Lucide, Feather and react-icons to yuktai icons, then show every pair side by side.
- Scan first, nothing changes
- Keeps sx, fontSize and color working
- Review page to check each icon
node use-yuktai-icons.mjs --dryHow it works Bring your own model
Everything works without AI keys. If you want, plug your own model into the same tools.
- generate and summarize hooks
- Your app decides what is sent
- Optional, never required
<AgenticPanel generate={(q, ctx) => myModel(q, ctx)} />Large datasets
The browser only ever holds one page of data, so the same grid scales to lakhs of rows.
- Server paging, search and sort
- 1,00,000 rows in the browser below
- 10,00,000 rows in the Grid demo
<YuktaiGrid serverMode onQueryChange={load} />See 10 lakh rows
All 163 yuktai icons
Pick a style, a colour and a size, then click any icon. The code it copies already has your choices in it. Filled icons choose a white or dark glyph automatically, so they keep at least 3:1 contrast.
<EyeOffIcon size={24} color="#047857" />163 of 163 icons · this colour on white: 5.5:1 (passes WCAG 3:1 for icons)
Live on real sites
These sites use yuktai icons for every icon, after switching with the yuktai scripts.
Test this page yourself
AgenticPanel puts six agents in one place: Copilot, QA report, Forms, Design, Ask page and Voice. Run the QA report on this very page and see what it finds.
Use it in your project
1. A grid with your own question bar (Next.js)
"use client";
import { YuktaiGrid, AgenticGridBar, useAgenticGrid } from "@yuktishaalaa/yuktai";
export default function VolunteersPage({ rows, columns }) {
// Plain-English questions → filters, sort, highlights, summaries
const grid = useAgenticGrid({ data: rows, columns, rowKey: "id" });
return (
<>
<AgenticGridBar grid={grid}
examples={["contributions over 100", "anything unusual?", "average contributions by role"]} />
<YuktaiGrid data={grid.gridData} highlightIds={grid.highlightIds} columns={columns} rowKey="id" />
</>
);
}2. The built-in assistant, with your own words in any language
<YuktaiGrid
data={rows}
columns={columns}
ai // built-in assistant: chat + voice
inputLanguage="te-IN" // voice input in Telugu (or any of 22 Indian languages)
webmcp // the same grid tools for browser AI agents
toolName="volunteers"
customRules={[{
name: "translators",
phrases: ["translators", "అనువాదకులు"], // teach it your own words
execute: async ({ executeTool }) =>
(await executeTool("filter", { key: "role", operator: "equals", value: "Translator" })).message,
}]}
/>3. Icons in Next.js
// Works in Server Components: no "use client" needed
import { HomeIcon, MicIcon, LampIcon, YuktaiIcon } from "@yuktishaalaa/yuktai/icons";
<button type="button" aria-label="Start voice"><MicIcon /></button>
<HomeIcon size={24} label="Home" />
<LampIcon variant="filled" color="#047857" size={32} />
<YuktaiIcon name="temple" />4. Plain HTML: one script tag
<div id="staff"></div>
<span data-icon="home"></span>
<script src="https://cdn.jsdelivr.net/npm/@yuktishaalaa/yuktai@5/vanilla/index.min.js"></script>
<script>
yuktai.renderGrid("#staff", { data: rows, columns, rowKey: "id", agentic: true, ai: true })
document.querySelectorAll("[data-icon]").forEach((el) => {
el.innerHTML = yuktai.icon(el.dataset.icon, 22)
})
</script>5. Switch an existing project to yuktai icons
npm install @yuktishaalaa/yuktai@latest
node use-yuktai-icons.mjs --dry # preview, writes nothing
node use-yuktai-icons.mjs # Material, Lucide, Feather, react-icons → yuktai
node review-yuktai-icons.mjs # original and yuktai icon, side by side
npx tsc --noEmitWorks with React 17–19, Next.js 13–16 and any HTML page. With React 19, install with --legacy-peer-deps if npm asks.
How it's being built
- Free time, real problems. Weekends and late nights. Every feature started with something that kept breaking on real websites: missing labels, forms older people couldn't finish, grids that broke on phones.
- Learning by doing. Reading the WCAG spec, browser APIs and other open-source code, then trying things until they worked on a real page.
- LLMs as study partners. Claude, GPT and Gemini helped explain ideas, find bugs and review code. The decisions, the testing and the mistakes stay human.
- Built in public. The code is on GitHub. Issues, ideas and pull requests from the community are welcome.
Honest limits: the agents understand questions with rules, so unusual phrasing may need rewording; smart grid questions are English-only for now; automatic checks don't replace testing with real users.
yuktai on XERJ
yuktai's author is a contributor on the XERJ Corpus Hub, and the yuktai repository has its own corpus page there.