YUKTISÁRATHI · yuktai

XERJ Corpus Hub contributor

Accessible, agentic web apps — in plain HTML

The yuktai 5.3 toolkit for any web page: a data grid you can talk to, page agents that test and explain the page, and accessibility fixes. One script file, no framework, no API keys, and no yuktai servers.

“Not a tool, but a torch for your inner Mahabharata.”

Same engine as npm

The parser, BI answers, task runner, QA audit, copilot, form and design review are bundled from the package source, so answers match the React version.

Large data example

1,000 generated staff rows. Select rows to see the count change.

1,000Sample rows
0Selected rows

Floating tools

Bottom corner: accessibility settings and page tools (QA, forms, design, ask, voice).

Honest limits: questions are understood with rules, not a language model, so unusual phrasing may need rewording. Telugu and Hindi data questions use custom rules. QA and design checks are heuristics: still test with a keyboard and a screen reader. WebMCP works only where the browser provides document.modelContext. For 100K+ rows, page on the server.

1. Agentic data grid

Search, sort, page, select and export, plus two ways to ask: the question bar (filters, BI answers, multi-step tasks) and the grid assistant (custom rules → phrase parser → grid tools, with voice). Keyboard: Tab into the table, then arrow keys, Home/End, Ctrl+Home/End, Page Up/Down, Space to select, Enter to open.

Last assistant action will appear here.

2. తెలుగు గ్రిడ్ — రంగురంగుల రత్నదీపాలు

మిరియాల రామకృష్ణ గారి 27 బాలల గేయాలు. Telugu UI with locale: "te-IN", Telugu tool messages, Telugu voice input and custom rules. ప్రయత్నించండి: “ఎన్ని”, “పెద్ద పద్యాలు”, “పంక్తులు ప్రకారం క్రమం”, “ఫిల్టర్లు తీసేయి”, “సహాయం”.

3. Ask questions without a grid

createAgenticGrid() is the vanilla useAgenticGrid. Use it with any table you already have: it gives back gridData, highlightIds, the answer, a BI table and task steps.

4. Page tools (AgenticPanel)

Copilot, QA report, Forms, Design, Ask page and Voice, mounted inline with yuktai.mountAgenticPanel("#page-tools"). The same panel opens from the button. The practice form below has deliberate problems for the tools to find.

Practice form (deliberate problems)

Insert a form with one unlabeled field and an email without an autocomplete hint, then run “Forms”, “QA report” or “Ask page → Which fields have no label?”. Turn on → “Auto-fix page” to watch the engine repair new content.

5. Accessibility engine

The button runs the yuktai engine (wcagPlugin): WCAG auto-fixes, high contrast, dark mode, reduced motion, 44×44 targets, colour-blind filters, dyslexia font, text size 80–130%, skip links and speak-on-focus. Choices are saved on this device.

yuktai.apply({ highContrast: true, fontSizeMultiplier: 1.2 })
yuktai.reset()
yuktai.getSettings()   // { highContrast, darkMode, reduceMotion, largeTargets, dyslexiaFont, colorBlindMode, fontSizeMultiplier, … }

6. Core functions (same as npm)

Each button runs one function on the staff data and prints the real result. Open the browser console to try your own: everything is on window.yuktai.

Pick a function above.

7. WebMCP status

The staff grid registers its 11 tools for browser AI agents when the browser supports WebMCP. This shows the real status; nothing is faked.

Checking…

8. Inline SVG icons

Bundled inside index.js; no icon font or CDN. yuktai.icon("search", 24) returns SVG markup (decorative), or pass a label: yuktai.icon("check", 20, "Done").

9. Copy-paste examples

<script>window.YUKTAI_CONFIG = { position: "right", showPageTools: true, voiceLang: "te-IN" }</script>
<script src="./index.js"></script>

// Grid with everything on
const grid = yuktai.renderGrid("#staff", {
  data: rows,
  rowKey: "id",
  columns: [
    { key: "name", label: "Name" },
    { key: "salary", label: "Salary", type: "number", render: (v) => "₹" + Number(v).toLocaleString("en-IN") },
    { key: "joined", label: "Joined", type: "date" },
    { key: "status", label: "Status", type: "badge" },
  ],
  locale: "en-IN",            // or "te-IN" (Telugu UI and messages)
  theme: "default",           // high-contrast | dark | color-blind | dyslexia
  view: "auto",               // table | card | auto
  pagination: { pageSize: 20, showSizeChanger: true, sizeOptions: [10, 20, 50, 100] },
  agentic: { examples: ["salary over 1 lakh", "anything unusual?"] },   // question bar
  ai: true, inputLanguage: "te-IN",                                    // assistant: chat + voice
  customRules: [{ name: "high-earners", phrases: ["high earners", "ఎక్కువ జీతం"],
    execute: async ({ executeTool }) => (await executeTool("filter", { key: "salary", operator: "greaterThan", value: 100000 })).message }],
  webmcp: true, toolName: "my_staff_grid",
  onWebMCPStatusChange: (s) => console.log(s.state),
  onRowClick: (row) => openDetails(row),
  onSelectionChange: (keys) => console.log(keys),
  onAgentResult: (r) => console.log(r.message),
})

await grid.ask("salary over 1 lakh in Hyderabad")   // "… row(s) found. Showing rows where …"
await grid.executeTool("sort", { key: "salary", direction: "desc" })
grid.highlight(["1001", "1002"]); grid.getSelectedRows(); grid.exportCSV()
grid.setTheme("dark"); grid.setView("card"); grid.refresh(newRows); grid.destroy()

// Page agents
yuktai.runQaAudit().score
yuktai.auditToMarkdown(yuktai.runQaAudit())
yuktai.reviewForms({ seniorFriendly: true })
yuktai.reviewDesign({ minFontSize: 16 })
await yuktai.askAboutPage("Which fields have no label?")
const copilot = yuktai.createA11yCopilot({ onUpdate: console.log }); copilot.scan(); copilot.applyAllFixes(); copilot.undoAll()
const voice = yuktai.createVoiceA11yController({ lang: "te-IN" }); await voice.handle("పెద్ద అక్షరాలు")
yuktai.mountAgenticPanel("#tools", { defaultTab: "qa", voiceLang: "te-IN" })

Row details