YuktaiDocs v5.3.12

Grid agents

Grid agents

Ask your data in plain words. YuktAI turns a question into filters, sorting and summaries with rules, not a remote model, so it is instant, private and gives the same answer every time.

1. Question bar and assistant on a grid

Try the example buttons, or type your own question. The assistant (the chat button inside the grid) also takes voice and Telugu custom rules such as ఎక్కువ జీతం.

Live demo

Loading…

WebMCP: checking…

app/staff/page.tsx
"use client"
import { YuktaiGrid, useAgenticGrid, AgenticGridBar } from "@yuktishaalaa/yuktai"
import { rows, columns } from "./data"

export default function StaffPage() {
  // The question bar filters/sorts the rows; the grid shows the result.
  const agent = useAgenticGrid({ data: rows, columns, rowKey: "id" })
  return (
    <main>
      <AgenticGridBar
        grid={agent}
        examples={["salary over 1 lakh", "Engineering in Hyderabad", "average salary by department"]}
      />
      <YuktaiGrid
        data={agent.gridData}
        highlightIds={agent.highlightIds}
        columns={columns}
        rowKey="id"
        ai
        inputLanguage="en-IN"
        webmcp
        toolName="staff_grid"
        customRules={[
          {
            name: "high-earners",
            phrases: ["high earners", "ఎక్కువ జీతం", "ज़्यादा वेतन"],
            execute: async ({ executeTool }) =>
              (await executeTool("filter", { key: "salary", operator: "greaterThan", value: 100000 })).message,
          },
        ]}
      />
    </main>
  )
}

2. Agent without the grid (your own table)

Use the question bar with any table: the agent gives you the rows to show and the IDs to highlight.

Live demo

app/MyTable.tsx
"use client"
import { useAgenticGrid, AgenticGridBar } from "@yuktishaalaa/yuktai"

export function MyTable({ rows, columns }) {
  const agent = useAgenticGrid({ data: rows, columns, rowKey: "id" })
  return (
    <>
      <AgenticGridBar grid={agent} examples={["salary under 60k", "total salary by city"]} />
      <table>
        <tbody>
          {agent.gridData.map((r) => (
            <tr key={r.id} aria-current={agent.highlightIds.includes(String(r.id)) || undefined}>
              <td>{r.name}</td><td>{r.city}</td><td>{r.salary}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  )
}


3. Grid tools and the phrase agent


The grid tools (search, count, columns, get row, filter, clear filters, sort, clear sort, plus highlight, select and open when you pass their handlers: up to 11) can be driven by the phrase agent, by your own code, or by a browser AI agent through WebMCP. Results are always { success, message, data?, error? } and never throw.


Live demo

  

    

    
  

  

  
lib/staffAgent.ts
import { createGridTools, useYuktaiGridAgent, parseGridIntent } from "@yuktishaalaa/yuktai"

// In a component: const agent = useYuktaiGridAgent({ tools, columns, customRules, locale: "te" })
const tools = createGridTools(
  { data: rows, columns, rowKey: "id", onFiltersChange: setFilters, onSortChange: setSort },
  { name: "staff_grid" }
)
const result = await tools.find((t) => t.name.endsWith("count")).execute({})
parseGridIntent("sort by salary desc", { columns })   // which tool to run, with its arguments


4. Multi-step tasks


Join steps with “then”: YuktAI plans the steps, runs them in order on the data and reports each one.


Live demo

  

    

    
  

  
lib/tasks.ts
import { planTasks, runTasks, toGridToolColumns } from "@yuktishaalaa/yuktai"

const plan = planTasks("show salary over 1 lakh, then sort by joined, then summarize")
const result = await runTasks(
  "show salary over 1 lakh, then sort by joined, then summarize",
  { data: rows, columns: toGridToolColumns(columns), rowKey: "id" },
  { onStep: (step, i, total) => console.log(`${i + 1}/${total}`, step.message) }
)


Questions it understands