@yuktishaalaa/yuktai 5.1.0 → 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +137 -5
- package/package.json +9 -7
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @yuktishaalaa/yuktai
|
|
2
2
|
|
|
3
|
-
> Universal Next.js plugin for accessibility, AI, and data. One install brings WCAG 2.2 auto-fix, in-browser RAG, an AI agent, code generation,
|
|
3
|
+
> Universal Next.js plugin for accessibility, AI, and data. One install brings WCAG 2.2 auto-fix, in-browser RAG, an AI agent, code generation, an accessible data grid with Agentic AI + WebMCP, and an agentic toolkit that audits, explains and fixes pages and answers questions about your data. Zero API keys, zero cost, works offline.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@yuktishaalaa/yuktai)
|
|
6
6
|
[](https://www.npmjs.com/package/@yuktishaalaa/yuktai)
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
[](https://nodejs.org)
|
|
9
9
|
[](https://nextjs.org)
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Built in free time by [Sandeep Miriyala](https://github.com/sandeepmiriyala03).
|
|
12
12
|
|
|
13
13
|
**Live demos:**
|
|
14
14
|
- Staff directory: https://aksharatantra.miriyala.in/staffdirectory
|
|
@@ -28,7 +28,7 @@ So I built yuktai, one weekend and one late night at a time.
|
|
|
28
28
|
|
|
29
29
|
## What's inside
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
Six modules ship in a single npm package:
|
|
32
32
|
|
|
33
33
|
| Module | Features | What it does |
|
|
34
34
|
|---|---|---|
|
|
@@ -37,6 +37,118 @@ Five modules ship in a single npm package:
|
|
|
37
37
|
| **3. In-Tab RAG** | 11 | Ask questions about any page, offline, no API |
|
|
38
38
|
| **4. Autonomous AI Agent** | 13 | Natural-language browser guidance |
|
|
39
39
|
| **5. Vibe Coder** | 19 | Generate full Next.js projects from plain English |
|
|
40
|
+
| **6. Agentic AI Toolkit** 🆕 | 10 | Accessibility copilot, QA reports, form and design review, smart grid queries, BI answers, multi-step tasks, voice settings |
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## What's new in v5.1: Agentic AI Toolkit
|
|
45
|
+
|
|
46
|
+
Ten agentic features, all running in the browser. No API keys, and no page or grid data leaves the device unless you plug in your own model through a `generate` or `summarize` hook.
|
|
47
|
+
|
|
48
|
+
| # | Feature | What it does | Main export |
|
|
49
|
+
|---|---|---|---|
|
|
50
|
+
| 1 | Accessibility Copilot | Watches the page live, explains each issue in plain English, applies safe fixes and undoes them | `createA11yCopilot` |
|
|
51
|
+
| 2 | Page Understanding | Answers "What does this page do?" and "Which form fields are missing labels?" | `analyzePage`, `askAboutPage` |
|
|
52
|
+
| 3 | Smart Data Grid | Turns "overdue and over ₹10,000" into real filters, finds unusual rows, summarises data | `runGridQuery`, `detectAnomalies`, `summarizeRows` |
|
|
53
|
+
| 4 | Voice Accessibility | "Turn on high contrast", "bigger text", "next row", plus Telugu phrases like "పెద్ద అక్షరాలు" | `createVoiceA11yController` |
|
|
54
|
+
| 5 | QA Tester | 15 checks with WCAG references, a score, pass/fail, and a Markdown or JSON report | `runQaAudit`, `auditToMarkdown` |
|
|
55
|
+
| 6 | Forms Agent | Reviews labels, autocomplete, error messages and senior-friendliness | `reviewForms` |
|
|
56
|
+
| 7 | Page + Data RAG | Answers from page text and grid rows, Telugu-aware, offline | `createContextIndex` |
|
|
57
|
+
| 8 | Multi-Step Tasks | "Show overdue, highlight the errors, then summarise what changed" | `runTasks` |
|
|
58
|
+
| 9 | BI Copilot | "Which region had the highest drop in conversion this week?" | `askInsight`, `comparePeriods` |
|
|
59
|
+
| 10 | Design Review | Hierarchy, readability, focus states, clutter, consistency | `reviewDesign` |
|
|
60
|
+
|
|
61
|
+
### Page tools in one panel
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
"use client";
|
|
65
|
+
import { AgenticPanel } from "@yuktishaalaa/yuktai";
|
|
66
|
+
|
|
67
|
+
export default function A11yTools() {
|
|
68
|
+
return <AgenticPanel defaultTab="copilot" voiceLang="en-IN" />;
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Tabs: **Copilot**, **QA report**, **Forms**, **Design**, **Ask page**, **Voice**. The panel marks itself with `data-yuktai-panel`, so it never audits its own UI.
|
|
73
|
+
|
|
74
|
+
### Ask your grid
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
"use client";
|
|
78
|
+
import { YuktaiGrid, useAgenticGrid, AgenticGridBar } from "@yuktishaalaa/yuktai";
|
|
79
|
+
|
|
80
|
+
const columns = [
|
|
81
|
+
{ key: "name", label: "Customer" },
|
|
82
|
+
{ key: "status", label: "Status" },
|
|
83
|
+
{ key: "region", label: "Region" },
|
|
84
|
+
{ key: "balance", label: "Balance", type: "number" as const },
|
|
85
|
+
{ key: "dueDate", label: "Due date", type: "date" as const },
|
|
86
|
+
];
|
|
87
|
+
|
|
88
|
+
export default function Customers({ rows }: { rows: Customer[] }) {
|
|
89
|
+
const grid = useAgenticGrid({ data: rows, columns, rowKey: "id" });
|
|
90
|
+
|
|
91
|
+
return (
|
|
92
|
+
<>
|
|
93
|
+
<AgenticGridBar
|
|
94
|
+
grid={grid}
|
|
95
|
+
examples={[
|
|
96
|
+
"overdue and over ₹10,000",
|
|
97
|
+
"anything unusual?",
|
|
98
|
+
"total balance by region",
|
|
99
|
+
"show overdue, then sort by balance desc, then summarize what changed",
|
|
100
|
+
]}
|
|
101
|
+
/>
|
|
102
|
+
<YuktaiGrid
|
|
103
|
+
data={grid.gridData}
|
|
104
|
+
columns={columns}
|
|
105
|
+
rowKey="id"
|
|
106
|
+
highlightIds={grid.highlightIds}
|
|
107
|
+
autoScrollToHighlight
|
|
108
|
+
/>
|
|
109
|
+
</>
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
`grid.ask(text)` picks the right tool for the question:
|
|
115
|
+
|
|
116
|
+
| Question type | Example | Handled by |
|
|
117
|
+
|---|---|---|
|
|
118
|
+
| Filters and lookups | "customer starting with A and balance between 1k and 9k" | Smart grid query |
|
|
119
|
+
| Unusual data | "anything unusual?" | Outliers and duplicate rows |
|
|
120
|
+
| Group and period questions | "which region had the highest drop in conversion this week?" | BI copilot |
|
|
121
|
+
| Several steps | "show overdue, then highlight errors, then summarise" | Task runner, with a before/after report |
|
|
122
|
+
|
|
123
|
+
Amounts like `₹10,000`, `10k`, `1.5 lakh` and `2 crore` are understood.
|
|
124
|
+
|
|
125
|
+
### Use the functions directly
|
|
126
|
+
|
|
127
|
+
```ts
|
|
128
|
+
import { runQaAudit, auditToMarkdown, askInsight, runGridQuery } from "@yuktishaalaa/yuktai";
|
|
129
|
+
|
|
130
|
+
// In the browser: accessibility QA report
|
|
131
|
+
const report = runQaAudit();
|
|
132
|
+
console.log(report.score, report.passed);
|
|
133
|
+
const md = auditToMarkdown(report); // attach to a ticket or PR
|
|
134
|
+
|
|
135
|
+
// Anywhere: data questions
|
|
136
|
+
askInsight("which region had the highest drop in conversion this week", rows, columns).answer;
|
|
137
|
+
runGridQuery("overdue and over 10k", { data: rows, columns }).ids;
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### Plug in your own model (optional)
|
|
141
|
+
|
|
142
|
+
Everything works offline with rules and keyword search. To get model-written answers, pass a `generate` hook, for example Gemini Nano or your own API:
|
|
143
|
+
|
|
144
|
+
```tsx
|
|
145
|
+
<AgenticPanel generate={async (question, context) => myModel(question, context)} />
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Honest limits
|
|
149
|
+
|
|
150
|
+
- Questions are understood with rules, not a language model, so unusual phrasing may need rewording. The parser returns `notes` explaining any assumption it made.
|
|
151
|
+
- The QA and design checks are automatic heuristics. They catch common problems but don't replace testing with real users and assistive technology.
|
|
40
152
|
|
|
41
153
|
---
|
|
42
154
|
|
|
@@ -160,6 +272,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|
|
160
272
|
|
|
161
273
|
That's it. Floating buttons appear on every page: ♿ opens the accessibility panel, 💬 opens "Ask this page", and the agent button opens the AI agent.
|
|
162
274
|
|
|
275
|
+
To add the v5.1 agentic tools, place `<AgenticPanel />` or `useAgenticGrid` in any client component (see [What's new in v5.1](#whats-new-in-v51-agentic-ai-toolkit)).
|
|
276
|
+
|
|
163
277
|
### Wrapper props
|
|
164
278
|
|
|
165
279
|
| Prop | Type | Default | Description |
|
|
@@ -278,6 +392,7 @@ export default function EmployeesPage() {
|
|
|
278
392
|
- Keyboard navigation, ARIA grid semantics, 44×44 targets
|
|
279
393
|
- English and Telugu UI
|
|
280
394
|
- Embedded Grid AI Assistant with voice and chat
|
|
395
|
+
- **New in v5.1:** compound natural-language questions, anomaly detection and BI answers through `useAgenticGrid`
|
|
281
396
|
|
|
282
397
|
### Grid AI Assistant
|
|
283
398
|
|
|
@@ -485,6 +600,8 @@ Retrieval-Augmented Generation running entirely in the browser. It extracts text
|
|
|
485
600
|
|
|
486
601
|
**What I learned:** Transformers.js kept crashing on iOS Safari with out-of-memory errors. Quantization (same model, 75% smaller) fixed it. DistilBERT gave short, useless spans; `flan-t5-small` gives real sentences.
|
|
487
602
|
|
|
603
|
+
**New in v5.1:** `createContextIndex` also searches grid rows (including rows on other pages of the grid) and your own documents, with keyword search that handles Telugu and Hindi script correctly.
|
|
604
|
+
|
|
488
605
|
---
|
|
489
606
|
|
|
490
607
|
## Module 4: Autonomous AI Agent
|
|
@@ -514,6 +631,19 @@ No AI writes the code. It's pure template engineering.
|
|
|
514
631
|
|
|
515
632
|
---
|
|
516
633
|
|
|
634
|
+
## Module 6: Agentic AI Toolkit 🆕
|
|
635
|
+
|
|
636
|
+
The ten v5.1 features, described in detail in [What's new in v5.1](#whats-new-in-v51-agentic-ai-toolkit).
|
|
637
|
+
|
|
638
|
+
- **Copilot and QA:** 15 WCAG checks, plain-English explanations, safe fixes with undo, downloadable reports
|
|
639
|
+
- **Forms and design review:** labels, autocomplete, error messages, focus states, hierarchy, clutter, senior-friendly tips
|
|
640
|
+
- **Data:** compound grid questions, outliers and duplicates, group-by, period comparison, trends
|
|
641
|
+
- **Automation:** multi-step instructions with a before/after summary
|
|
642
|
+
- **Voice:** accessibility settings and grid row navigation by voice, in English and Telugu
|
|
643
|
+
- **React:** `AgenticPanel`, `AgenticGridBar`, `useAgenticGrid`
|
|
644
|
+
|
|
645
|
+
---
|
|
646
|
+
|
|
517
647
|
## Gemini Nano setup (desktop Chrome, one time)
|
|
518
648
|
|
|
519
649
|
Needed only for Gemini Nano features on desktop Chrome. Mobile and other browsers use Transformers.js automatically.
|
|
@@ -559,6 +689,7 @@ Props: `size` (default 20), `color` (default `currentColor`), `strokeWidth` (def
|
|
|
559
689
|
- **Zero framework lock-in.** `core/renderer.ts` has no framework imports.
|
|
560
690
|
- **Never reads its own UI.** Panels are marked with `data-yuktai-panel`.
|
|
561
691
|
- **SSR safe.** No `window` errors on the server.
|
|
692
|
+
- **Every automatic fix can be undone.** The v5.1 copilot records each change it makes.
|
|
562
693
|
- **Honest limits.** Client-side pagination is for a few thousand rows; use server-side beyond that.
|
|
563
694
|
|
|
564
695
|
---
|
|
@@ -576,8 +707,9 @@ Props: `size` (default 20), `color` (default `currentColor`), `strokeWidth` (def
|
|
|
576
707
|
|
|
577
708
|
## Roadmap
|
|
578
709
|
|
|
710
|
+
- **Shipped (v5.1):** Agentic AI Toolkit: accessibility copilot, QA reports, form and design review, smart grid queries, BI answers, multi-step tasks, page + data RAG, voice accessibility commands
|
|
579
711
|
- **Shipped (v4.6.4):** YuktaiGrid Agentic AI + WebMCP, embedded Grid AI Assistant, English/Telugu UI, page-size switching, icon polish
|
|
580
|
-
- **Next:**
|
|
712
|
+
- **Next:** expose the v5.1 agentic tools through WebMCP, more Grid Agent tools, multilingual RAG (Telugu, Hindi, Tamil, Bengali)
|
|
581
713
|
- **Later:** RTL support, richer browser-native AI, multimodal grid experiences
|
|
582
714
|
|
|
583
715
|
---
|
|
@@ -601,6 +733,6 @@ Issues and pull requests are welcome at [github.com/sandeepmiriyala03/yuktai](ht
|
|
|
601
733
|
|
|
602
734
|
ISC © Sandeep Miriyala, [Yuktishaalaa AI Lab](https://github.com/sandeepmiriyala03)
|
|
603
735
|
|
|
604
|
-
Built in free time
|
|
736
|
+
Built in free time. AI coding assistants (Claude, GPT and Gemini) helped me learn, and helped write and test parts of the code. Every design decision, review and release is mine.
|
|
605
737
|
|
|
606
738
|
**Free forever. Open source. Built for every user.** 🏺
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yuktishaalaa/yuktai",
|
|
3
|
-
"version": "5.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "5.2.0",
|
|
4
|
+
"description": "Next.js accessibility, AI and data toolkit: WCAG 2.2 auto-fix, agentic data grid, accessibility copilot, QA reports and in-browser RAG. Zero API keys.",
|
|
5
5
|
"author": "Sandeep Miriyala — Yuktishaalaa AI Lab",
|
|
6
6
|
"license": "ISC",
|
|
7
7
|
"homepage": "https://aksharatantra.miriyala.in",
|
|
@@ -20,7 +20,11 @@
|
|
|
20
20
|
"on-device-ai",
|
|
21
21
|
"transformers",
|
|
22
22
|
"rag",
|
|
23
|
-
"gemini-nano"
|
|
23
|
+
"gemini-nano",
|
|
24
|
+
"agentic-ai",
|
|
25
|
+
"data-grid",
|
|
26
|
+
"webmcp",
|
|
27
|
+
"telugu"
|
|
24
28
|
],
|
|
25
29
|
"main": "./dist/index.js",
|
|
26
30
|
"module": "./dist/index.mjs",
|
|
@@ -45,9 +49,7 @@
|
|
|
45
49
|
"prepublishOnly": "npm run build"
|
|
46
50
|
},
|
|
47
51
|
"dependencies": {
|
|
48
|
-
"
|
|
49
|
-
"jszip": "^3.10.1",
|
|
50
|
-
"next": "^16.4.2"
|
|
52
|
+
"jszip": "^3.10.1"
|
|
51
53
|
},
|
|
52
54
|
"peerDependencies": {
|
|
53
55
|
"react": ">=17.0.0",
|
|
@@ -79,4 +81,4 @@
|
|
|
79
81
|
"Chrome >= 113",
|
|
80
82
|
"Edge >= 113"
|
|
81
83
|
]
|
|
82
|
-
}
|
|
84
|
+
}
|