Embed Replay

Show your agents working, step by step, live on any website or app

Next

from praisonaiagents import Agent
from praisonai.replay import watch

agent = Agent(name="Writer", instructions="Write one short paragraph.")
watch(agent, input="Solar sails")  # opens a page: press Run, watch each step

Replay draws a run as it happens. Each step and agent on the map turns from not reached to running to done. You can open it on its own page, put it in your app, or put it in any website with one <iframe>.

Quick Start

1. Watch a run with a Run button

   from praisonaiagents import Agent, AgentTeam, Task
   from praisonai.replay import watch
   
   researcher = Agent(name="Researcher", instructions="Give 3 short facts.")
   writer = Agent(name="Writer", instructions="Write one paragraph from the facts.")
   team = AgentTeam(
       agents=[researcher, writer],
       tasks=[
           Task(name="research", description="3 facts about solar sails", agent=researcher, expected_output="3 facts"),
           Task(name="write", description="One paragraph using the facts", agent=writer, expected_output="a paragraph"),
       ],
   )
   
   watch(team)  # http://127.0.0.1:8090/

   Press ▶ Run. The map shows who is working right now. When the run ends, ▶ Play goes through it again one step at a time.

2. Show progress inside your own app

   import threading, uuid
   from fastapi import FastAPI
   from praisonaiagents import Agent
   from praisonai.replay import record, replay_app
   
   agent = Agent(name="Writer", instructions="Write one short paragraph.")
   app = FastAPI()
   app.mount("/replay", replay_app())  # the progress view, served by your app
   
   
   @app.post("/generate")
   def generate():
       run_id = f"run-{uuid.uuid4().hex[:12]}"
   
       def job():
           with record(run_id, live=True):  # live: the view follows it as it runs
               agent.start("Write about solar sails")
   
       threading.Thread(target=job, daemon=True).start()
       return {"run_id": run_id}

   Then show that run on any page:

   <iframe src="/replay/?run=RUN_ID" style="width:100%;height:640px;border:0"></iframe>

How It Works

What the map shows:

Three Ways to Run It

from praisonaiagents import Agent
from praisonai.replay import watch

watch(Agent(name="Helper", instructions="Be brief."), input="Say hello")

praisonai replay watch agents.yaml

from praisonai.replay import watch

watch("agents.yaml")

Embed on Any Website

The view is a normal web page, so any site can show it in an <iframe>, even when it is not built with Python.

<button id="go">Generate</button>
<iframe id="progress" style="width:100%;height:640px;border:0"></iframe>
<script>
  const APP = "";  // "" when this page is served by your app; else its origin, e.g. "https://agents.example.com"
  go.onclick = async () => {
    const { run_id } = await (await fetch(APP + "/generate", { method: "POST" })).json();
    progress.src = APP + "/replay/?run=" + run_id;
  };
</script>

export function RunProgress({ runId }) {
  if (!runId) return null;
  return (
    <iframe
      title="Agent progress"
      src={`/replay/?run=${runId}`}
      style={{ width: "100%", height: 640, border: 0 }}
    />
  );
}

import streamlit.components.v1 as components

# 127.0.0.1:8000 is local development; use your deployed app's origin when hosting
components.iframe("http://127.0.0.1:8000/replay/?run=RUN_ID", height=640)

import gradio as gr

with gr.Blocks() as demo:
    # 127.0.0.1:8000 is local development; use your deployed app's origin when hosting
    gr.HTML('<iframe src="http://127.0.0.1:8000/replay/?run=RUN_ID" style="width:100%;height:640px;border:0"></iframe>')
demo.launch()

Common Patterns

Put the Run button in your app

Pass your agent, team or flow to replay_app() and the mounted page gets an input box and a Run button:

from fastapi import FastAPI
from praisonaiagents import Agent
from praisonai.replay import replay_app

agent = Agent(name="Writer", instructions="Write one short paragraph.")
app = FastAPI()
app.mount("/replay", replay_app(agent, input="Solar sails", placeholder="Topic"))

One run goes at a time. A team’s tasks start afresh on each run; an Agent keeps its chat history between runs.

Draw the view inside your own page

On a page served by the same app, load the view into any element instead of an iframe:

<div id="progress"></div>
<script type="module">
  import { render } from "/replay/replay.js";
  render(document.getElementById("progress"), { base: "/replay", run: "RUN_ID", approve: false });
</script>

Teach how agents work together

watch() is a quick way to show a class or a team how a multi-agent run flows. Press Run, then ▶ Play to go through it again. Use ← → to step, Timeline to see who worked when, and Why to see what each agent was given.

Best Practices

Related