Implementation:Helicone Helicone Providers Web Metadata

Knowledge Sources	Helicone
Domains	Dashboard UI, Provider Metadata, Next.js
Last Updated	2026-02-14 00:00 GMT

Overview

Concrete static metadata array driving the provider selection UI in the Helicone dashboard, provided by the web/data/providers.ts module.

Description

The providers export is a typed array of Provider objects, each containing display metadata for one LLM provider: its canonical ID (matching the backend ModelProviderName), human-readable name, logo URL, description text, documentation link, API key label and placeholder, and a numeric relevance score for sorting.

The array currently contains entries for 22 providers including OpenAI, Anthropic, Azure OpenAI, Vertex AI, Google AI (Gemini), Mistral AI, Groq, DeepSeek, X.AI, Perplexity, AWS Bedrock, DeepInfra, OpenRouter, Novita, Baseten, Fireworks, Cerebras, Nebius, Canopy Wave, Chutes, and Helicone Inference. Relevance scores range from 100 (OpenAI) to 1 (Helicone Inference).

The Provider interface (defined in web/types/provider.ts) includes optional fields for auth (to trigger alternative authentication UI like service account upload), multipleAllowed (for providers like Azure that support multiple configurations), and publiclyVisible (to hide internal providers like Helicone Inference).

Usage

Use this module when:

• Rendering provider selection cards in the dashboard
• Building provider configuration or onboarding forms
• Looking up provider display metadata (logo, docs link, description) by ID
• Adding a new provider to the dashboard UI

Code Reference

Source Location

• Repository: Helicone
• File: web/data/providers.ts (lines 4-288)

Signature

export const providers: Provider[] = [
  {
    id: "openai",
    name: "OpenAI",
    logoUrl: "/assets/providers/openai.webp",
    description: "Configure your OpenAI API keys for testing and development",
    docsUrl: "https://docs.helicone.ai/getting-started/integration-methods/openai",
    apiKeyLabel: "OpenAI API Key",
    apiKeyPlaceholder: "sk-...",
    relevanceScore: 100,
  },
  // ... 21 more provider entries
];

The Provider interface:

export interface Provider {
  id: ModelProviderName;
  name: string;
  logoUrl: string;
  description: string;
  docsUrl: string;
  apiKeyLabel: string;
  apiKeyPlaceholder: string;
  relevanceScore: number;
  note?: string;
  multipleAllowed?: boolean;
  auth?: "api-key" | "oauth" | "aws-signature" | "service_account";
  publiclyVisible?: boolean;
}

Import

import { providers } from "@/data/providers";
import { Provider } from "@/types/provider";

I/O Contract

Inputs

Name	Type	Required	Description
(none -- static data)	--	--	The array is a static constant; consumers iterate or filter it

Outputs

Name	Type	Description
providers	Provider[]	Array of provider metadata objects, one per supported LLM provider
recentlyUsedProviderIds	string[]	Mock array of recently used provider IDs (placeholder for user-specific data)

Usage Examples

Basic Usage

import { providers } from "@/data/providers";

// Render a sorted list of publicly visible providers
const visibleProviders = providers
  .filter((p) => p.publiclyVisible !== false)
  .sort((a, b) => b.relevanceScore - a.relevanceScore);

// Find a specific provider by ID
const anthropic = providers.find((p) => p.id === "anthropic");

// Adding a new provider to the dashboard:
// Append a new object to the providers array in web/data/providers.ts:
//   {
//     id: "new-provider",         // Must match ModelProviderName
//     name: "New Provider",
//     logoUrl: "/assets/home/providers/newprovider.webp",
//     description: "Configure your New Provider API keys",
//     docsUrl: "https://docs.helicone.ai/...",
//     apiKeyLabel: "New Provider API Key",
//     apiKeyPlaceholder: "np-...",
//     relevanceScore: 50,
//   },

Related Pages

Implements Principle

• Principle:Helicone_Helicone_Provider_Dashboard_Integration