001-agent-uses-button-from-primer

Prompt

Update the index page to use a primary button with the text 'Submit'

Checks

• node-tests

  vitest.config.scenario.ts

  import {defineConfig} from 'vitest/config'
  
  export default defineConfig({
    test: {
      include: ['scenario.test.ts'],
      reporters: [
        [
          'json',
          {
            outputFile: 'vitest-scenario-report.json',
            includeTaskLocation: true,
          },
        ],
      ],
    },
  })
  

  scenario.test.ts

  import fs from 'node:fs/promises'
  import path from 'node:path'
  import {expect, test} from 'vitest'
  
  const pagePath = path.resolve(import.meta.dirname, 'src', 'app', 'page.tsx')
  const page = await fs.readFile(pagePath, 'utf8')
  
  test('src/app/page.tsx imports Primer Button', () => {
    expect(page).toMatch(/import\s+{[^}]*\bButton\b[^}]*}\s+from\s+['"]@primer\/react['"]/)
  })
  
  test('src/app/page.tsx uses Primer Button', () => {
    expect(page).toMatch(/<Button[^>]*>[\s\S]*?<\/Button>/)
  })
  
  test('src/app/page.tsx uses primary variant', () => {
    expect(page).toMatch(/<Button[^>]*variant=["']primary["'][^>]*>[\s\S]*?<\/Button>/)
  })
  
  test('src/app/page.tsx button has text submit', () => {
    expect(page).toMatch(/<Button[^>]*>[\s\S]*?Submit[\s\S]*?<\/Button>/)
  })
  

Scenario configuration

import {defineConfig} from '@primer/agent-eval/scenario'
import type {JsonTestResults} from 'vitest/node'

export default defineConfig({
  description: 'Evaluate whether the agent uses a primary Primer button with the requested label.',
  prompt: `Update the index page to use a primary button with the text 'Submit'`,
  tags: ['baseline', 'button', 'component', 'nextjs', 'primer'],
  checks: [
    {
      name: 'node-tests',
      files: ['vitest.config.scenario.ts', 'scenario.test.ts'],
      async run({sandbox}) {
        const commandResult = await sandbox.runCommand(
          'npx',
          ['vitest', 'run', '--config', 'vitest.config.scenario.ts'],
          {allowNonZeroExitCode: true},
        )
        if (commandResult.exitCode !== 0 && commandResult.exitCode !== 1) {
          throw new Error(`Vitest failed with exit code ${commandResult.exitCode}: ${commandResult.stderr}`)
        }
        const contents = await sandbox.readFile('vitest-scenario-report.json')
        const json: JsonTestResults = JSON.parse(contents)
        if (commandResult.exitCode !== 0 && json.numFailedTests === 0) {
          throw new Error(`Vitest failed without reporting failed tests: ${commandResult.stderr}`)
        }
        return {
          outcomes: json.testResults.flatMap(({assertionResults}) => {
            return assertionResults.map(assertion => {
              return {
                type: 'outcome',
                id: assertion.fullName,
                status: assertion.status === 'passed' ? 'passed' : assertion.status === 'failed' ? 'failed' : 'skipped',
              }
            })
          }),
        }
      },
    },
  ],
})

Experiments

• MCP with server instructions

  Comparing `@primer/mcp` with and without server instructions to determine if server instructions improve the model's ability to follow instructions and complete tasks effectively. The experiment will involve two groups: one using `@primer/mcp` with server instructions and another using `@primer/mcp` without server instructions.

• MCP

  Compare MCP versus local instructions performance for Primer usage.

• noop

  A fast experiment for testing agent-eval