Introducing the Fiberplane Playground for Cloudflare Agents

by Fiberplane team on Apr 7, 2025

Today we’re releasing a new companion playground to help you build, test, and debug your agents on Cloudflare.

The Agents SDK on Cloudflare launched recently has made it straightforward to build, deploy, and scale AI agents directly at the edge using Workers and Durable Objects. The Fiberplane agents playground specifically addresses the challenges of debugging agents which can still be difficult:

• they are inherently stateful and that state substantially influences LLM behavior;
• they run on Durable Objects, potentially spawning multiple instances.

The Fiberplane team has had a lot of fun building agents, but we were lacking an overview of the agents themselves, and a way to debug them.

A bird’s eye view of your agents

The Fiberplane Agents Playground provides comprehensive visibility into all underlying state stored in each agent’s Durable Object SQLite database, including state snapshots, messages, schedules, and tool calls with their full parameters and responses. This detailed introspection is captured separately for each instantiation of an agent, giving you complete clarity into individual agent behaviors.

Monitor your agent in action

The playground updates in real-time, capturing every change instantly. An “events” table offers deeper insights, displaying detailed event data categorized by Streaming, HTTP, WebSocket Messages, WebSocket Connections, Broadcasts, and State events. This allows you to filter and focus precisely on the interactions you care about, significantly reducing debugging time and increasing development efficiency.

Getting Started

The Fiberplane agents playground is available as an npm package:

npm

npm i @fiberplane/agents

pnpm

pnpm add @fiberplane/agents

yarn

yarn add @fiberplane/agents

It works with just two key components:

1. Wrap your worker’s fetch entrypoint with the fiberplane wrapper:

import { fiberplane } from "@fiberplane/agents";

export default {
  fetch: fiberplane(async (request, env, ctx) => {
    return await routeAgentRequest(request, env) ||
      new Response("Not found", { status: 404 });
  }),
};

2. Add the @Observed() decorator to any agent class you want to debug:

import { Observed } from "@fiberplane/agents";

@Observed()
class ChatClient extends AIChatAgent<Env, MemoryState> {
  // Your agent implementation
}

Once integrated, access the playground by appending /fp to your worker’s URL in the browser.

It’s alpha - here’s what’s in progress

Just a few disclaimers:

• There are type errors in the decorator; we’re working on improving introspection.
• Use this only in local development—proper authentication for production is coming soon.
• The playground is currently read-only. Interactive testing is planned, and feedback is welcome!

The Fiberplane Agents Playground is open source alongside our Hono Playground on GitHub.