cpx-model-config

Web component for configuring AI model endpoints. Supports 8 provider types with smart defaults, capability flags, pricing, and validation.

Install

import "@chapeaux/cpx-model-config";

Usage

<cpx-model-config id="config"></cpx-model-config>

<script type="module">
  import "@chapeaux/cpx-model-config";

  const el = document.getElementById("config");

  // Set initial models
  el.models = [
    {
      id: "gpt-4o",
      display_name: "GPT-4o",
      provider_type: "openai",
      base_url: "https://api.openai.com",
      api_key_env: "OPENAI_API_KEY",
      auth: "bearer",
      context_window: 128000,
      max_tokens: 16384,
      capabilities: { tool_calling: true, reasoning: false, vision: true, json_mode: true },
    },
  ];

  // Listen for changes
  el.addEventListener("models-change", (e) => {
    console.log("Models updated:", e.detail.models);
  });

  // Listen for validation requests
  el.addEventListener("model-validate", (e) => {
    console.log("Validate:", e.detail.model.id);
    // Call your validation endpoint, then report back:
    el.setValidationResult({ model_id: e.detail.model.id, success: true });
  });
</script>

Provider Types

Type	Default Base URL	Auth
openai	https://api.openai.com	bearer
openai_compat	(user-provided)	bearer
azure_openai	(user-provided)	bearer
anthropic	https://api.anthropic.com	bearer
aws_bedrock	(user-provided)	aws_iam
vertex_ai	(user-provided)	adc
groq	https://api.groq.com/openai	bearer
ollama	http://localhost:11434	bearer

Types

import type { ModelConfig, ProviderType, ModelValidationResult } from "@chapeaux/cpx-model-config/types";

License

Apache-2.0