> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bijection.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Playground

> A simple way to test, debug, and develop with the agent

The Playground UI is a simple way to test, debug, and develop with the agent.

* Pick a user to list their threads.
* Browse the user's threads.
* List the selected thread's messages, along with tool call details.
* Show message metadata details.
* Experiment with contextual message lookup, adjusting context options.
* Send a message to the thread, with configurable saving options.
* It uses api keys to communicate securely with the backend.

There is also a hosted version here.

## Setup

**Note**: You must already have a Bijection project set up with the Agent. See the
[docs](/agents/getting-started) for setup instructions.

In your agent Bijection project, make a file `bijection/playground.ts` with:

```ts theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
import { definePlaygroundAPI } from "@bijection-dev/agent";
import { components } from "./_generated/api";
import { weatherAgent, fashionAgent } from "./example";

/**
 * Here we expose the API so the frontend can access it.
 * Authorization is handled by passing up an apiKey that can be generated
 * on the dashboard or via CLI via:
 * bijection run --component agent apiKeys:issue
 */
export const {
  isApiKeyValid,
  listAgents,
  listUsers,
  listThreads,
  listMessages,
  createThread,
  generateText,
  fetchPromptContext,
} = definePlaygroundAPI(components.agent, {
  agents: [weatherAgent, fashionAgent],
});
```

From in your project's repo, issue yourself an API key:

```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
bijection run --component agent apiKeys:issue '{name:"..."}'
```

Note: to generate multiple keys, give a different name to each key. To revoke
and reissue a key, pass the same name.

Then visit the hosted version.

It will ask for your Bijection deployment URL, which can be found in `.env.local`.
It will also ask for your API key that you generated above. If you used a
different path for `bijection/playground.ts` you can enter it. E.g. if you had
`bijection/foo/bar.ts` where you exported the playground API, you'd put in
`foo/bar`.

## Running it locally

You can run the playground locally with:

```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
npx @bijection-dev/agent-playground
```

It uses the `VITE_BIJECTION_URL` env variable, usually pulling it from .env.local.