Natural-Language Ticket Filtering with Generative UI

Overview

A build that lets a user ask for GitHub project tickets in plain language (“how many open bugs does each person have”) and get back a filtered, correctly rendered view. The model never writes text or code; it answers a set of typed questions, and deterministic application code performs the filtering and picks the UI.

Why It Exists

Board filters in project-management tools are powerful but require learning a query syntax and clicking through many controls. We wanted to test whether an LLM could act purely as a structured interpreter, turning one sentence into a typed filter spec and a view choice, while keeping every decision inspectable and correctable by the user. The build also evaluates typesafe.ai as a way to get probabilistic, typed answers rather than free-form generation.

What We Built

A small Next.js application with three clearly separated modules under src/lib:

• github.ts pulls every item from a GitHub Projects v2 board via GraphQL and caches the result for five minutes.
• interpret.ts sends the user’s sentence to typesafe.ai as a single fan-out call: one question per filter dimension (status, labels, assignee, and so on), a paired “was this mentioned?” yes/no for each optional dimension, one yes/no per known label and assignee, plus view type, grouping, sort and limit.
• filter.ts applies the resulting typed spec deterministically to the cached items.

The React UI (src/app, src/components) shows what was understood as removable chips with their confidence, surfaces low-confidence decisions alongside the model’s alternatives, and renders the result as a list, board, table or chart depending on the view the interpreter chose.

Technologies & Approach

TypeScript throughout, on Next.js 16 with React 19 and Tailwind CSS 4. The @typesafe-ai/sdk is used instead of a chat completion API so that every model output is a typed answer with a probability, which makes the interpretation step testable and lets the UI expose uncertainty honestly. GitHub access uses a read-scoped token against the Projects v2 GraphQL endpoint; no database is involved.

Outcome / Impact

The build validated a “typed interpreter, not text generator” pattern for generative UI: the model chooses the filter values and the presentation, code enforces correctness, and users can see and undo each inferred decision. It is a reusable template for adding natural-language querying on top of any structured dataset without giving an LLM free rein over the output.

Capabilities Demonstrated

• Natural-language querying over structured project data
• Generative UI where the model selects the view (list, board, table, chart) and code renders it
• Confidence-aware UX that exposes low-certainty decisions and alternatives
• Fan-out typed classification with typesafe.ai instead of free-text LLM output
• GitHub Projects v2 GraphQL integration with lightweight caching