feat: AI SDK registry assistant (chat demo + log)

[alejopequeno]

Problem

The registry's headless <Chat> had no example of wiring it to a real AI backend, and there was no conversational way to discover registry items. We also lacked a log documenting the AI SDK message.parts pattern.

Root Cause

useChat reduces a stream into messages[].parts[], where each tool call carries its own frozen output. Rendering rich UI from part.output (instead of shared state) is the key pattern, but nothing in the registry demonstrated it.

Result

Adds a live, AI-powered registry assistant demo (demos/ai-sdk-chat, embedded via iframe in a new log) that wires the headless <Chat> to the Vercel AI SDK:

• Universal search: one searchComponents tool (lib/registry-search.ts) searches the whole registry — components, toolbox tools, logs, and lab experiments — and renders each with the registry's own cards (PreviewCard / ExperimentCard).
• Streaming UX: a "thinking" typing indicator while the model reasons, then a shimmer "Searching the registry…" state that morphs into result cards. Transform/opacity only, prefers-reduced-motion aware.
• Backend (app/api/chat/route.ts): streamText via Groq (openai/gpt-oss-120b) with Zod input validation; replies in the user's language; errors logged server-side, masked client-side.
• Log: content/logs/16-message-parts-as-render-anchors.mdx teaches the pattern with the live demo embedded.

The registry's <Chat> component is consumed unchanged.

Notes

• Requires GROQ_API_KEY in the environment (added to env.example). Free tier; swap the model in one line.
• Component/lab cards use the existing screenshot service (works on the deployed hub; placeholder locally where the screenshot bot is blocked). Toolbox/log cards render with icons everywhere.
• A demo-only ~2s tool delay keeps the shimmer visible (Groq is near-instant).

Greptile Summary

Adds a live AI-powered registry assistant demo (demos/ai-sdk-chat) wired to the Vercel AI SDK v6 and a new MDX log documenting the message.parts render pattern. The backend uses streamText via Groq with a searchComponents tool that performs keyword search across components, toolbox tools, logs, and lab experiments.

• API route (app/api/chat/route.ts): correctly uses AI SDK v6 idioms (toUIMessageStreamResponse, typed tool() with inputSchema, stopWhen: stepCountIs, smoothStream), but the in-memory rateHits Map provides no real protection in a multi-instance serverless deployment.
• Demo components: follow the message.parts rendering pattern correctly — typed tool-searchComponents parts, lifecycle-aware shimmer/cards transitions, and a prefers-reduced-motion fallback on every animation.

Confidence Score: 4/5

Safe to merge with one caveat: the rate limiter added to protect the Groq API key will not work correctly across multiple serverless instances.

The route adds an in-memory rate limiter, but in a Vercel multi-instance deployment each instance keeps its own counter, so a caller whose requests land on different instances sees no effective limit. The Groq key is exposed to exhaustion just as if the limiter weren't there. Everything else — demo components, search logic, AI SDK usage — looks correct and well-structured.

app/api/chat/route.ts — the isRateLimited function needs a durable backing store (e.g., Vercel KV) to be effective in production.

Important Files Changed

Filename	Overview
app/api/chat/route.ts	New AI chat API route — uses correct AI SDK v6 patterns (toUIMessageStreamResponse, stopWhen, tool), but the in-memory rate limiter is ineffective in multi-instance serverless deployments.
demos/ai-sdk-chat/index.tsx	Main chat demo component — correctly uses AI SDK v6 useChat/sendMessage/DefaultChatTransport patterns; icons next to sr-only text still missing aria-hidden (flagged in previous review).
demos/ai-sdk-chat/search-tool.tsx	Renders tool-part lifecycle (shimmer → cards → error) with a client-side minimum display duration; logic is correct.
lib/registry-search.ts	Simple keyword-match search over MDX source pages and lab experiments; straightforward and correct.
demos/ai-sdk-chat/result-cards.tsx	Renders search results as existing PreviewCard/ExperimentCard components with staggered entry animations using only opacity+transform.
demos/ai-sdk-chat/shimmer-row.tsx	Shimmer loading row with prefers-reduced-motion fallback; uses only transform/opacity as required by guidelines.
demos/ai-sdk-chat/thinking-row.tsx	Animated three-dot thinking indicator with role=status and aria-label; prefers-reduced-motion variant included.
demos/ai-sdk-chat/types.ts	Type definitions for AI SDK UIMessage with typed searchComponents tool — uses correct InferAgentUIMessage-style generic parameterization.

Comments Outside Diff (1)

1. demos/ai-sdk-chat/index.tsx, line 289-293 (link)

   Per the engineering guidelines, decorative icons that sit next to sr-only text need aria-hidden="true" so assistive technology doesn't announce the SVG on top of the visible label.

   Context Used: public/AGENTS.md (source)

   Prompt To Fix With AI

   This is a comment left during a code review.
   Path: demos/ai-sdk-chat/index.tsx
   Line: 289-293
   
   Comment:
   Per the engineering guidelines, decorative icons that sit next to `sr-only` text need `aria-hidden="true"` so assistive technology doesn't announce the SVG on top of the visible label.
   
   
   
   **Context Used:** public/AGENTS.md ([source](https://app.greptile.com/joyco/github/joyco-studio/hub/-/custom-context?memory=bd6e51dd-d00f-4964-8514-35f52767b2de))
   
   How can I resolve this? If you propose a fix, please make it concise.

   Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

_{Reviews (3): Last reviewed commit: "feat: animate streamed assistant markdow..." | Re-trigger Greptile}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
joyco-hub	Ready	Preview, Comment	Jun 17, 2026 7:39pm

[alejopequeno]

@greptileai

[matiasperz]

@greptile

[matiasperz]

Let's remove the "—"

[matiasperz]

This has to do with the CV problem but fits nowhere in this demo / explanation

[matiasperz]

I'd love to see a broader explanation about the AI sdk patten. How the event stream relates to the useChat hook, who owns the chat state? How does this srv -> client mechanism work overall.