<%!-- Header Section --%>
<%!-- Back Button (Left aligned) --%> <.link navigate={PhoenixKit.Utils.Routes.path("/admin")} class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12" > <.icon name="hero-arrow-left" class="w-4 h-4 mr-2" /> Back to Dashboard <%!-- Title Section --%>
<%= case @active_tab do %> <% "endpoints" -> %>

AI Endpoints

Manage AI provider endpoints and API configurations

<% "usage" -> %>

AI Usage

Monitor API requests, token usage, and costs

<% _ -> %>

AI Endpoints

Manage AI provider endpoints and API configurations

<% end %>
<%!-- Controls --%>
<%!-- Tabs --%>
<.link navigate={PhoenixKit.Utils.Routes.ai_path() <> "/endpoints"} class={"tab #{if @active_tab == "endpoints", do: "tab-active"}"} > <.icon name="hero-server-stack" class="w-4 h-4 mr-2" /> Endpoints <.link navigate={PhoenixKit.Utils.Routes.ai_path() <> "/prompts"} class={"tab #{if @active_tab == "prompts", do: "tab-active"}"} > <.icon name="hero-document-text" class="w-4 h-4 mr-2" /> Prompts <.link navigate={PhoenixKit.Utils.Routes.ai_path() <> "/usage"} class={"tab #{if @active_tab == "usage", do: "tab-active"}"} > <.icon name="hero-chart-bar" class="w-4 h-4 mr-2" /> Usage
<%!-- Quick Actions --%> <%= if @active_tab == "endpoints" do %> <.link navigate={PhoenixKit.Utils.Routes.ai_path() <> "/endpoints/new"} class="btn btn-primary" > <.icon name="hero-plus" class="w-5 h-5 mr-2" /> New Endpoint <% end %>
<%!-- Content --%> <%= if @active_tab == "setup" do %> <%!-- Setup/Empty State --%>
<.icon name="hero-cpu-chip" class="w-16 h-16 text-base-content/30" />

No Endpoints Configured

Create your first AI endpoint to start making API calls. Each endpoint combines provider credentials, model selection, and parameters.

<.link navigate={PhoenixKit.Utils.Routes.ai_path() <> "/endpoints/new"} class="btn btn-primary mt-4" > <.icon name="hero-plus" class="w-5 h-5 mr-2" /> Create First Endpoint
<% end %> <%= if @active_tab == "endpoints" do %> <%!-- Endpoints List --%> <%= if @has_endpoints do %> <%!-- Sort Controls --%>
Sort by: <%= for {field, label} <- @sort_options do %> <% end %>
<%= for endpoint <- @endpoints do %> <% stats = Map.get(@endpoint_stats, endpoint.id, %{ request_count: 0, total_tokens: 0, total_cost: 0 }) %>
<.link navigate={PhoenixKit.Utils.Routes.ai_path() <> "/endpoints/#{endpoint.id}/edit"} class="badge badge-ghost font-mono hover:badge-primary cursor-pointer" > #{endpoint.id} <.link navigate={PhoenixKit.Utils.Routes.ai_path() <> "/endpoints/#{endpoint.id}/edit"} class="font-semibold text-lg hover:text-primary hover:underline" > {endpoint.name} <.enabled_badge enabled={endpoint.enabled} /> {endpoint.provider}
<.icon name="hero-cpu-chip" class="w-4 h-4" /> {PhoenixKit.Modules.AI.Endpoint.short_model_name(endpoint.model)}
<%= if endpoint.temperature do %>
<.icon name="hero-fire" class="w-4 h-4" /> Temp: {endpoint.temperature}
<% end %> <%= if endpoint.max_tokens do %>
<.icon name="hero-document-text" class="w-4 h-4" /> Max: {endpoint.max_tokens}
<% end %>
<%!-- Usage Stats Row --%>
<.icon name="hero-arrow-path" class="w-4 h-4" /> {stats.request_count} requests
<.icon name="hero-document-text" class="w-4 h-4" /> {PhoenixKit.Modules.AI.Request.format_tokens(stats.total_tokens)} tokens
<.icon name="hero-currency-dollar" class="w-4 h-4" /> {PhoenixKit.Modules.AI.Request.format_cost(stats.total_cost)}
<.icon name="hero-clock" class="w-4 h-4" /> <%= if stats[:last_used_at] do %> <.time_ago datetime={stats.last_used_at} /> <% else %> Never used <% end %>
<%= if endpoint.description do %>

{endpoint.description}

