WorkflowShowcase

section · interactive (ships a small web component) · no children. All components: component playground.

Description for the model

Tabs of realistic windows (a terminal, an agent session, a chat with tool calls, an API call, the studio) whose commands and answers are typed line by line, to show that the product can be run from agents and the command line as well as the UI. Each tab may carry a status badge; unbuilt interfaces must be labelled.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "WorkflowShowcase",
  "props": {
    "id": "agents",
    "eyebrow": "run it from anywhere",
    "title": "Manage your academy from Claude, Claude Code or your terminal",
    "intro": "Use Claude Code, Claude or any MCP-compatible agent, the command line or the API. The studio is one way to run ulams, not the only one.",
    "valueLine": "One platform, every interface your team already works in.",
    "legal": "Claude and Claude Code are products of Anthropic. ulams is independent and not affiliated with or endorsed by Anthropic.",
    "description": "Five ways to run ulams: Claude Code, Claude with the ulams MCP server, the ulams command line, the REST API and SDK, and the studio.",
    "footnote": "The ulams CLI and MCP server are being built. The commands and tool names shown for them are the planned interface and may change; the REST API and the studio work today.",
    "tabs": [
      {
        "key": "claude-code",
        "label": "Claude Code",
        "status": "coming",
        "window": "terminal",
        "title": "claude · ~/oncall-academy",
        "caption": "Describe the course in plain language. Claude Code runs the ulams CLI, shows you the outline, and publishes only after you approve.",
        "note": "Planned interface: the ulams CLI is being built (Phase 7). Commands are shown as designed and may change.",
        "lines": [
          {
            "kind": "prompt",
            "text": "Build a 3-lesson course on incident response from ./runbook.md and publish it to oncall"
          },
          {
            "kind": "agent",
            "text": "I'll start a builder run on runbook.md and bring you the outline before anything goes live."
          },
          {
            "kind": "tool",
            "text": "Bash",
            "args": "ulams builder start --source runbook.md --tenant oncall --json"
          },
          {
            "kind": "spin",
            "text": "Reading runbook.md, drafting the outline"
          },
          {
            "kind": "out",
            "text": "{\"run\":\"b_7f3a\",\"status\":\"outline_ready\",\"lessons\":3,\"cited_sections\":12}"
          },
          {
            "kind": "agent",
            "text": "Outline ready: 1. Detect and declare, 2. Triage and mitigate, 3. Write the postmortem. Every lesson cites runbook.md. Approve and publish?"
          },
          {
            "kind": "prompt",
            "text": "Yes, approve and publish."
          },
          {
            "kind": "tool",
            "text": "Bash",
            "args": "ulams builder approve-outline b_7f3a --json"
          },
          {
            "kind": "out",
            "text": "{\"run\":\"b_7f3a\",\"status\":\"drafted\",\"topics\":9,\"uncited\":0}"
          },
          {
            "kind": "tool",
            "text": "Bash",
            "args": "ulams courses publish --run b_7f3a --tenant oncall --json"
          },
          {
            "kind": "out",
            "text": "{\"course\":17,\"status\":\"published\",\"tenant\":\"oncall\"}"
          },
          {
            "kind": "agent",
            "text": "Done. Incident response is live on oncall: 3 lessons, 9 topics, every claim cited to runbook.md."
          }
        ]
      },
      {
        "key": "claude-mcp",
        "label": "Claude + MCP",
        "status": "coming",
        "window": "chat",
        "title": "Claude · ulams MCP server",
        "caption": "Ask Claude, or any MCP-compatible agent, about your academy. It uses the ulams MCP server and asks before it sends anything.",
        "note": "Planned interface: the ulams MCP server is being built (Phase 7). The at-risk report depends on learner analytics (Phase 4), which is not built yet.",
        "lines": [
          {
            "kind": "user",
            "text": "Which learners are stuck in On-Call this week? Nudge them."
          },
          {
            "kind": "tool",
            "text": "ulams.analytics.at_risk",
            "args": "tenant: oncall, days: 7",
            "result": "4 learners"
          },
          {
            "kind": "assistant",
            "text": "Four learners have not moved in 7 days, all on lesson 2, Triage and mitigate. I can send each a short reminder with a link back to the lesson. Send it?"
          },
          {
            "kind": "user",
            "text": "Yes, send."
          },
          {
            "kind": "tool",
            "text": "ulams.notifications.send",
            "args": "template: nudge, learners: 4",
            "result": "4 sent"
          },
          {
            "kind": "assistant",
            "text": "Done. Four reminders are on their way."
          }
        ]
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
eyebrow	string		Small label above the title. max length 80
title	string		Section title. max length 160
intro	string		One or two sentences under the title. max length 600
valueLine	string		One line of value copy under the tabs. max length 200
description	string		Text alternative of the whole animation for screen readers. max length 600
footnote	string		Small print under the tabs, e.g. that some commands are the planned interface. max length 300
legal	string		Trademark line, e.g. that product names belong to their owners and are not endorsements. max length 300
tabs	array of objects	yes	Tabs. min 1 items, max 6 items
tabs[].key	string	yes	Stable key (letters, digits, dashes). max length 24
tabs[].label	string	yes	Tab label. max length 24
tabs[].status	"available" | "preview" | "coming"		Status badge; omit when everything shown exists
tabs[].window	"terminal" | "chat" | "studio"		Look of the window frame. default "terminal"
tabs[].title	string	yes	Window title. max length 60
tabs[].caption	string		One line under the window. max length 200
tabs[].note	string		Honest note under the caption, e.g. what the example depends on. max length 200
tabs[].lines	array of objects	yes	Lines, in order. min 1 items, max 30 items
tabs[].lines[].kind	"prompt" | "cmd" | "cont" | "agent" | "out" | "spin" | "tool" | "add" | "del" | "ctx" | "note" | "user" | "assistant" | "card"	yes	Line type: typed (prompt, cmd, cont, agent, user, assistant) or shown whole
tabs[].lines[].text	string	yes	The line. max length 400
tabs[].lines[].args	string		Tool arguments, or the buttons of a card separated by |. max length 200
tabs[].lines[].result	string		Short tool result shown after the call. max length 120
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Manage your academy from Claude, Claude Code or your terminal
Use Claude Code, Claude or any MCP-compatible agent, the command line or the API. The studio is one way to run ulams, not the only one.
Claude Code
Claude + MCP

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "tabs": []
}

Issues:

• /tabs fewer than 1 items

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 20 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.