Learning surface

Define agents, connect workflows, inspect handoffs.

Agent Workflow Studio

A browser-based learning tool where students define simple AI agents, connect them into workflows, and inspect the result without writing code first.

1. Define agents

Give each agent one clear job, the input it needs, and the output it should produce.

2. Add time slots

Use the same time slot for agents that work in parallel and different slots for handoffs over time.

3. Compare examples

Study the bundled workflows to see the difference between sequential and parallel execution.

Agents

Workflows

Agent actions

Learning stages

Current stage

Start with worked examples

Study the bundled workflows first so the ideas of roles, time slots, and handoffs feel concrete before you build your own.

Explore examples

Study bundled workflows before building

Start here to see how agent roles, shared time slots, and handoff packets work before you write your own workflow. The examples are meant to be borrowed from and compared, not treated as fixed templates.

Workflow

Prepare a seminar briefing

A short seminar briefing with verified sources and clear talking points.

Planner
Researcher
Source Checker
Writer
Reviewer

T1

Single active agent

Next slot: T2

Planner

Break the seminar topic into sections, decisions, and evidence needs.

Handoff: Pass the structure to Researcher and Source Checker.

Feeds into T2
T2

2 agents work in parallel

Next slot: T3

Researcher

Gather concepts, examples, and candidate references for each section.

Handoff: Pass the collected notes to Writer.

Feeds into T3

Source Checker

Verify the strongest references and flag any weak or missing citations.

Handoff: Pass the verified source list to Writer.

Feeds into T3
T3

Single active agent

Next slot: T4

Writer

Assemble the final briefing draft using the research notes and checked sources.

Handoff: Pass the briefing draft to Reviewer.

Feeds into T4
T4

Single active agent

Final slot

Reviewer

Check the briefing for clarity, evidence quality, and missing transitions.

Handoff: Deliver the revised seminar briefing as the workflow outcome.

Outcome: A short seminar briefing with verified sources and clear talking points.

Workflow

Build an exam revision pack

A compact revision pack with notes and practice questions.

Planner
Researcher
Quiz Maker
Reviewer

T1

Single active agent

Next slot: T2

Planner

Turn the exam scope into a list of topics and learning goals.

Handoff: Pass the topic list to Researcher and Quiz Maker.

Feeds into T2
T2

2 agents work in parallel

Next slot: T3

Researcher

Write short notes that explain the key ideas for each topic.

Handoff: Pass the study notes to Reviewer.

Feeds into T3

Quiz Maker

Create practice questions that match the same topic list.

Handoff: Pass the question set to Reviewer.

Feeds into T3
T3

Single active agent

Final slot

Reviewer

Check that the notes and quiz cover the same ideas and use clear wording.

Handoff: Deliver the finished revision pack as the workflow outcome.

Outcome: A compact revision pack with notes and practice questions.

Workflow

Turn a project into a presentation

A presentation outline with a supporting narrative and slide structure.

Planner
Writer
Slide Designer
Reviewer

T1

Single active agent

Next slot: T2

Planner

Define the project story, audience goal, and the sections the presentation needs.

Handoff: Pass the section plan to Writer and Slide Designer.

Feeds into T2
T2

2 agents work in parallel

Next slot: T3

Writer

Draft the spoken explanation for each section of the presentation.

Handoff: Pass the speaking notes to Reviewer.

Feeds into T3

Slide Designer

Sketch the slide sequence, titles, and the visual support each point needs.

Handoff: Pass the slide structure to Reviewer.

Feeds into T3
T3

Single active agent

Final slot

Reviewer

Check that the spoken story and slide structure support each other.

Handoff: Deliver the presentation outline as the workflow outcome.

Outcome: A presentation outline with a supporting narrative and slide structure.

Learning guide

What students should notice

Use these prompts while scanning the example workflows. They are cues for what to compare, not extra steps students need to complete.

Parallel work still needs coordination

Two agents can work at the same time, but they still need a shared time slot and clear handoffs so the next slot knows what arrived from each branch.

Time slots are not the same as agent count

A workflow can have more agent actions than time slots when some actions run in parallel. Count the T1, T2, T3 columns separately from the number of cards.

Handoffs reveal dependencies

If a handoff is vague, the next slot will stall even when agents work in parallel. Students should be able to say exactly what packet moves forward and who needs it next.

Agent builder

Define the helpers in your system

Keep each agent narrow. Students should be able to say what the agent receives, what it returns, and why the workflow needs it without reading the whole workflow first.

