<%!-- Form --%> <.form for={@form} phx-change="validate" phx-submit="save" class="space-y-6"> <%!-- Basic Info Card --%>

Basic Information

Name * <%= if @form.errors[:name] do %>

{translate_error(@form.errors[:name])}

<% end %>

Description

<%!-- Provider & API Key Card --%>

Provider Configuration

Provider

API Key *

<%= if @api_key_valid == true do %> <.icon name="hero-check-circle" class="w-4 h-4" /> API key is valid <% end %> <%= if @api_key_error do %> <.icon name="hero-x-circle" class="w-4 h-4" /> {@api_key_error} <% end %>

<%!-- Model Selection Card --%>

Model Selection

<% current_model_id = @form.params["model"] || (@endpoint && @endpoint.model) has_model = current_model_id && current_model_id != "" %> <%!-- Current Model Display Box --%>

Current Model * <%!-- Hidden input to store the actual model value --%> <%= if has_model do %>

<%!-- Model Name --%>

<%= if @selected_model do %> {@selected_model["name"] || current_model_id} <% else %> {current_model_id} <% end %>

<%!-- Model ID --%>

{current_model_id}

<%!-- Model Details --%> <%= if @selected_model do %>

<%!-- Provider --%> <% provider = current_model_id |> String.split("/") |> List.first() %> <.icon name="hero-building-office-2" class="w-3 h-3 mr-1" /> {PhoenixKit.Modules.AI.OpenRouterClient.humanize_provider(provider)} <%!-- Context Length --%> <%= if @selected_model["context_length"] do %> <.icon name="hero-document-text" class="w-3 h-3 mr-1" /> {format_number(@selected_model["context_length"])} ctx <% end %> <%!-- Max Completion Tokens --%> <%= if @selected_model["max_completion_tokens"] do %> <.icon name="hero-pencil" class="w-3 h-3 mr-1" /> {format_number(@selected_model["max_completion_tokens"])} max output <% end %> <%!-- Pricing --%> <%= if @selected_model["pricing"] do %> <% pricing = @selected_model["pricing"] %> <%= if pricing["prompt"] do %> <% prompt_price = if is_binary(pricing["prompt"]), do: String.to_float(pricing["prompt"]), else: pricing["prompt"] %> ${Float.round( prompt_price * 1_000_000, 2 )}/M in <% end %> <%= if pricing["completion"] do %> <% completion_price = if is_binary(pricing["completion"]), do: String.to_float(pricing["completion"]), else: pricing["completion"] %> ${Float.round( completion_price * 1_000_000, 2 )}/M out <% end %> <% end %>

<% else %> <%!-- Model not in current list --%>

<.icon name="hero-exclamation-triangle" class="w-3 h-3" /> Not in current model list

<% end %>

<%!-- Clear button --%>

<% else %> <%!-- No model selected placeholder --%>

<.icon name="hero-cube" class="w-8 h-8 mx-auto text-base-content/30" />

No model selected

Choose a model from the dropdown below

<% end %> <%= if @form.errors[:model] do %> {translate_error(@form.errors[:model])} <% end %>

<%!-- Model Selection (Waterfall: Provider → Model) --%>

<%= if has_model do %> Change Model <% else %> Select Model <% end %> <%= if @models_loading do %>

Loading models...

<% else %> <%= if Enum.empty?(@models_grouped) do %> <%!-- Fallback to text input when no models loaded --%>

Validate API key to load available models from OpenRouter <% else %> <%!-- Provider Selection --%>

<%!-- Model Cards (shown after provider selected) --%> <%= if @selected_provider do %>

{length(@provider_models)} models from {PhoenixKit.Modules.AI.OpenRouterClient.humanize_provider( @selected_provider )}

<%= for model <- @provider_models do %> <% pricing = model["pricing"] || %{} %> <% is_selected = current_model_id == model["id"] %> <% end %>

<% else %>

Select a provider to see available models with pricing details

<% end %> <% end %> <% end %>

<%!-- Parameters Card - Only shown when model is selected --%> <% supported_params = PhoenixKit.Modules.AI.Web.EndpointForm.get_supported_params(@selected_model) %> <% basic_params = supported_params[:basic] || [] %> <% advanced_params = supported_params[:advanced] || [] %> <%= if @selected_model || (@form.params["model"] && @form.params["model"] != "") || (@endpoint && @endpoint.model) do %>

Generation Parameters

<%!-- Model Info Banner --%> <%= if @selected_model do %>

<.icon name="hero-information-circle" class="w-4 h-4" /> Context: {PhoenixKit.Modules.AI.Web.EndpointForm.format_number( @selected_model["context_length"] )} tokens <%= if @selected_model["max_completion_tokens"] do %> • Max output: {PhoenixKit.Modules.AI.Web.EndpointForm.format_number( @selected_model["max_completion_tokens"] )} tokens <% end %>

<% end %> <%!-- Basic Parameters --%> <%= if basic_params != [] do %>

<%= for {param_key, param_def} <- basic_params do %> <.param_input key={param_key} definition={param_def} form={@form} endpoint={@endpoint} selected_model={@selected_model} /> <% end %>

<% end %> <%!-- Enable Thinking Checkbox --%> <% reasoning_enabled = @form.params["reasoning_enabled"] == "true" || @form.params["reasoning_enabled"] == true || (@endpoint && @endpoint.reasoning_enabled == true) %>

<.icon name="hero-light-bulb" class="w-4 h-4 inline mr-1" /> Enable Thinking For models like DeepSeek R1, Qwen QwQ that support chain-of-thought reasoning

<%!-- Reasoning Options (shown when enabled) --%> <%= if reasoning_enabled do %>

<%!-- Reasoning Effort --%>

Effort Level

<%!-- Reasoning Max Tokens --%>

Token Limit

<%!-- Hide Reasoning Toggle --%>

Visibility Hide from response

<% end %>

<%!-- Advanced Parameters --%> <%= if advanced_params != [] do %>

Advanced Parameters

<%= for {param_key, param_def} <- advanced_params do %> <.param_input key={param_key} definition={param_def} form={@form} endpoint={@endpoint} selected_model={@selected_model} size="sm" /> <% end %>

<% end %>

<% else %> <%!-- Placeholder when no model selected --%>

Generation Parameters

Select a model above to configure generation parameters. Available parameters depend on the selected model.

<% end %> <%!-- Optional Settings Card --%>

Optional Provider Settings

HTTP Referer For OpenRouter rankings

X-Title App name for OpenRouter

<%!-- Enabled Toggle --%>

Endpoint Enabled

<%!-- Actions --%>

<.link navigate={Routes.ai_path()} class="btn btn-ghost"> Cancel

<%!-- Help Section (only for new endpoints) --%> <%= unless @endpoint do %>

<.icon name="hero-question-mark-circle" class="w-5 h-5" /> How to get an API key

Visit openrouter.ai
Create an account or sign in
Go to Keys section
Click "Create Key" and copy your new API key

<% end %>