Implementation:Helicone Helicone RequestsV2 Page

Knowledge Sources	Helicone
Domains	LLM Observability, Dashboard UI, Data Visualization
Last Updated	2026-02-14 00:00 GMT

Overview

Concrete Next.js page component for rendering paginated, filterable LLM request-response logs in the Helicone dashboard, provided by the RequestsV2 page component.

Description

RequestsV2 is a Next.js page component at /requests that serves as the primary interface for browsing LLM request logs. It uses getServerSideProps to extract pagination and sorting parameters from the URL query string (page, page_size, sortKey, sortDirection, isCustomProperty, requestId) and passes them as typed props to the client-side component.

The component renders a RequestsPage template that provides the full interactive experience: a time-range filter, a composable filter AST builder, configurable and reorderable table columns, server-side pagination with a table footer, data export, and a resizable detail drawer for inspecting individual request-response pairs. The detail drawer lazy-loads full request and response bodies and maps them through heliconeRequestToMappedContent for provider-specific formatting.

The page is wrapped in an AuthLayout via the getLayout pattern, ensuring the user is authenticated and the organization context is available before any data is fetched.

The RequestsPage template internally uses the useRequestsPageV2 hook which manages filter state, sort state, and data fetching via TanStack Query against the Jawn backend API.

Usage

This page is the primary entry point for Helicone users to browse their LLM request history. Navigate to /requests in the Helicone dashboard. Query parameters can be used for deep-linking to specific pages, sort orders, or individual requests.

Code Reference

Source Location

• Repository: Helicone
• File: web/pages/requests.tsx (lines 46-77)

Signature

interface RequestsV2Props {
  currentPage: number;
  pageSize: number;
  sort: {
    sortKey: string | null;
    sortDirection: SortDirection | null;
    isCustomProperty: boolean;
  };
  initialRequestId: string | null;
}

const RequestsV2 = (props: RequestsV2Props) => ReactElement

Import

// This is a Next.js page; it is not imported directly.
// It is auto-routed via the file system at web/pages/requests.tsx.
// The core template component it renders:
import RequestsPage from "../components/templates/requests/RequestsPage";

I/O Contract

Inputs

Name	Type	Required	Description
currentPage	number	Yes	The 1-based page number for pagination. Defaults to 1 if not provided in the URL query.
pageSize	number	Yes	The number of records per page. Defaults to 25 if not provided in the URL query.
sort.sortKey	null	No	The column key to sort by (e.g. "request_created_at", "latency", "cost").
sort.sortDirection	null	No	The sort direction: "asc" or "desc".
sort.isCustomProperty	boolean	Yes	Whether the sortKey refers to a custom property rather than a built-in column.
initialRequestId	null	No	If provided, the detail drawer opens automatically to show this specific request.

Outputs

Name	Type	Description
element	ReactElement	A React element tree rendering the RequestsPage template inside the AuthLayout, producing the full paginated request log table with filters, sorting, and a detail drawer.

Usage Examples

Basic Usage

// URL-based usage (Next.js routing):
// /requests?page=2&page_size=50&sortKey=latency&sortDirection=desc

// The getServerSideProps function parses these into:
export const getServerSideProps = async (context: GetServerSidePropsContext) => {
  const { page, page_size, sortKey, sortDirection, isCustomProperty, requestId } =
    context.query;

  return {
    props: {
      currentPage: parseInt(page as string, 10) || 1,
      pageSize: parseInt(page_size as string, 10) || 25,
      sort: {
        sortKey: sortKey ? (sortKey as string) : null,
        sortDirection: sortDirection ? (sortDirection as SortDirection) : null,
        isCustomProperty: isCustomProperty === "true",
      },
      initialRequestId: requestId ? (requestId as string) : null,
    },
  };
};

// The component renders:
const RequestsV2 = (props: RequestsV2Props) => {
  const { currentPage, pageSize, sort, initialRequestId } = props;

  return (
    <RequestsPage
      currentPage={currentPage}
      pageSize={pageSize}
      sort={sort}
      initialRequestId={initialRequestId === null ? undefined : initialRequestId}
      organizationLayoutAvailable={true}
    />
  );
};

Related Pages

Implements Principle

• Principle:Helicone_Helicone_Dashboard_Visualization

Requires Environment

• Environment:Helicone_Helicone_Node_20_TypeScript_Runtime