Agent library

Compare the roles side by side

Comparing saved agents side by side makes overlap visible. If two cards need the same inputs or promise the same output, the workflow probably needs fewer roles or clearer boundaries.

Agent

Planner

Turns a broad goal into a short sequence of doable tasks.

Input: A student goal, project brief, or question.
Output: A checklist or ordered plan that other agents can follow.

Agent

Researcher

Collects background facts, examples, and references for the task.

Input: A focused question and a target topic.
Output: Notes, sources, and open questions worth checking next.

Agent

Source Checker

Verifies that evidence is trustworthy and properly cited.

Input: Claims, links, and candidate references.
Output: A checked set of sources with warnings about weak evidence.

Agent

Writer

Turns plans and evidence into readable draft content.

Input: A structure, notes, and supporting material.
Output: A draft explanation, report, or script.

Agent

Reviewer

Checks the draft result and points out what should improve.

Input: A draft answer, outline, or artifact.
Output: A short critique with concrete fixes.

Agent

Quiz Maker

Creates practice questions that test the main concepts.

Input: A topic list or study notes.
Output: Questions, answer keys, and self-check prompts.

Agent

Slide Designer

Transforms the story into a presentation structure.

Input: A message, draft script, and audience goal.
Output: Slide titles, layout ideas, and visual cues.

Workflow builder

Connect agents into a reusable sequence

Pick the agents involved, then define each action with a time slot. Agents that share the same time slot are shown as running in parallel, so students can see branching without inventing a second workflow.

Workflow name Desired outcome

Agents in this workflow

Choose the agents that participate in the workflow so the association stays explicit in the UI and in the saved JSON. This also keeps the later action list focused on valid roles.

Agent actions

Each action records a time slot, the acting agent, the work done there, and the handoff that follows. Reusing a time slot is how students model parallel work in the same workflow.

Time slot Acting agent

Work at this time slot What gets handed forward

Choose at least one workflow agent above before adding actions.

No actions yet. Add T1 to show who starts the workflow.

Workflow library

Compare complete workflows

Keep saved workflow cards beside the builder so students can borrow timing, branching, and handoff patterns from previous examples while composing a new sequence.

Workflow

Prepare a seminar briefing

A short seminar briefing with verified sources and clear talking points.

Planner
Researcher
Source Checker
Writer
Reviewer

T1

Single active agent

Next slot: T2

Planner

Break the seminar topic into sections, decisions, and evidence needs.

Handoff: Pass the structure to Researcher and Source Checker.

Feeds into T2
T2

2 agents work in parallel

Next slot: T3

Researcher

Gather concepts, examples, and candidate references for each section.

Handoff: Pass the collected notes to Writer.

Feeds into T3

Source Checker

Verify the strongest references and flag any weak or missing citations.

Handoff: Pass the verified source list to Writer.

Feeds into T3
T3

Single active agent

Next slot: T4

Writer

Assemble the final briefing draft using the research notes and checked sources.

Handoff: Pass the briefing draft to Reviewer.

Feeds into T4
T4

Single active agent

Final slot

Reviewer

Check the briefing for clarity, evidence quality, and missing transitions.

Handoff: Deliver the revised seminar briefing as the workflow outcome.

Outcome: A short seminar briefing with verified sources and clear talking points.

Workflow

Build an exam revision pack

A compact revision pack with notes and practice questions.

Planner
Researcher
Quiz Maker
Reviewer

T1

Single active agent

Next slot: T2

Planner

Turn the exam scope into a list of topics and learning goals.

Handoff: Pass the topic list to Researcher and Quiz Maker.

Feeds into T2
T2

2 agents work in parallel

Next slot: T3

Researcher

Write short notes that explain the key ideas for each topic.

Handoff: Pass the study notes to Reviewer.

Feeds into T3

Quiz Maker

Create practice questions that match the same topic list.

Handoff: Pass the question set to Reviewer.

Feeds into T3
T3

Single active agent

Final slot

Reviewer

Check that the notes and quiz cover the same ideas and use clear wording.

Handoff: Deliver the finished revision pack as the workflow outcome.

Outcome: A compact revision pack with notes and practice questions.

Workflow

Turn a project into a presentation

A presentation outline with a supporting narrative and slide structure.

Planner
Writer
Slide Designer
Reviewer

T1

Single active agent

Next slot: T2

Planner

Define the project story, audience goal, and the sections the presentation needs.

Handoff: Pass the section plan to Writer and Slide Designer.

Feeds into T2
T2