<% end %>
<%!-- Actions --%>
<.icon name="hero-ellipsis-vertical" class="w-5 h-5" />
  • <.link navigate={PhoenixKit.Utils.Routes.ai_path() <> "/endpoints/#{endpoint.id}/edit"}> <.icon name="hero-pencil" class="w-4 h-4" /> Edit
<% end %>
<%!-- Pagination --%> <% total_pages = ceil(@total_endpoints / @page_size) %> <%= if total_pages > 1 do %>
<%= for page_num <- 1..total_pages do %> <% end %>
<% end %> <% else %>
<.icon name="hero-cpu-chip" class="w-16 h-16 text-base-content/30" />

No Endpoints Yet

Create your first AI endpoint to get started.

<.link navigate={PhoenixKit.Utils.Routes.ai_path() <> "/endpoints/new"} class="btn btn-primary mt-2" > <.icon name="hero-plus" class="w-5 h-5 mr-2" /> Create Endpoint
<% end %> <% end %> <%= if @active_tab == "usage" do %> <%!-- Usage Statistics --%> <%= if @usage_loaded do %> <%!-- Usage Stats --%>
<%!-- Today --%>
Requests / Tokens today
{@usage_stats.today.total_requests} / {PhoenixKit.Modules.AI.Request.format_tokens( @usage_stats.today.total_tokens )}
Successful / Errors today
{@usage_stats.today.success_count} / {@usage_stats.today.error_count}
Avg Latency today
{PhoenixKit.Modules.AI.Request.format_latency( @usage_stats.today.avg_latency_ms )}
<%!-- 30 Days --%>
Requests / Tokens (30 days)
{@usage_stats.last_30_days.total_requests} / {PhoenixKit.Modules.AI.Request.format_tokens( @usage_stats.last_30_days.total_tokens )}
Successful / Errors (30 days)
{@usage_stats.last_30_days.success_count} / {@usage_stats.last_30_days.error_count}
Avg Latency (30 days)
{PhoenixKit.Modules.AI.Request.format_latency( @usage_stats.last_30_days.avg_latency_ms )}
<%!-- All Time --%>
Requests / Tokens (all time)
{@usage_stats.all_time.total_requests} / {PhoenixKit.Modules.AI.Request.format_tokens( @usage_stats.all_time.total_tokens )}
Successful / Errors (all time)
{@usage_stats.all_time.success_count} / {@usage_stats.all_time.error_count}
Avg Latency (all time)
{PhoenixKit.Modules.AI.Request.format_latency( @usage_stats.all_time.avg_latency_ms )}
<%!-- Recent Requests --%>

Recent Requests

<%!-- Filters --%>
<%!-- Date filter (always visible) --%> <%!-- Other filters (only show dropdowns with 2+ options) --%> <%= if length(@usage_filter_options.endpoints) > 1 do %> <% end %> <%= if length(@usage_filter_options.models) > 1 do %> <% end %> <%= if length(@usage_filter_options.statuses) > 1 do %> <% end %> <%= if length(@usage_filter_options.sources) > 1 do %> <% end %> <%= if @usage_filter_endpoint || @usage_filter_model || @usage_filter_status || @usage_filter_source || @usage_filter_date != "7d" do %> <% end %>
<%!-- Results count --%>
Showing {length(@usage_requests)} of {@usage_total_requests} requests
<%= if Enum.empty?(@usage_requests) do %>

No requests match the current filters

<% else %>
<%!-- Always visible --%> <%!-- Hidden until lg (accounts for sidebar) --%> <%!-- Hidden until lg - Prompt column --%> <%!-- Always visible --%> <%!-- Hidden until xl (accounts for sidebar) --%> <%!-- Hidden until xl (accounts for sidebar) --%> <%!-- Hidden until lg (accounts for sidebar) --%> <%!-- Always visible --%> <%!-- Hidden until xl (accounts for sidebar) --%> <%!-- Always visible --%> <%= for request <- @usage_requests do %> <%!-- Always visible --%> <%!-- Hidden until lg (accounts for sidebar) --%> <%!-- Hidden until lg - Prompt column --%> <%!-- Always visible --%> <%!-- Hidden until xl (accounts for sidebar) --%> <%!-- Hidden until xl (accounts for sidebar) --%> <%!-- Hidden until lg (accounts for sidebar) --%> <%!-- Always visible --%> <%!-- Hidden until xl (accounts for sidebar) --%> <%!-- Always visible --%> <% end %>
<.time_ago datetime={request.inserted_at} /> {PhoenixKit.Modules.AI.Request.short_model_name(request.model)} {PhoenixKit.Modules.AI.Request.status_label(request.status)} <%= if request.error_message do %>
<.icon name="hero-information-circle" class="w-4 h-4 text-error ml-1" />
<% end %>
<%= if length(@usage_requests) < @usage_total_requests do %>
<% end %> <% end %>
<% else %>
<% end %> <% end %>
<%!-- Request Details Modal --%> <%= if @selected_request do %>

