how to extend vitest/ui to add custom data

[amk-dev]

Is there any way to extend the default ui ? i want to add some additional info with each test that i like to see in the UI.

[sheremet-va]

There is no way to do that. What kind of thing do you want to have there?

[amk-dev]

import { expect } from "vitest";
import { createOpenAI } from "@ai-sdk/openai";
import { readFileSync } from "fs";
import { generateObject } from "ai";
import { z } from "zod";
import { format } from "pretty-format";
import { createGoogleGenerativeAI } from "@ai-sdk/google";

const openai = createOpenAI();
const model = openai("o3-mini", {
  reasoningEffort: "low",
});

const prompt = readFileSync("aiAssertionPrompt.md", "utf-8");

expect.extend({
  async ai(input: any, instruction: string) {
    const serializedInput = format(input, {
      // vitest snapshots uses this, and i like vitest snapshots
      printBasicPrototype: false,
    });

    const res = await generateObject({
      model,
      schema: z.object({
        isValid: z
          .boolean()
          .describe(
            "Whether the test passed based on the input and instructions"
          ),
        reasons: z.array(z.string()).describe("Reasons for the test result"),
      }),
      system: prompt,
      prompt: `
      INPUT:
      ${serializedInput}

      INSTRUCTION:
      ${instruction}`,
    });

    console.group("Assertion Logs");
    console.log("Input:");
    console.log(input);
    console.log("Instruction:");
    console.log(instruction);
    console.log(res.object);
    console.groupEnd();

    return {
      pass: res.object.isValid,
      message: () => res.object.reasons.join("\n"),
    };
  },
});

I've wrote an ai matcher that uses an LLM to run tests. using this for some dynamic assertions that otherwises takes a lot of manual intervention.

but i want to see the logs from the LLM in a properly formatted manner. right now i'm just logging it. but i would like to have a custom UI that fits my needs.

What are the ways i can go about this ? will i have to build a custom reporter or are there any other easy ways ?