Next.js

Begin by installing the

• @coval/nextjs for the nextjs specific implementation of the client
• @coval/react for the embedding the ui components in your project and connecting to the Coval Client

A proxy path in Next.js is a way to redirect or rewrite API requests to different URLs, typically used to avoid CORS issues or to hide sensitive backend URLs.

Create a proxy path file in your nextjs project under /pages/api/[...proxyPath].ts and add the following code. Feel also free to make other modifications to the proxy code to fit your needs:

import { handler } from "@coval/nextjs";
export default handler;

The coval nextjs library needs to be initialized on the client-side using the Next.js ‘use client’ directive. You can do this in the app router or in a separate file.

"use client";
import { createClient } from "@coval/nextjs";

if (!process.env.NEXT_PUBLIC_COVAL_API_KEY) {
  throw new Error("Missing API key: NEXT_PUBLIC_COVAL_API_KEY must be set");
}

export const covalClient = createClient({
  apiKey: process.env.NEXT_PUBLIC_COVAL_API_KEY,
  proxyPath: "/api/coval-proxy",
});

export default covalClient;

You can import the CovalProvider component into your app/layout file and wrap your app with it.

Alternatively, here is another example of how you can embed and launch an evaluation.