2 agents work in parallel

Next slot: T3

Writer

Draft the spoken explanation for each section of the presentation.

Handoff: Pass the speaking notes to Reviewer.

Feeds into T3

Slide Designer

Sketch the slide sequence, titles, and the visual support each point needs.

Handoff: Pass the slide structure to Reviewer.

Feeds into T3
T3

Single active agent

Final slot

Reviewer

Check that the spoken story and slide structure support each other.

Handoff: Deliver the presentation outline as the workflow outcome.

Outcome: A presentation outline with a supporting narrative and slide structure.

Workflow playback

Watch the handoff

Move through a workflow time slot by time slot, or let the graph animation run, to see who is active now, which agents branch in parallel, and where the data packet moves next. Click any graph node to jump to its slot because the graph and the card playback stay synchronized on the same workflow state.

Workflow to inspect

Active slot

T1 of 4

Seed packet Mock

The seed packet is the starting request that the deterministic simulation pushes through the workflow. This is mock data for teaching only, so no real model call leaves the browser.

Graph view for Prepare a seminar briefing

The DAG makes dependencies visible: every active branch at T1 feeds the next slot at T2.

Single active branch at T1

Active data packet

Packets leave T1 and head to T2

Pass the structure to Researcher and Source Checker.

Active at T1

One agent is active in this slot.

Planner

Break the seminar topic into sections, decisions, and evidence needs.

Handoff packets

These cards show what each active agent hands forward after working in the current slot. Use them to compare how the next slot depends on the current one.

Planner

Pass the structure to Researcher and Source Checker.

Next slot: T2

2 agents continue at T2

Mock execution at T1

Push a packet through the current slot

Single mocked branch

Packet arriving at T1

Student request: Prepare a seminar briefing. Target outcome: A short seminar briefing with verified sources and clear talking points. Need a clear packet that can move through each handoff.

Planner

Break the seminar topic into sections, decisions, and evidence needs.

Mock transform

Produces

Plan packet: turns "Student request: Prepare a seminar briefing. Target outcome: A short seminar briefi…" into a sequence centred on Break the seminar topic into sections, decisions, and evidence needs.. Next cue: Pass the structure to Researcher and Source Checker.

Handoff

Pass the structure to Researcher and Source Checker.

Packet leaving for T2

Students can compare what entered the slot, what each agent changed, and what the next slot receives.

Planner hands forward a packet for T2: Plan packet: turns "Student request: Prepare a seminar briefing. Target outcome: A short seminar briefi…" into a sequence centred on Break the seminar topic into sections, decisions, and evidence needs.. Next cue: Pass the structure to Researcher and Source Checker.

Workspace state

Inspect the JSON

The app keeps the entire studio in localStorage under the key agent-workflow-studio/v1. This panel helps students inspect the exact saved state behind the workflow editor and the visualizations.

Edit this JSON and use restore to replace the current browser workspace.

