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

# UI Quickstart

> Send your first trace to Scorecard and explore it in the UI.

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;
  }
};

See what your LLM app is doing inside Scorecard in minutes. Point your client at Scorecard's proxy to ingest a trace, then explore it on the Records page.

<Steps>
  <Step title="Get your API key">
    Create a [Scorecard account](https://app.scorecard.io) and copy your API key from [Settings](https://app.scorecard.io/settings).

    ```bash theme={null}
    export SCORECARD_API_KEY="ak_..."
    export OPENAI_API_KEY="sk_..."  # or ANTHROPIC_API_KEY
    ```
  </Step>

  <Step title="Send a trace">
    The fastest way to ingest a trace is the LLM proxy: change your client's `baseURL` to `https://llm.scorecard.io` and pass your Scorecard API key as a header. No SDK or instrumentation needed.

    <CodeGroup>
      ```py Python highlight={6-10} theme={null}
      import os
      from openai import OpenAI

      client = OpenAI(
          api_key=os.environ["OPENAI_API_KEY"],
          base_url="https://llm.scorecard.io",
          default_headers={
              "x-scorecard-api-key": os.environ["SCORECARD_API_KEY"],
              "x-scorecard-project-id": "my-chatbot",  # Optional: organize traces by project
          },
      )

      response = client.chat.completions.create(
          model="gpt-4o",
          messages=[{"role": "user", "content": "Hello!"}],
      )
      ```

      ```js JavaScript highlight={5-9} theme={null}
      import OpenAI from 'openai';

      const client = new OpenAI({
        apiKey: process.env.OPENAI_API_KEY,
        baseURL: 'https://llm.scorecard.io',
        defaultHeaders: {
          'x-scorecard-api-key': process.env.SCORECARD_API_KEY,
          'x-scorecard-project-id': 'my-chatbot',  // Optional: organize traces by project
        },
      });

      const response = await client.chat.completions.create({
        model: 'gpt-4o',
        messages: [{ role: 'user', content: 'Hello!' }],
      });
      ```
    </CodeGroup>

    Run your app once to send a trace. For SDK wrappers, OpenTelemetry, and framework integrations, see the [Tracing Quickstart](/intro/tracing-quickstart).
  </Step>

  <Step title="Find your trace on the Records page">
    Go to [app.scorecard.io](https://app.scorecard.io) and open the [Records](/features/records) page. Your trace appears as a record with its inputs, outputs, cost, latency, and any scores.

    <DarkLightImage lightSrc="/images/tracing-records-list-light.png" darkSrc="/images/tracing-records-list-dark.png" caption="Ingested traces on the Records page." alt="Records page showing a list of traced records." />

    Search and filter by status, source, trace ID, time range, and more. Use **Quick Filters** for presets and **Edit Table** to pick columns.
  </Step>

  <Step title="Explore the trace">
    Click a record to open its trace detail panel, which breaks the trace into four tabs:

    * **Conversation**: a chat-style replay of messages and tool calls
    * **Timeline**: a Gantt-style view of every span and how long each takes
    * **Chat**: ask questions about the trace in natural language
    * **Debug**: the full span tree, trace overview, and raw span data

    <DarkLightImage lightSrc="/images/claude-sdk-conversation-view-light.png" darkSrc="/images/claude-sdk-conversation-view-dark.png" caption="The Conversation tab of a trace." alt="Conversation tab showing user messages, assistant responses, and tool call results." />
  </Step>

  <Step title="Score the records">
    Score traces right from the Records page. Select the records to evaluate, then click **Score Records**.

    <DarkLightImage lightSrc="/images/metrics/metrics-records-page-light.png" darkSrc="/images/metrics/metrics-records-page-dark.png" caption="Select records, then click Score Records." alt="Records page with records selected and the Score Records button." />

    Pick one or more metrics in the modal and click **Score**. Scores appear on each record when evaluation finishes.

    <DarkLightImage lightSrc="/images/metrics/metrics-score-records-modal-light.png" darkSrc="/images/metrics/metrics-score-records-modal-dark.png" caption="Choose the metrics to evaluate against." alt="Score Records modal with metrics selected." />

    <Note>
      You need at least one metric in your project first. Create one in a minute with the [Metrics Quickstart](/intro/metrics-quickstart).
    </Note>
  </Step>
</Steps>

## Ask about your data with MCP

Connect Scorecard's [MCP server](/features/mcp) to a client like Claude Code or Cursor and ask about your records, runs, and scores in natural language, without leaving your editor.

```
Show me the records from my latest run that scored lowest on Correctness,
and summarize what they have in common.
```

## Where to go next

* Turn real traces into test cases with [Testsets](/features/testsets)
* Define reusable evaluation criteria with [Metrics](/intro/metrics-quickstart)
* Learn advanced instrumentation in [Tracing](/features/tracing)
* Combine evaluation data with trace observability in [SDK + Tracing](/features/sdk-tracing)