> ## Documentation Index
> Fetch the complete documentation index at: https://scorecard-d65b5e8a-update-playground-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Playground

> A visual workflow builder for testing and evaluating your AI agent with real data.

export const DarkLightImage = ({lightSrc, caption, alt, darkSrc = null, width = "1000"}) => {
  const getAbsoluteUrl = src => {
    if (src.startsWith('http://') || src.startsWith('https://')) {
      return src;
    }
    const currentUrl = typeof window !== 'undefined' ? window.location.origin : '';
    if (currentUrl.includes('.mintlify.app')) {
      const subdomain = currentUrl.split('.')[0].replace('https://', '');
      return `https://mintlify.s3.us-west-1.amazonaws.com/${subdomain}${src.startsWith('/') ? '' : '/'}${src}`;
    } else if (currentUrl === 'https://docs.scorecard.io') {
      return `https://mintlify.s3.us-west-1.amazonaws.com/scorecard-d65b5e8a${src.startsWith('/') ? '' : '/'}${src}`;
    } else {
      return `${currentUrl}${src.startsWith('/') ? '' : '/'}${src}`;
    }
  };
  const content = <>
      <img className="block dark:hidden" width={width} src={getAbsoluteUrl(lightSrc)} alt={alt} />
      <img className="hidden dark:block" width={width} src={getAbsoluteUrl(darkSrc || lightSrc.replace('light', 'dark'))} alt={alt} />
    </>;
  if (caption) {
    return <Frame caption={caption}>{content}</Frame>;
  } else {
    return content;
  }
};

<DarkLightImage lightSrc="/images/playground-light.png" darkSrc="/images/playground-dark.png" caption="Playground workflow with testcases, agent, evaluator, results, and scores." alt="Screenshot of the Playground showing a visual node-based workflow with connected components." />

## Overview

The Playground is a visual workflow builder where you connect nodes to test your AI agent:

* **Testset** (left): Your test data flows into the agent
* **Agent** (center): Configure prompts and model settings
* **Evaluator** (top right): Select metrics to score outputs
* **Results**: View agent responses for each testcase
* **Scores**: See pass/fail status and metric scores

## Running an Evaluation

1. **Select a testset** or add testcases manually
2. **Configure your prompt** using [Jinja syntax](https://jinja.palletsprojects.com/) with variables like `{{context}}` or `{{allInputs}}`
3. **Add metrics** to the Evaluator node
4. **Click Run** to execute the evaluation

Results flow through the workflow—watch as responses appear in the Results node and scores populate in the Scores node.

## Related

<CardGroup cols={2}>
  <Card title="Testsets" href="/features/testsets" icon="flask">
    Create and manage test data
  </Card>

  <Card title="Metrics" href="/features/metrics" icon="chart-bar">
    Define evaluation criteria
  </Card>
</CardGroup>