{
  "agents": [
    {
      "id": "agent-planner",
      "name": "Planner",
      "responsibility": "Turns a broad goal into a short sequence of doable tasks.",
      "inputs": "A student goal, project brief, or question.",
      "outputs": "A checklist or ordered plan that other agents can follow."
    },
    {
      "id": "agent-researcher",
      "name": "Researcher",
      "responsibility": "Collects background facts, examples, and references for the task.",
      "inputs": "A focused question and a target topic.",
      "outputs": "Notes, sources, and open questions worth checking next."
    },
    {
      "id": "agent-source-checker",
      "name": "Source Checker",
      "responsibility": "Verifies that evidence is trustworthy and properly cited.",
      "inputs": "Claims, links, and candidate references.",
      "outputs": "A checked set of sources with warnings about weak evidence."
    },
    {
      "id": "agent-writer",
      "name": "Writer",
      "responsibility": "Turns plans and evidence into readable draft content.",
      "inputs": "A structure, notes, and supporting material.",
      "outputs": "A draft explanation, report, or script."
    },
    {
      "id": "agent-reviewer",
      "name": "Reviewer",
      "responsibility": "Checks the draft result and points out what should improve.",
      "inputs": "A draft answer, outline, or artifact.",
      "outputs": "A short critique with concrete fixes."
    },
    {
      "id": "agent-quiz-maker",
      "name": "Quiz Maker",
      "responsibility": "Creates practice questions that test the main concepts.",
      "inputs": "A topic list or study notes.",
      "outputs": "Questions, answer keys, and self-check prompts."
    },
    {
      "id": "agent-slide-designer",
      "name": "Slide Designer",
      "responsibility": "Transforms the story into a presentation structure.",
      "inputs": "A message, draft script, and audience goal.",
      "outputs": "Slide titles, layout ideas, and visual cues."
    }
  ],
  "workflows": [
    {
      "id": "workflow-seminar-briefing",
      "name": "Prepare a seminar briefing",
      "outcome": "A short seminar briefing with verified sources and clear talking points.",
      "agentIds": [
        "agent-planner",
        "agent-researcher",
        "agent-source-checker",
        "agent-writer",
        "agent-reviewer"
      ],
      "timeSteps": [
        {
          "id": "seminar-plan",
          "time": 1,
          "agentId": "agent-planner",
          "work": "Break the seminar topic into sections, decisions, and evidence needs.",
          "handoff": "Pass the structure to Researcher and Source Checker."
        },
        {
          "id": "seminar-research",
          "time": 2,
          "agentId": "agent-researcher",
          "work": "Gather concepts, examples, and candidate references for each section.",
          "handoff": "Pass the collected notes to Writer."
        },
        {
          "id": "seminar-source-check",
          "time": 2,
          "agentId": "agent-source-checker",
          "work": "Verify the strongest references and flag any weak or missing citations.",
          "handoff": "Pass the verified source list to Writer."
        },
        {
          "id": "seminar-write",
          "time": 3,
          "agentId": "agent-writer",
          "work": "Assemble the final briefing draft using the research notes and checked sources.",
          "handoff": "Pass the briefing draft to Reviewer."
        },
        {
          "id": "seminar-review",
          "time": 4,
          "agentId": "agent-reviewer",
          "work": "Check the briefing for clarity, evidence quality, and missing transitions.",
          "handoff": "Deliver the revised seminar briefing as the workflow outcome."
        }
      ]
    },
    {
      "id": "workflow-revision-pack",
      "name": "Build an exam revision pack",
      "outcome": "A compact revision pack with notes and practice questions.",
      "agentIds": [
        "agent-planner",
        "agent-researcher",
        "agent-quiz-maker",
        "agent-reviewer"
      ],
      "timeSteps": [
        {
          "id": "revision-plan",
          "time": 1,
          "agentId": "agent-planner",
          "work": "Turn the exam scope into a list of topics and learning goals.",
          "handoff": "Pass the topic list to Researcher and Quiz Maker."
        },
        {
          "id": "revision-research",
          "time": 2,
          "agentId": "agent-researcher",
          "work": "Write short notes that explain the key ideas for each topic.",
          "handoff": "Pass the study notes to Reviewer."
        },
        {
          "id": "revision-quiz",
          "time": 2,
          "agentId": "agent-quiz-maker",
          "work": "Create practice questions that match the same topic list.",
          "handoff": "Pass the question set to Reviewer."
        },
        {
          "id": "revision-review",
          "time": 3,
          "agentId": "agent-reviewer",
          "work": "Check that the notes and quiz cover the same ideas and use clear wording.",
          "handoff": "Deliver the finished revision pack as the workflow outcome."
        }
      ]
    },
    {
      "id": "workflow-project-presentation",
      "name": "Turn a project into a presentation",
      "outcome": "A presentation outline with a supporting narrative and slide structure.",
      "agentIds": [
        "agent-planner",
        "agent-writer",
        "agent-slide-designer",
        "agent-reviewer"
      ],
      "timeSteps": [
        {
          "id": "presentation-plan",
          "time": 1,
          "agentId": "agent-planner",
          "work": "Define the project story, audience goal, and the sections the presentation needs.",
          "handoff": "Pass the section plan to Writer and Slide Designer."
        },
        {
          "id": "presentation-write",
          "time": 2,
          "agentId": "agent-writer",
          "work": "Draft the spoken explanation for each section of the presentation.",
          "handoff": "Pass the speaking notes to Reviewer."
        },
        {
          "id": "presentation-design",
          "time": 2,
          "agentId": "agent-slide-designer",
          "work": "Sketch the slide sequence, titles, and the visual support each point needs.",
          "handoff": "Pass the slide structure to Reviewer."
        },
        {
          "id": "presentation-review",
          "time": 3,
          "agentId": "agent-reviewer",
          "work": "Check that the spoken story and slide structure support each other.",
          "handoff": "Deliver the presentation outline as the workflow outcome."
        }
      ]
    }
  ]
}

This interface needs JavaScript enabled to save agents, time slots, and workflows in localStorage.