Tiny agent playground built with Web Components

I wanted an embeddable agent debugger with no framework dependency, so I built the interface as Web Components.

What is included

  • Tool-call timeline
  • Editable system prompt
  • JSON schema inspector
  • Replay from any step

Why I am sharing this

The useful part is not only the final implementation. I would like this thread to capture the trade-offs, failure modes, and practical details that help another builder make a better decision.

Clear constraints and reproducible examples make technical discussion dramatically more useful.

Join the discussion

Would an embeddable debugger help your documentation or support workflow?

Share your environment, constraints, and what you have already tried. Screenshots, traces, small code samples, and counterexamples are welcome.

3 Likes

On Tiny agent playground built with Web Components:

This matches what we saw in a recent implementation.

The user-experience side matters too: expose evidence, make uncertainty visible, and always provide a clear path to correct or escalate the result.

Practical next step: record one baseline with cost, latency, and failure reason before changing the architecture. That gives the team something concrete to compare.

— Maya

4 Likes

On Tiny agent playground built with Web Components:

One detail I would add from operating a similar system:

We got the best result after separating retrieval quality, model quality, and application failures into different dashboards. A single success metric made every regression harder to diagnose.

Practical next step: record one baseline with cost, latency, and failure reason before changing the architecture. That gives the team something concrete to compare.

— Arjun

5 Likes

On Tiny agent playground built with Web Components:

I tested a smaller version of this pattern last month.

The first version was clever but difficult to inspect. Moving state into explicit records and logging every boundary made retries safer and incident reviews much faster.

Practical next step: record one baseline with cost, latency, and failure reason before changing the architecture. That gives the team something concrete to compare.

— Lena

2 Likes

On Tiny agent playground built with Web Components:

The framing here is useful, especially the focus on measurable behavior.

For teams trying this, I would start with ten representative fixtures and run them continuously. A small trusted suite is more valuable than a large benchmark nobody reviews.

Practical next step: record one baseline with cost, latency, and failure reason before changing the architecture. That gives the team something concrete to compare.

— Kwame

2 Likes