Beadkit

Overview

Beadkit is an open-source set of composable primitives for AI-native agent and learning interfaces, distributed through the shadcn registry. It groups components into AI states, learning, and data and workspace sections, designed to work together rather than as isolated demos. The registry currently serves 27 items.

Its distinguishing piece is a learning layer: quizzes, flashcards, sequence builders and mastery meters that emit xAPI statements, plus a learning-stream component that parses learning payloads out of streaming model output and renders them inline while the response is still arriving. The site offers a copyable prompt for installing Beadkit through a coding agent, and publishes llms.txt.

Features

• Learning components: Quiz, flashcard, drag-to-order sequence and per-skill mastery bars, each emitting xAPI telemetry.
• Learning stream: Hydrates <LEARNING_COMPONENT> payloads from streamed model output into interactive UI.
• Agent states: Pixel-grid loading states, an expandable thinking trace, task rows and progressively revealed tool chips.
• Human in the loop: Approval cards with single and multi-select answers, and recommendation cards with a confidence meter and alternatives.
• Chat and composer: A tabbed AI SDK chat, a prompt bar with mentions, slash commands and attachments, and streaming text with citations.
• Data and workspace: Diff table with row-level accept or reject, sortable records table, filter table and sidebar navigation.
• Accessibility: Keyboard reordering, live-region announcements and reduced-motion support where motion is used.

Tech stack

• React, Tailwind CSS, shadcn registry
• Vercel AI SDK (chat component)
• xAPI telemetry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @beadkit/component-name