Shuffle MCP — library demo
Six self-contained components from @shuffleio/shuffle-mcps. Expand "Show source" under each section to see the exact code that produced it.
1. Agent UI — start & debug
<AgentUI /> — modern hero "What do you want to do?" prompt with MCP/app chips, plus a live decision timeline for debugging in-flight runs. Resumes from ?execution_id&authorization URL params.
1b. Agent Run drawer
<AgentRunDrawer /> — right-side drawer hosting the same AgentUI in a compact tab. Permissions and Local LLM tabs are slot-driven, so the drawer is fully standalone (no host context required).
2. Inline search
<ShuffleMCP /> — Algolia + private apps merged into one searchable list.
3. Search drawer
<AppSearchDrawer /> — the exact same drawer used on /incidents → "Add Ingestion Source".
4. App detail / config drawer
<AppDetailDrawer /> — auth + MCP "try it out" for a single app.
5. Authentication (standalone)
<AppAuthSection /> + useAppLookup() — drop the auth card anywhere by passing just an app name.
App name:
Authentication
No authentication configured yet
6. Try MCP (standalone)
<TryMcpSection /> — chat against an app's MCP tools. Resolves icon + id from the app name.
App name:
Try MCP
Try it out
›
7. Try individual actions (standalone)
<SingulActionsPreview /> — full curl/python catalog with Play. Sorts the app's category to the top.
App name:
Try individual actions (67)
Action
8. Agent activity list
<AgentActivityList /> — past agent executions with search and status filters (All / Completed / Running / Failed). Click any row to open <AgentExecutionDrawer /> with the pre-loaded run.
No agent activity found
The agent has not performed any actions yet
9. Agents view (full page)
<AgentsView /> — drop-in /agents page: hero AgentUI, edit-existing toggle, prefill from URL, and an embedded activity list. Requires an onSchedule callback so the host can create the underlying scheduled workflow.
No agent activity found
The agent has not performed any actions yet
10. App title header
<AppTitleHeader /> — the standard app banner (icon, name, categories, Verified/Pending chip, Activate / + Add button) used at the top of any app detail surface.
S
Slack
11. Pipelines banner
<ShufflePipelinesBanner /> — small promo banner pointing users at Shuffle Pipelines / Tenzir. No props.
12. Usage bar
<UsageBar /> — compact reusable quota indicator (app runs, agent tokens, storage). Neutral by default, turns amber at 65% and red at 100%.
App runs
1,240 / 2,000 runs
Agent tokens
185,000 / 200,000 tokens