Learning stream
Model output becomes native, interactive learning UI while the response is still arriving.
Open component →Open-source primitives for AI products
Interfaces that make agent work feel tangible.
Composable components for thinking, streaming, approvals, tools, data, and learning—built to work together instead of living as isolated demos.
Start with a prompt
Send copies an installation request for your coding agent.
Register Beadkit once in your shadcn project.
npx shadcn@latest registry add '@beadkit=https://beadkit.dev/r/{name}.json'Ready to copy into your coding agent.
npx shadcn@latest add @beadkit/learning-streamComponent gallery
Explore the system
Every tile is live. The catalog sidebar keeps the full library within reach.
Learning
Quiz
An inline concept check with immediate feedback. Emits an xAPI “answered” statement on submit — open the console to see it.
Open component →Concept check
Which HTTP method should be safely designed as idempotent?
Flashcard
A term on the front, the explanation on the back. Emits an xAPI “experienced” statement the first time it is revealed.
Open component →Flashcard
Click to reveal the answer
Sequence builder
Steps arrive shuffled and the learner drags them into order. Pointer, touch, and keyboard reach the same interaction, and submitting emits an xAPI “answered” statement carrying the submitted order.
Open component →Put it in order
Order the steps of an HTTP request.
- 1Negotiate TLS
- 2Receive the response
- 3Resolve the hostname via DNS
- 4Send the request
- 5Open a TCP connection
Mastery meter
The tutor's read on where the learner stands across a topic, plus a self-rating that emits an xAPI “rated” statement — the signal for what to teach next.
Open component →Where you are
REST fundamentals
50%- HTTP methods80%
- Idempotency60%
- Status codes40%
- Caching headers20%
Loading state
A compact, honest wait state for long-running AI work. Drive, Dots, and Orbit pair a pixel-grid signal with a shimmering label and drift-free elapsed time.
Open component →Preparing your lesson
Thinking
An expandable trace for steps, reasoning, searches, and code work. It reveals just enough progress to make the wait legible, then settles into a compact summary.
Open component →Reading the learner context
Approval card
A paged human-in-the-loop prompt with single- and multi-select answers, custom input, direct navigation, and a compact submitted state.
Open component →Agent approval
How many lesson variants should I prepare?
Tool chips
A compact, progressively revealed agent run. Tool rows disclose their details and settle into file-level diff summaries.
Open component →0 of 4 tool calls ready.
Task rows
Live agent tasks across pending, running, failed, and completed states, with expandable details, retry actions, and Capsule or List layouts.
Open component →Matched recent answers12/12
Reading lesson history3 files
Scoring misconceptions68%
Counterexampledraft
Knowledge checkdraft
Recommendation card
An agent suggestion with a confidence signal, an alternatives drawer, and a clear confirmation state that keeps the card stable.
Open component →Want me to adapt the next lesson?
Start with a focused retrieval exercise, then use the result to select the next lesson.
High confidence
Context cards
Retrieved knowledge chunks with compact metadata and delayed source attribution, ready for both live retrieval and settled output.
Open component →All chunks32
HTTP semantics290 characters
A request method is idempotent when multiple identical requests have the same intended effect as one request.
Learner history1,250 characters
The learner correctly identifies safe methods but still treats every idempotent method as read-only.
CSVRecent answers.csv
Code block
Agent-written code that resolves line by line, keeps long lines scrollable, and reports copy success or failure accessibly.
Open component →lesson.tsTypeScript
Streaming text
A paced answer with inline citations, source disclosure, response actions, and follow-up prompts. Reduced-motion preferences settle the response immediately.
Open component →Response streaming.
Follow-ups
Prompt bar
One composer API for Rounded and Pill layouts, with source mentions, slash commands, attachments, model selection, and dictation state.
Open component →Type @ for sources or / for commands.
Selection actions
A compact rewrite surface for highlighted text, with predefined or custom instructions, asynchronous results, retry, keep, and discard actions.
Open component →Retrieval practice works best when learners try to remember an idea before reviewing it.
Chat
A tabbed AI SDK conversation with typed learning tools, streamed Markdown, session details, and the same reusable prompt bar used elsewhere.
Open component →Learning playground
Typed UI tools over AI Gateway
B
What would you like to learn?
The tutor can explain in prose or place a native learning interaction directly in the conversation.
Messages
0
UI tool calls
0
Status
Ready
Active model
GPT-4o mini
Learning activities and setup questions travel as typed tool calls. Compatibility clients can continue to use the streaming tag protocol.
20 requests per hour per visitor. Playground responses may be inaccurate.
Diff table
AI-proposed tabular edits that arrive in stages, preserve native table semantics, and support row-level or bulk decisions.
Open component →Lesson plan changes
| Lesson | Reading level | Length | Decision |
|---|---|---|---|
| Retry semantics | Advanced | 18 min | |
| Cache validation | Intermediate | 10 min |
Review the proposed changes.
Records table
A CRM-style relationship grid with sorting, selection, compact tags, status signals, and linked records.
Open component →Learner relationships
| Website | ||||
|---|---|---|---|---|
| Ada Lovelace mentorsystems | 2026-08-27 | strong | https://example.com/ada | |
| Alan Turing theory | 2026-08-12 | none | — | |
| Grace Hopper compiler | 2026-08-24 | weak | https://example.com/grace | |
| Katherine Johnson mathematicsorbit | 2026-08-20 | very weak | — |
0 selected
Filter table
Status chips reorganize a live data set while keeping the underlying table readable, responsive, and keyboard accessible.
Open component →Content pipeline
| Content | Status | Updated |
|---|---|---|
| HTTP retry lesson | Draft | Today |
| Cache validation quiz | In review | Yesterday |
| Status code practice | Ready | Aug 26 |
| Method safety recap | Ready | Aug 25 |
Sidebar navigation
Workspace navigation with sections, counts, item actions, a quick-search trigger, and a compact collapsed mode.
Open component →Inbox selected
Search
Command-style workspace search with live filtering, arrow-key navigation, result selection, clearing, and a useful empty state.
Open component →4 results
Choose a result.
Insight cards
Paged agent observations with responsive live charts that support pointer scrubbing and keyboard exploration.
Open component →Short retrieval exercises are being finished more consistently than long lessons.
Practice completion is rising
PracticeLesson
Fine-tune card
A controlled or uncontrolled design inspector whose layout, size, radius, opacity, and type controls update a live preview.
Open component →Fine tune
Adjust
Layout
Choose layout
Preview
row · 320 × 96 · 100%