Request Details

<%!-- Request Summary --%>
ID
{@selected_request.id}
Status
{PhoenixKit.Modules.AI.Request.status_label(@selected_request.status)}
Latency
{PhoenixKit.Modules.AI.Request.format_latency(@selected_request.latency_ms)}
Cost
{PhoenixKit.Modules.AI.Request.format_cost(@selected_request.cost_cents)}
<%!-- Model, Endpoint & Prompt Info --%>
Endpoint
{@selected_request.endpoint_name || "-"}
Prompt
<%= if @selected_request.prompt_name do %> <.link navigate={PhoenixKit.Utils.Routes.ai_path() <> "/prompts/#{@selected_request.prompt_id}/edit"} class="link link-hover link-primary" > {@selected_request.prompt_name} <% else %> - <% end %>
Model
{@selected_request.model}
<%!-- Token Usage --%>
Input Tokens
{PhoenixKit.Modules.AI.Request.format_tokens(@selected_request.input_tokens)}
Output Tokens
{PhoenixKit.Modules.AI.Request.format_tokens(@selected_request.output_tokens)}
Total Tokens
{PhoenixKit.Modules.AI.Request.format_tokens(@selected_request.total_tokens)}
<%!-- Timestamp --%>
Timestamp
{Calendar.strftime(@selected_request.inserted_at, "%Y-%m-%d %H:%M:%S UTC")}
<%!-- Error Message (if any) --%> <%= if @selected_request.error_message do %>
Error Message
{@selected_request.error_message}
<% end %> <%!-- Messages (Request) --%> <%= if @selected_request.metadata["messages"] do %>
Request Messages
<%= for msg <- @selected_request.metadata["messages"] do %>
{msg["role"]}
{msg["content"]}
<% end %>
<% end %> <%!-- Response --%> <%= if @selected_request.metadata["response"] do %>
Response
assistant
{@selected_request.metadata["response"]}
<% end %> <%!-- Parameters Used --%> <% params_to_show = Map.take(@selected_request.metadata || %{}, ["temperature", "max_tokens"]) %> <%= if params_to_show != %{} do %>
Parameters
<%= for {key, value} <- params_to_show, not is_nil(value) do %> {key}: {value} <% end %>
<% end %> <%!-- Source (caller module/function) --%> <%= if @selected_request.metadata["source"] do %>
Source
{@selected_request.metadata["source"]}
<% end %> <%!-- Caller Context (request ID, node, memory, pid) --%> <%= if ctx = @selected_request.metadata["caller_context"] do %>
Caller Context
<%= if ctx["request_id"] do %>
Request ID: {ctx["request_id"]}
<% end %>
Node: {ctx["node"]}
PID: {ctx["pid"]}
<%= if ctx["memory_bytes"] do %>
Memory: {format_bytes(ctx["memory_bytes"])}
<% end %>
<% end %> <%!-- Stacktrace (collapsible) --%> <%= if @selected_request.metadata["stacktrace"] && length(@selected_request.metadata["stacktrace"]) > 0 do %>
<.icon name="hero-queue-list" class="w-4 h-4 inline mr-1" /> Stacktrace ({length(@selected_request.metadata["stacktrace"])} frames) 
{Enum.join(@selected_request.metadata["stacktrace"], "\n")}
<% end %> <%!-- Request Payload (what we sent) --%> <%= if @selected_request.metadata["request_payload"] do %>
<.icon name="hero-arrow-up-on-square" class="w-4 h-4 inline mr-1" /> Request Payload (sent to API) 
{Jason.encode!(@selected_request.metadata["request_payload"], pretty: true)}
<% end %> <%!-- Raw API Response --%> <%= if @selected_request.metadata["raw_response"] do %>
<.icon name="hero-arrow-down-on-square" class="w-4 h-4 inline mr-1" /> API Response (raw) 
{Jason.encode!(@selected_request.metadata["raw_response"], pretty: true)}
<% end %> <%!-- Database Record --%>
<.icon name="hero-circle-stack" class="w-4 h-4 inline mr-1" /> Database Record 
{Jason.encode!(Map.drop(@selected_request, [:metadata]) |> Map.put(:metadata, "...truncated..."), pretty: true)}
<% end %>