Skip to content

feat: add OrcaRouter as a BYOK provider with a searchable model picker#1632

Open
zhenjunchen-png wants to merge 3 commits into
eigent-ai:mainfrom
zhenjunchen-png:feat/add-orcarouter-provider
Open

feat: add OrcaRouter as a BYOK provider with a searchable model picker#1632
zhenjunchen-png wants to merge 3 commits into
eigent-ai:mainfrom
zhenjunchen-png:feat/add-orcarouter-provider

Conversation

@zhenjunchen-png
Copy link
Copy Markdown

@zhenjunchen-png zhenjunchen-png commented May 12, 2026

Related Issue

Closes #1631

Description

Adds OrcaRouter (https://www.orcarouter.ai) as a dedicated BYOK provider card in Agents → Models. OrcaRouter is an OpenAI-compatible LLM gateway that routes each request to the cheapest or fastest provider across many upstream providers.

Follows the existing alias pattern used by ModelArk, grok, llama.cpp: provider id orcarouter is aliased to openai-compatible-model on the backend, so no ModelPlatformType / CAMEL changes are required.

This PR additionally introduces two generic primitives on the Provider type:

  • modelsEndpoint — when set, the card renders a searchable model dropdown instead of a free-form text input.
  • websiteUrl — when set, the card renders a small "Visit " link inline after the description.

Only OrcaRouter opts in to both in this PR; all other existing providers (OpenAI, Anthropic, OpenRouter, …) are unchanged.

Files

  • backend/app/model/model_platform.py: PLATFORM_ALIAS_MAPPING entry ("orcarouter": "openai-compatible-model").
  • src/types/index.ts: add optional modelsEndpoint?: string and websiteUrl?: string to the Provider type. Generic fields; no behavior change for existing providers.
  • src/lib/llm.ts: INIT_PROVODERS entry with default base URL https://api.orcarouter.ai/v1, modelsEndpoint: '/models', and websiteUrl: 'https://www.orcarouter.ai'. Card is positioned immediately after Anthropic (above OpenRouter) so the two gateway-style providers sit together.
  • src/assets/model/orcarouter.svg: official OrcaRouter brand logo.
  • src/pages/Agents/Models.tsx: cloud-provider model fetch state, conditional render (Combobox when modelsEndpoint is set, original Input otherwise), inline "Visit " link rendering, plus icon import / register in getModelImage.
  • src/lib/providerModels.ts (new): fetchProviderModels (Bearer-auth GET + filter chat-capable + group by id prefix) and localStorage cache helpers.
  • src/pages/Agents/components/ProviderModelCombobox.tsx (new): Popover + Command-based combobox; left column lists upstream providers (<prefix> of <prefix>/<model>), right column shows that provider's models with search filter; refresh button next to the trigger.
  • docs/core/models/byok.md: add row to Supported Providers table.

Disclosure: I'm an engineer on the OrcaRouter team.

Testing Evidence (REQUIRED)

End-to-end tested locally (node node_modules/vite/bin/vite.js):

  1. Card placement: OrcaRouter appears immediately after Anthropic, above OpenRouter, with the OrcaRouter logo and pre-filled https://api.orcarouter.ai/v1 API host.
  2. Empty API key state: Model Type combobox trigger and refresh button are disabled with a clear "Enter API Key first." helper inside the popover.
  3. Refresh: with a valid API key entered, the refresh icon shows a spinner; on success, the left column populates with upstream provider tabs (anthropic / deepseek / google / grok / kimi / minimax / openai / qwen, each with a model count) and the right column populates with the active provider's models.
  4. Search: typing in the search box narrows the active provider's right-column list.
  5. Selection: choosing a model closes the popover and the trigger shows the full <provider>/<model> id.
  6. Save + set as default: header shows "Custom Model / OrcaRouter ()".
  7. Project task run: agent request was served by OrcaRouter successfully.
  8. Cache: closing and re-opening the app restores the model list from localStorage (keyed per provider id) without re-fetching; explicit refresh re-syncs.

npm run type-check and npx eslint both pass on the changed files; existing test files were not touched.

Screenshot: drag the local Models-page screenshot into this section after opening the PR — GitHub will upload it to user-attachments automatically.

  • I have included human-verified testing evidence in this PR.
  • This PR includes frontend/UI changes, and I attached screenshot(s) or screen recording(s).
  • No frontend/UI changes in this PR.

What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Contribution Guidelines Acknowledgement

zhenjun.chen added 3 commits May 12, 2026 15:38
Adds OrcaRouter (https://orcarouter.ai) as a dedicated BYOK provider
card in Agents > Models. OrcaRouter is an OpenAI-compatible LLM
gateway that routes each request to the cheapest or fastest provider
across many upstream model providers.

Follows the existing alias pattern for OpenAI-compatible gateways
(ModelArk, grok, llama.cpp): provider id `orcarouter` is aliased to
`openai-compatible-model` on the backend, so no CAMEL changes are
required.

- backend/app/model/model_platform.py: PLATFORM_ALIAS_MAPPING entry
- src/lib/llm.ts: INIT_PROVODERS entry with default base URL,
  positioned at the end of the list to preserve existing ordering
- src/assets/model/orcarouter.svg: official OrcaRouter brand logo
- src/pages/Agents/Models.tsx: import + register icon
- docs/core/models/byok.md: add row to Supported Providers table
Adds a generic `Provider.modelsEndpoint` field and a two-column
searchable dropdown for picking a model when the field is set. Only
OrcaRouter opts in; other providers are untouched (text input as-is).

Also moves the OrcaRouter card up the list (after Anthropic, above
OpenRouter) so gateway-style providers sit together near the top.

- src/types/index.ts: add optional `modelsEndpoint` to Provider
- src/lib/llm.ts: reorder OrcaRouter + set `modelsEndpoint: '/models'`
- src/lib/providerModels.ts (new): fetch /v1/models with Bearer auth,
  filter chat-capable, group by id prefix, localStorage cache
- src/pages/Agents/components/ProviderModelCombobox.tsx (new): Popover
  + Command combobox with provider list on the left, model list on the
  right, search filters the active provider's models, refresh button
- src/pages/Agents/Models.tsx: state for fetched models, conditional
  render combobox vs input based on `modelsEndpoint`
Adds an optional `Provider.websiteUrl` field. When set, the BYOK card
renders a "Visit <provider name>" link inline after the description.

Only OrcaRouter opts in (https://www.orcarouter.ai); other existing
providers are unchanged.

Link text uses `item.name` so the field stays a generic primitive —
future providers can opt in by adding the field with no copy changes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Add OrcaRouter as a BYOK provider with a searchable model picker

1 participant