From 32f5f857d2b61399b41370e7aea6b3ee2ee8ae65 Mon Sep 17 00:00:00 2001 From: pftom <1043269994@qq.com> Date: Wed, 29 Apr 2026 07:44:00 +0800 Subject: [PATCH] feat(providers): support OpenAI-compatible / Azure / Google Gemini endpoints (closes #16) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The hosted-API BYOK fallback was hard-wired to api.anthropic.com. Issue #16 asks for Azure (Microsoft OpenAI hosting Anthropic-style models) but the same plumbing unlocks every common BYOK target — OpenRouter, LiteLLM, DeepSeek, Groq, Together, Mistral, plus Google Gemini direct. Provider model: - New `provider: 'anthropic' | 'openai' | 'azure' | 'google'` discriminator on AppConfig (defaults to 'anthropic' so existing localStorage configs migrate seamlessly). - src/providers/model.ts routes to one of four streaming clients: anthropic.ts (existing SDK path), openai.ts (new SSE pump shared with azure.ts), azure.ts (deployment URL + api-key header), google.ts (Generative Language streamGenerateContent). - src/providers/presets.ts ships per-provider defaults (baseUrl, model suggestions, api-key placeholder, Azure api-version flag) so the UI can stay declarative. UI: - SettingsDialog now shows a provider picker on the Hosted-API tab and surfaces an Azure-only api-version field. Provider switches preserve any non-empty user values. - EntryView / AvatarMenu env meta line shows the active provider label. - en + zh-CN locales updated; README + README.zh-CN document every provider, with explicit guidance to reach AWS Bedrock / GCP Vertex Anthropic models via a server-side LiteLLM proxy (signing belongs on the server, not the browser). Why an OpenAI-compatible adapter rather than a native Bedrock/Vertex client: AWS SigV4 and GCP service-account JWTs aren't safe to do from a browser holding long-lived BYOK credentials. LiteLLM (or any Anthropic/OpenAI-compatible proxy) sidesteps that and is the same path lobe-chat uses for Bedrock/Vertex. --- README.md | 36 ++++++-- README.zh-CN.md | 36 ++++++-- src/components/AvatarMenu.tsx | 5 +- src/components/EntryView.tsx | 8 +- src/components/ProjectView.tsx | 4 +- src/components/SettingsDialog.tsx | 89 +++++++++++++++++--- src/i18n/locales/en.ts | 24 ++++-- src/i18n/locales/zh-CN.ts | 24 ++++-- src/i18n/types.ts | 5 ++ src/providers/azure.ts | 56 +++++++++++++ src/providers/google.ts | 105 +++++++++++++++++++++++ src/providers/model.ts | 32 +++++++ src/providers/openai.ts | 135 ++++++++++++++++++++++++++++++ src/providers/presets.ts | 108 ++++++++++++++++++++++++ src/state/config.ts | 2 + src/types.ts | 15 ++++ 16 files changed, 636 insertions(+), 48 deletions(-) create mode 100644 src/providers/azure.ts create mode 100644 src/providers/google.ts create mode 100644 src/providers/model.ts create mode 100644 src/providers/openai.ts create mode 100644 src/providers/presets.ts diff --git a/README.md b/README.md index f924994..8368877 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ OD stands on four open-source shoulders: | | What you get | |---|---| -| **Coding agents supported** | Claude Code · Codex CLI · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · Anthropic API (BYOK fallback) | +| **Coding agents supported** | Claude Code · Codex CLI · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · Hosted-API BYOK fallback (Anthropic · OpenAI-compatible · Azure · Google Gemini, plus AWS Bedrock & GCP Vertex via proxy) | | **Design systems built-in** | **71** — 2 hand-authored starters + 69 product systems (Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma, …) imported from [`awesome-design-md`][acd2] | | **Skills built-in** | **19** — prototype, deck, mobile, dashboard, pricing, docs, blog, SaaS landing, plus 10 document/work-product templates (PM spec, weekly update, OKRs, runbook, kanban, …) | | **Visual directions** | 5 curated schools (Editorial Monocle · Modern Minimal · Tech Utility · Brutalist · Soft Warm) — each ships a deterministic OKLch palette + font stack | @@ -180,7 +180,7 @@ Adding a skill takes one folder. Read [`docs/skills-protocol.md`](docs/skills-pr ### 1 · We don't ship an agent. Yours is good enough. -The daemon scans your `PATH` for [`claude`](https://docs.anthropic.com/en/docs/claude-code), [`codex`](https://github.com/openai/codex), [`cursor-agent`](https://www.cursor.com/cli), [`gemini`](https://github.com/google-gemini/gemini-cli), [`opencode`](https://opencode.ai/), and [`qwen`](https://github.com/QwenLM/qwen-code) on startup. Whichever it finds becomes the design engine — driven via stdio, with one adapter per CLI. Inspired by [`multica`](https://github.com/multica-ai/multica) and [`cc-switch`](https://github.com/farion1231/cc-switch). No CLI? `Anthropic API · BYOK` is the same pipeline minus the spawn. +The daemon scans your `PATH` for [`claude`](https://docs.anthropic.com/en/docs/claude-code), [`codex`](https://github.com/openai/codex), [`cursor-agent`](https://www.cursor.com/cli), [`gemini`](https://github.com/google-gemini/gemini-cli), [`opencode`](https://opencode.ai/), and [`qwen`](https://github.com/QwenLM/qwen-code) on startup. Whichever it finds becomes the design engine — driven via stdio, with one adapter per CLI. Inspired by [`multica`](https://github.com/multica-ai/multica) and [`cc-switch`](https://github.com/farion1231/cc-switch). No CLI? The `Hosted API · BYOK` fallback streams directly from the browser to **Anthropic**, any **OpenAI-compatible** endpoint (OpenRouter / LiteLLM / DeepSeek / Groq / Together / Mistral …), **Azure OpenAI**, or **Google Gemini** — pick the provider in Settings, paste a key, go. AWS Bedrock and GCP Vertex Anthropic models work the same way through a server-side LiteLLM (or equivalent) proxy pointed at the `Anthropic` provider, since SigV4 / GCP JWT signing belongs on the server, not the browser. ### 2 · Skills are files, not plugins. @@ -227,8 +227,10 @@ Every layer is composable. Every layer is a file you can edit. Read [`src/prompt │ /api/* (proxied in dev) │ direct (BYOK) ▼ ▼ ┌──────────────────────┐ ┌──────────────────────┐ - │ Local daemon │ │ Anthropic SDK │ - │ (Express + SQLite) │ │ (browser fallback) │ + │ Local daemon │ │ Hosted-API router │ + │ (Express + SQLite) │ │ Anthropic · OpenAI- │ + │ │ │ compatible · Azure │ + │ │ │ · Google Gemini │ │ │ └──────────────────────┘ │ /api/agents │ │ /api/skills │ @@ -268,7 +270,7 @@ The first load: 1. Detects which agent CLIs you have on `PATH` and picks one automatically. 2. Loads 19 skills + 71 design systems. -3. Pops the welcome dialog so you can paste an Anthropic key (only needed for the BYOK fallback path). +3. Pops the welcome dialog so you can pick a hosted-API provider — **Anthropic**, **OpenAI-compatible** (OpenRouter / LiteLLM / DeepSeek / Groq / Together / Mistral / OpenAI), **Azure OpenAI**, or **Google Gemini** — and paste the matching key (only needed for the BYOK fallback path; for AWS Bedrock or GCP Vertex Anthropic models, run a server-side LiteLLM proxy and point the `Anthropic` provider at it). 4. **Auto-creates `./.od/`** — the local runtime folder for the SQLite project DB, per-project artifacts, and saved renders. There is no `od init` step; the daemon `mkdir`s everything it needs on boot. Type a prompt, hit **Send**, watch the question form arrive, fill it, watch the todo card stream, watch the artifact render. Click **Save to disk** or download as a project ZIP. @@ -334,7 +336,12 @@ open-design/ │ │ └── zip.ts ← project archive │ ├── providers/ │ │ ├── daemon.ts ← /api/chat SSE stream consumer -│ │ ├── anthropic.ts ← BYOK Anthropic SDK path +│ │ ├── model.ts ← BYOK provider router (anthropic / openai / azure / google) +│ │ ├── anthropic.ts ← Anthropic SDK path (also covers any Anthropic-compatible proxy) +│ │ ├── openai.ts ← OpenAI-compatible SSE (OpenRouter / LiteLLM / DeepSeek / Groq / Together) +│ │ ├── azure.ts ← Azure OpenAI deployment URLs + api-key header +│ │ ├── google.ts ← Google Generative Language streamGenerateContent +│ │ ├── presets.ts ← per-provider defaults shown in Settings │ │ └── registry.ts ← /api/agents, /api/skills, /api/design-systems │ └── state/ ← config + projects (localStorage + daemon-backed) │ @@ -499,10 +506,25 @@ Auto-detected from `PATH` on daemon boot. No config required. | [Gemini CLI](https://github.com/google-gemini/gemini-cli) | `gemini` | line-buffered | `gemini -p` | | [OpenCode](https://opencode.ai/) | `opencode` | line-buffered | `opencode run` | | [Qwen Code](https://github.com/QwenLM/qwen-code) | `qwen` | line-buffered | `qwen -p` | -| Anthropic API · BYOK | n/a | SSE direct | Browser fallback when no CLI is on PATH | +| Hosted API · BYOK | n/a | SSE direct | Browser fallback when no CLI is on PATH — pick any of the providers below | Adding a new CLI is one entry in [`daemon/agents.js`](daemon/agents.js). Streaming format is one of `claude-stream-json` (typed events) or `plain` (raw text). +### Hosted-API providers (BYOK fallback) + +When no CLI is detected, OD streams directly from the browser to a hosted endpoint. Pick one in **Settings → Hosted API**, paste a key, optionally tweak the base URL. + +| Provider | Wire format | What it covers | +|---|---|---| +| **Anthropic** | `@anthropic-ai/sdk` | `api.anthropic.com`, plus any Anthropic-compatible proxy (LiteLLM, custom gateways, **AWS Bedrock** & **GCP Vertex** via a server-side proxy) | +| **OpenAI-compatible** | `/chat/completions` SSE | OpenAI proper, [OpenRouter](https://openrouter.ai), [LiteLLM proxy](https://docs.litellm.ai/), [DeepSeek](https://platform.deepseek.com/), [Groq](https://groq.com/), [Together](https://together.ai/), [Mistral](https://mistral.ai/), and any other OpenAI-shaped endpoint | +| **Azure OpenAI** | `/openai/deployments//chat/completions` SSE + `api-key` header | Azure-hosted OpenAI deployments. Base URL is the resource endpoint, Model is the deployment name, plus the Azure `api-version` | +| **Google Gemini** | `:streamGenerateContent?alt=sse` | Google Generative Language API direct (Gemini family) | + +**On AWS Bedrock & GCP Vertex with Anthropic models:** Both require credential signing (SigV4 / GCP service-account JWT) which is unsafe to do from a browser with long-lived BYOK credentials. The recommended path is to run a server-side proxy ([LiteLLM](https://docs.litellm.ai/) works well — it speaks Anthropic-compatible *and* OpenAI-compatible) and point either the `Anthropic` or `OpenAI-compatible` provider at the proxy URL. The signing stays on the server where it belongs. + +Adding a fifth wire format is mechanical: a row in `ModelProvider`, an entry in [`src/providers/presets.ts`](src/providers/presets.ts), a `stream` function alongside [`anthropic.ts` / `openai.ts` / `azure.ts` / `google.ts`](src/providers/), one more `case` in [`src/providers/model.ts`](src/providers/model.ts). + ## References & lineage Every external project this repo borrows from. Each link goes to the source so you can verify the provenance. diff --git a/README.zh-CN.md b/README.zh-CN.md index 552540e..74b12f3 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -39,7 +39,7 @@ OD 站在四个开源项目的肩膀上： | | 你拿到的 | |---|---| -| **支持的 coding agent** | Claude Code · Codex CLI · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · Anthropic API（BYOK 兜底） | +| **支持的 coding agent** | Claude Code · Codex CLI · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · 托管 API · BYOK 兜底（Anthropic · OpenAI 兼容 · Azure · Google Gemini，AWS Bedrock 与 GCP Vertex 通过代理接入） | | **内置 design system** | **71 套** —— 2 套手写起手 + 69 套从 [`awesome-design-md`][acd2] 导入的产品系统（Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple、Cursor、Supabase、Figma…） | | **内置 skill** | **19 个** —— 原型 / deck / 移动端 / dashboard / pricing / docs / blog / SaaS landing，外加 10 个文档与办公产物模板（PM 规范、周报、OKR、runbook、看板…） | | **视觉方向** | 5 套精选流派（Editorial Monocle · Modern Minimal · Tech Utility · Brutalist · Soft Warm），每一套自带 OKLch 色板 + 字体栈 | @@ -180,7 +180,7 @@ OD 站在四个开源项目的肩膀上： ### 1 · 我们不带 agent，你的就够好 -Daemon 启动时扫 `PATH`，找 [`claude`](https://docs.anthropic.com/en/docs/claude-code)、[`codex`](https://github.com/openai/codex)、[`cursor-agent`](https://www.cursor.com/cli)、[`gemini`](https://github.com/google-gemini/gemini-cli)、[`opencode`](https://opencode.ai/)、[`qwen`](https://github.com/QwenLM/qwen-code)。哪个在就用哪个 —— 通过 stdio 驱动，每个 CLI 一个 adapter。灵感来自 [`multica`](https://github.com/multica-ai/multica) 和 [`cc-switch`](https://github.com/farion1231/cc-switch)。一个 CLI 都没有？`Anthropic API · BYOK` 就是同一条管线减去 spawn。 +Daemon 启动时扫 `PATH`，找 [`claude`](https://docs.anthropic.com/en/docs/claude-code)、[`codex`](https://github.com/openai/codex)、[`cursor-agent`](https://www.cursor.com/cli)、[`gemini`](https://github.com/google-gemini/gemini-cli)、[`opencode`](https://opencode.ai/)、[`qwen`](https://github.com/QwenLM/qwen-code)。哪个在就用哪个 —— 通过 stdio 驱动，每个 CLI 一个 adapter。灵感来自 [`multica`](https://github.com/multica-ai/multica) 和 [`cc-switch`](https://github.com/farion1231/cc-switch)。一个 CLI 都没有？`托管 API · BYOK` 就是同一条管线减去 spawn —— 浏览器直连 **Anthropic**、任意 **OpenAI 兼容**端点（OpenRouter / LiteLLM / DeepSeek / Groq / Together / Mistral …）、**Azure OpenAI**、或 **Google Gemini**。在 Settings 里选渠道、贴 Key、走起。AWS Bedrock 和 GCP Vertex 上的 Anthropic 模型按同样的方式接入：服务端跑一个 LiteLLM（或同类）代理，再把 `Anthropic` 渠道指向它 —— SigV4 / GCP JWT 签名应留在服务器，不放进浏览器。 ### 2 · Skill 是文件，不是插件 @@ -227,8 +227,10 @@ DISCOVERY 指令 （turn-1 表单、turn-2 品牌分支、TodoWrite、 │ /api/* （dev 走代理） │ direct (BYOK) ▼ ▼ ┌──────────────────────┐ ┌──────────────────────┐ - │ 本地 daemon │ │ Anthropic SDK │ - │ （Express + SQLite）│ │ （浏览器兜底） │ + │ 本地 daemon │ │ 托管 API 路由器 │ + │ （Express + SQLite）│ │ Anthropic · OpenAI │ + │ │ │ 兼容 · Azure · Google│ + │ │ │ Gemini │ │ │ └──────────────────────┘ │ /api/agents │ │ /api/skills │ @@ -268,7 +270,7 @@ open http://localhost:5173 1. 检测你 `PATH` 上有哪些 agent CLI，自动选一个。 2. 加载 19 个 skill + 71 套 design system。 -3. 弹欢迎对话框，让你贴 Anthropic key（仅 BYOK 兜底路径需要）。 +3. 弹欢迎对话框，让你挑一个托管 API 渠道 —— **Anthropic**、**OpenAI 兼容**（OpenRouter / LiteLLM / DeepSeek / Groq / Together / Mistral / OpenAI）、**Azure OpenAI** 或 **Google Gemini** —— 并贴上对应的 Key（仅 BYOK 兜底路径需要；要在浏览器里调 AWS Bedrock / GCP Vertex 上的 Anthropic 模型，建议在服务器跑一个 LiteLLM 代理，再把 `Anthropic` 渠道指向它）。 4. **自动创建 `./.od/`** —— 本地运行时目录，存放 SQLite 项目库、各项目工作区、保存下来的 artifact。**没有** `od init` 这一步，daemon 启动时会自己 `mkdir`。 输入需求，回车，看 question form 跳出来，填，看 todo 卡片流动，看 artifact 渲染。点 **Save to disk** 或导出整个项目 ZIP。 @@ -334,7 +336,12 @@ open-design/ │ │ └── zip.ts ← 项目打包 │ ├── providers/ │ │ ├── daemon.ts ← /api/chat SSE 流消费者 -│ │ ├── anthropic.ts ← BYOK Anthropic SDK 路径 +│ │ ├── model.ts ← BYOK 渠道路由（anthropic / openai / azure / google） +│ │ ├── anthropic.ts ← Anthropic SDK 路径（也涵盖任意 Anthropic 兼容代理） +│ │ ├── openai.ts ← OpenAI 兼容 SSE（OpenRouter / LiteLLM / DeepSeek / Groq / Together） +│ │ ├── azure.ts ← Azure OpenAI 部署 URL + api-key 头 +│ │ ├── google.ts ← Google Generative Language streamGenerateContent +│ │ ├── presets.ts ← Settings 中各渠道的默认值 │ │ └── registry.ts ← /api/agents、/api/skills、/api/design-systems │ └── state/ ← config + projects（localStorage + daemon 持久化） │ @@ -499,10 +506,25 @@ Daemon 启动时从 `PATH` 自动检测，无需配置。 | [Gemini CLI](https://github.com/google-gemini/gemini-cli) | `gemini` | line-buffered | `gemini -p` | | [OpenCode](https://opencode.ai/) | `opencode` | line-buffered | `opencode run` | | [Qwen Code](https://github.com/QwenLM/qwen-code) | `qwen` | line-buffered | `qwen -p` | -| Anthropic API · BYOK | n/a | SSE 直连 | 没装任何 CLI 时的浏览器兜底 | +| 托管 API · BYOK | n/a | SSE 直连 | 没装任何 CLI 时的浏览器兜底 —— 在下方任意一个渠道里挑一个 | 加一个新 CLI = 在 [`daemon/agents.js`](daemon/agents.js) 里加一项。流式格式从 `claude-stream-json`（类型化事件）和 `plain`（原始文本）两种里选一个。 +### 托管 API 渠道（BYOK 兜底） + +没检测到 CLI 时，OD 会从浏览器直连一个托管端点。在 **Settings → 托管 API** 里挑一个渠道，贴 Key，按需改 Base URL。 + +| 渠道 | 报文格式 | 覆盖范围 | +|---|---|---| +| **Anthropic** | `@anthropic-ai/sdk` | `api.anthropic.com`，以及任意 Anthropic 兼容代理（LiteLLM、自建网关、**AWS Bedrock** 与 **GCP Vertex** 通过服务端代理接入） | +| **OpenAI 兼容** | `/chat/completions` SSE | OpenAI 官方、[OpenRouter](https://openrouter.ai)、[LiteLLM 代理](https://docs.litellm.ai/)、[DeepSeek](https://platform.deepseek.com/)、[Groq](https://groq.com/)、[Together](https://together.ai/)、[Mistral](https://mistral.ai/)，以及任意 OpenAI 形态的端点 | +| **Azure OpenAI** | `/openai/deployments//chat/completions` SSE + `api-key` 头 | Azure 托管的 OpenAI 部署。Base URL 是资源终结点，Model 是部署名，再加 Azure 的 `api-version` | +| **Google Gemini** | `:streamGenerateContent?alt=sse` | Google Generative Language API 直连（Gemini 系列） | + +**关于 AWS Bedrock 与 GCP Vertex 上的 Anthropic 模型：**两者都需要凭证签名（SigV4 / GCP service-account JWT），用浏览器里长期存放的 BYOK 凭证去签是不安全的。推荐做法：在服务器端跑一个代理（[LiteLLM](https://docs.litellm.ai/) 同时支持 Anthropic 兼容和 OpenAI 兼容），把 `Anthropic` 或 `OpenAI 兼容` 渠道的 Base URL 指向代理，签名留在服务器端。 + +加第五种报文格式很机械：`ModelProvider` 里加一行、[`src/providers/presets.ts`](src/providers/presets.ts) 里加一项、和 [`anthropic.ts` / `openai.ts` / `azure.ts` / `google.ts`](src/providers/) 一起放一个 `stream` 函数、[`src/providers/model.ts`](src/providers/model.ts) 里再加一个 `case`。 + ## 引用与师承 每一个被借鉴的开源项目都列在这里。点链接可以验证师承。 diff --git a/src/components/AvatarMenu.tsx b/src/components/AvatarMenu.tsx index 1b9c792..224cbdc 100644 --- a/src/components/AvatarMenu.tsx +++ b/src/components/AvatarMenu.tsx @@ -1,5 +1,6 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { useT } from '../i18n'; +import { providerLabel } from '../providers/presets'; import { AgentIcon } from './AgentIcon'; import { Icon } from './Icon'; import type { AgentInfo, AppConfig, ExecMode } from '../types'; @@ -82,11 +83,11 @@ export function AvatarMenu({ {config.mode === 'daemon' ? t('avatar.localCli') - : t('avatar.anthropicApi')} + : providerLabel(config.provider)} {config.mode === 'api' - ? safeHost(config.baseUrl) + ? `${config.model}${config.baseUrl ? ` · ${safeHost(config.baseUrl)}` : ''}` : currentAgent ? `${currentAgent.name}${currentAgent.version ? ` · ${currentAgent.version}` : ''}` : t('avatar.noAgentSelected')} diff --git a/src/components/EntryView.tsx b/src/components/EntryView.tsx index 29dd1a8..b9c0117 100644 --- a/src/components/EntryView.tsx +++ b/src/components/EntryView.tsx @@ -1,5 +1,6 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { useT } from '../i18n'; +import { providerLabel } from '../providers/presets'; import type { AgentInfo, AppConfig, @@ -82,16 +83,17 @@ export function EntryView({ const envMetaLine = useMemo(() => { if (config.mode === 'api') { + const provider = providerLabel(config.provider); try { - return `${config.model} · ${new URL(config.baseUrl).host}`; + return `${provider} · ${config.model} · ${new URL(config.baseUrl).host}`; } catch { - return config.model; + return `${provider} · ${config.model}`; } } return currentAgent ? `${currentAgent.name}${currentAgent.version ? ` · ${currentAgent.version}` : ''}` : t('settings.noAgentSelected'); - }, [config.mode, config.model, config.baseUrl, currentAgent, t]); + }, [config.mode, config.model, config.baseUrl, config.provider, currentAgent, t]); // 'Use this prompt' on an example card is a fast path — skip the form and // create the project immediately with sane defaults derived from the skill, diff --git a/src/components/ProjectView.tsx b/src/components/ProjectView.tsx index 634869a..84c3133 100644 --- a/src/components/ProjectView.tsx +++ b/src/components/ProjectView.tsx @@ -1,8 +1,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { createArtifactParser } from '../artifacts/parser'; import { useT } from '../i18n'; -import { streamMessage } from '../providers/anthropic'; import { streamViaDaemon } from '../providers/daemon'; +import { streamModel } from '../providers/model'; import { fetchDesignSystem, fetchProjectFiles, @@ -501,7 +501,7 @@ export function ProjectView({ }); } else { pushEvent({ kind: 'status', label: 'requesting', detail: config.model }); - void streamMessage(config, systemPrompt, nextHistory, controller.signal, { + void streamModel(config, systemPrompt, nextHistory, controller.signal, { onDelta: (delta) => { handlers.onDelta(delta); handlers.onAgentEvent({ kind: 'text', text: delta }); diff --git a/src/components/SettingsDialog.tsx b/src/components/SettingsDialog.tsx index e14a07f..d10b74a 100644 --- a/src/components/SettingsDialog.tsx +++ b/src/components/SettingsDialog.tsx @@ -1,8 +1,9 @@ import { useEffect, useMemo, useState } from 'react'; import { LOCALE_LABEL, LOCALES, useI18n } from '../i18n'; import type { Locale } from '../i18n'; +import { PROVIDER_ORDER, PROVIDER_PRESETS } from '../providers/presets'; import { AgentIcon } from './AgentIcon'; -import type { AgentInfo, AppConfig, ExecMode } from '../types'; +import type { AgentInfo, AppConfig, ExecMode, ModelProvider } from '../types'; interface Props { initial: AppConfig; @@ -14,12 +15,6 @@ interface Props { onRefreshAgents: () => void; } -const SUGGESTED_MODELS = [ - 'claude-opus-4-5', - 'claude-sonnet-4-5', - 'claude-haiku-4-5', -]; - export function SettingsDialog({ initial, agents, @@ -48,10 +43,38 @@ export function SettingsDialog({ const setMode = (mode: ExecMode) => setCfg((c) => ({ ...c, mode })); + // Switching providers swaps in that provider's defaults, but preserves + // any non-empty values the user already typed — they may have a custom + // baseUrl (e.g. an OpenRouter URL while staying on the openai provider) + // they don't want clobbered. Empty fields fall back to the preset. + const setProvider = (provider: ModelProvider) => { + setCfg((c) => { + if (c.provider === provider) return c; + const preset = PROVIDER_PRESETS[provider]; + return { + ...c, + provider, + baseUrl: c.baseUrl?.trim() ? c.baseUrl : preset.baseUrl, + model: c.model?.trim() ? c.model : preset.defaultModel, + }; + }); + }; + + const activePreset = PROVIDER_PRESETS[cfg.provider]; + const canSave = cfg.mode === 'daemon' ? Boolean(cfg.agentId && agents.find((a) => a.id === cfg.agentId)?.available) - : Boolean(cfg.apiKey.trim() && cfg.model.trim() && cfg.baseUrl.trim()); + : Boolean( + cfg.apiKey.trim() && + cfg.model.trim() && + // Azure has no global default base URL — require the user to + // paste their resource endpoint. Other providers ship a usable + // default so a blank field falls back to the preset. + (cfg.provider === 'azure' + ? cfg.baseUrl.trim().length > 0 + : true), + ); return (
@@ -187,14 +210,41 @@ export function SettingsDialog({ ) : (
-

{t('settings.apiSection')}

+
+

{t('settings.apiSection')}

+

{t('settings.providerHint')}

+
+
+
+ {PROVIDER_ORDER.map((id) => { + const preset = PROVIDER_PRESETS[id]; + const active = cfg.provider === id; + return ( + + ); + })}
)} diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts index f37d29d..b0025a8 100644 --- a/src/i18n/locales/en.ts +++ b/src/i18n/locales/en.ts @@ -49,15 +49,15 @@ export const en: Dict = { 'settings.kicker': 'Settings', 'settings.title': 'Execution & model', 'settings.subtitle': - 'Choose between a local code-agent CLI and the Anthropic API (BYOK). Your API key is stored only in this browser.', + 'Choose between a local code-agent CLI and a hosted model provider (BYOK). Anthropic, OpenAI-compatible (OpenRouter / LiteLLM / DeepSeek / Groq …), Azure OpenAI, and Google Gemini are supported. Your API key is stored only in this browser.', 'settings.modeAria': 'Execution mode', 'settings.modeDaemon': 'Local CLI', 'settings.modeDaemonHelp': 'Run via a code-agent CLI on your machine', 'settings.modeDaemonOffline': 'Daemon is not running', 'settings.modeDaemonOfflineMeta': 'daemon offline', 'settings.modeDaemonInstalledMeta': '{count} installed', - 'settings.modeApi': 'Anthropic API', - 'settings.modeApiMeta': 'BYOK', + 'settings.modeApi': 'Hosted API', + 'settings.modeApiMeta': 'BYOK · multi-provider', 'settings.codeAgent': 'Code agent', 'settings.codeAgentHint': 'Detected by scanning your PATH. Pick the CLI you want generations to flow through.', @@ -65,7 +65,7 @@ export const en: Dict = { 'settings.rescanTitle': 'Re-scan PATH', 'settings.noAgentsDetected': 'No agents detected yet. Install one of Claude Code, Codex, Gemini CLI, OpenCode, Cursor Agent, or Qwen, then click Rescan.', - 'settings.apiSection': 'Anthropic API', + 'settings.apiSection': 'Model endpoint', 'settings.apiKey': 'API key', 'settings.showKey': 'Show key', 'settings.hideKey': 'Hide key', @@ -75,11 +75,19 @@ export const en: Dict = { 'settings.baseUrl': 'Base URL', 'settings.apiHint': 'Calls go directly from this browser to the base URL you set. No proxy. The key never leaves localStorage.', + 'settings.providerLabel': 'Provider', + 'settings.providerHint': + 'Pick the wire format. Anthropic also covers any Anthropic-compatible proxy. OpenAI-compatible covers OpenRouter, LiteLLM, DeepSeek, Groq, Together, etc.', + 'settings.apiVersion': 'API version', + 'settings.apiVersionHint': + 'Azure REST api-version (e.g. 2024-08-01-preview). Leave blank to use the default.', + 'settings.proxyHint': + 'Tip: For AWS Bedrock or Google Vertex with Anthropic models, run a server-side proxy (LiteLLM works well) and point the Anthropic provider at it — credential signing belongs on the server, not the browser.', 'settings.skipForNow': 'Skip for now', 'settings.getStarted': 'Get started', 'settings.envConfigure': 'Configure execution mode', 'settings.localCli': 'Local CLI', - 'settings.anthropicApi': 'Anthropic API', + 'settings.anthropicApi': 'Hosted API', 'settings.noAgentSelected': 'no agent selected', 'settings.language': 'Language', 'settings.languageHint': 'Switch the interface language. Saved to this browser.', @@ -200,9 +208,9 @@ export const en: Dict = { 'avatar.title': 'Account & settings', 'avatar.localCli': 'Local CLI', - 'avatar.anthropicApi': 'Anthropic API', + 'avatar.anthropicApi': 'Hosted API', 'avatar.useLocal': 'Use Local CLI', - 'avatar.useApi': 'Use Anthropic API', + 'avatar.useApi': 'Use hosted API', 'avatar.codeAgent': 'Code agent', 'avatar.rescan': 'Rescan PATH', 'avatar.settings': 'Settings', @@ -411,7 +419,7 @@ export const en: Dict = { 'agentPicker.modeChoose': 'Choose execution mode', 'agentPicker.localCli': 'Local CLI', 'agentPicker.daemonOff': 'daemon off', - 'agentPicker.byok': 'Anthropic API · BYOK', + 'agentPicker.byok': 'Hosted API · BYOK', 'agentPicker.selectAgent': 'Select a detected code-agent CLI', 'agentPicker.noAgents': 'no agents on PATH', 'agentPicker.notInstalled': 'not installed', diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index 3be126f..0c6c038 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -49,22 +49,22 @@ export const zhCN: Dict = { 'settings.kicker': '设置', 'settings.title': '执行模式与模型', 'settings.subtitle': - '在本机的代码代理 CLI 与 Anthropic API（自带 Key）之间切换。API Key 只保存在当前浏览器中。', + '在本机的代码代理 CLI 与托管模型 API（自带 Key）之间切换。支持 Anthropic、OpenAI 兼容（OpenRouter / LiteLLM / DeepSeek / Groq 等）、Azure OpenAI 与 Google Gemini。API Key 只保存在当前浏览器中。', 'settings.modeAria': '执行模式', 'settings.modeDaemon': '本机 CLI', 'settings.modeDaemonHelp': '通过本机的代码代理 CLI 执行', 'settings.modeDaemonOffline': '后台守护进程未运行', 'settings.modeDaemonOfflineMeta': '守护进程未运行', 'settings.modeDaemonInstalledMeta': '已安装 {count} 个', - 'settings.modeApi': 'Anthropic API', - 'settings.modeApiMeta': '自带 Key', + 'settings.modeApi': '托管 API', + 'settings.modeApiMeta': '自带 Key · 多渠道', 'settings.codeAgent': '代码代理', 'settings.codeAgentHint': '通过扫描 PATH 自动检测，选择你希望使用的 CLI。', 'settings.rescan': '↻ 重新扫描', 'settings.rescanTitle': '重新扫描 PATH', 'settings.noAgentsDetected': '尚未检测到任何代理。请安装 Claude Code、Codex、Gemini CLI、OpenCode、Cursor Agent 或 Qwen 中的一个，然后点击「重新扫描」。', - 'settings.apiSection': 'Anthropic API', + 'settings.apiSection': '模型端点', 'settings.apiKey': 'API Key', 'settings.showKey': '显示 Key', 'settings.hideKey': '隐藏 Key', @@ -74,11 +74,19 @@ export const zhCN: Dict = { 'settings.baseUrl': 'Base URL', 'settings.apiHint': '请求会从当前浏览器直连你设置的 Base URL，无中转代理。Key 只存放在 localStorage。', + 'settings.providerLabel': '渠道', + 'settings.providerHint': + '选择请求格式。Anthropic 也涵盖任意 Anthropic 兼容代理；OpenAI 兼容涵盖 OpenRouter、LiteLLM、DeepSeek、Groq、Together 等。', + 'settings.apiVersion': 'API version', + 'settings.apiVersionHint': + 'Azure 的 api-version 查询参数（如 2024-08-01-preview）。留空则使用默认值。', + 'settings.proxyHint': + '提示：若要在浏览器里使用 AWS Bedrock 或 Google Vertex 上的 Anthropic 模型，建议在服务器端跑一个 LiteLLM 代理，再把 Anthropic 渠道指向它 —— 凭证签名应留在服务器，不放进浏览器。', 'settings.skipForNow': '暂时跳过', 'settings.getStarted': '开始使用', 'settings.envConfigure': '配置执行模式', 'settings.localCli': '本机 CLI', - 'settings.anthropicApi': 'Anthropic API', + 'settings.anthropicApi': '托管 API', 'settings.noAgentSelected': '尚未选择代理', 'settings.language': '界面语言', 'settings.languageHint': '切换界面语言，设置仅保存在当前浏览器。', @@ -197,9 +205,9 @@ export const zhCN: Dict = { 'avatar.title': '账户与设置', 'avatar.localCli': '本机 CLI', - 'avatar.anthropicApi': 'Anthropic API', + 'avatar.anthropicApi': '托管 API', 'avatar.useLocal': '使用本机 CLI', - 'avatar.useApi': '使用 Anthropic API', + 'avatar.useApi': '使用托管 API', 'avatar.codeAgent': '代码代理', 'avatar.rescan': '重新扫描 PATH', 'avatar.settings': '设置', @@ -400,7 +408,7 @@ export const zhCN: Dict = { 'agentPicker.modeChoose': '选择执行模式', 'agentPicker.localCli': '本机 CLI', 'agentPicker.daemonOff': '守护进程未运行', - 'agentPicker.byok': 'Anthropic API · 自带 Key', + 'agentPicker.byok': '托管 API · 自带 Key', 'agentPicker.selectAgent': '选择已检测到的代码代理 CLI', 'agentPicker.noAgents': 'PATH 中未发现代理', 'agentPicker.notInstalled': '未安装', diff --git a/src/i18n/types.ts b/src/i18n/types.ts index 0037dca..830070e 100644 --- a/src/i18n/types.ts +++ b/src/i18n/types.ts @@ -85,6 +85,11 @@ export interface Dict { 'settings.model': string; 'settings.baseUrl': string; 'settings.apiHint': string; + 'settings.providerLabel': string; + 'settings.providerHint': string; + 'settings.apiVersion': string; + 'settings.apiVersionHint': string; + 'settings.proxyHint': string; 'settings.skipForNow': string; 'settings.getStarted': string; 'settings.envConfigure': string; diff --git a/src/providers/azure.ts b/src/providers/azure.ts new file mode 100644 index 0000000..70f15b7 --- /dev/null +++ b/src/providers/azure.ts @@ -0,0 +1,56 @@ +/** + * Azure OpenAI streaming client. Wire format is OpenAI's (chat.completions + * SSE), but the URL embeds the deployment name and an api-version query + * string, and auth uses the `api-key` header rather than `Authorization: + * Bearer`. We reuse streamChatCompletions() from openai.ts for the SSE + * pump and only diverge on URL + headers. + */ +import type { AppConfig, ChatMessage } from '../types'; +import type { StreamHandlers } from './anthropic'; +import { streamChatCompletions } from './openai'; + +const DEFAULT_API_VERSION = '2024-08-01-preview'; + +export async function streamAzure( + cfg: AppConfig, + system: string, + history: ChatMessage[], + signal: AbortSignal, + handlers: StreamHandlers, +): Promise { + if (!cfg.apiKey) { + handlers.onError(new Error('Missing Azure key — open Settings and paste one in.')); + return; + } + if (!cfg.baseUrl) { + handlers.onError( + new Error('Missing Azure endpoint — set Base URL to https://.openai.azure.com.'), + ); + return; + } + if (!cfg.model) { + handlers.onError( + new Error('Missing Azure deployment — set Model to your deployment name.'), + ); + return; + } + + const apiVersion = (cfg.apiVersion?.trim() || DEFAULT_API_VERSION); + const url = buildAzureUrl(cfg.baseUrl, cfg.model, apiVersion); + + const body = { + stream: true, + max_tokens: 8192, + messages: [ + ...(system ? [{ role: 'system', content: system }] : []), + ...history.map((m) => ({ role: m.role, content: m.content })), + ], + }; + + await streamChatCompletions(url, cfg.apiKey, body, signal, handlers, 'azure'); +} + +function buildAzureUrl(baseUrl: string, deployment: string, apiVersion: string): string { + const base = baseUrl.replace(/\/+$/, ''); + return `${base}/openai/deployments/${encodeURIComponent(deployment)}/chat/completions?api-version=${encodeURIComponent(apiVersion)}`; +} diff --git a/src/providers/google.ts b/src/providers/google.ts new file mode 100644 index 0000000..f749d68 --- /dev/null +++ b/src/providers/google.ts @@ -0,0 +1,105 @@ +/** + * Google Generative Language API streaming client (Gemini direct). The + * REST surface is at generativelanguage.googleapis.com and accepts an + * api key in the query string. We hit `:streamGenerateContent` with + * `alt=sse` so the response arrives as a server-sent event stream we + * can pump like the OpenAI one. + */ +import type { AppConfig, ChatMessage } from '../types'; +import type { StreamHandlers } from './anthropic'; + +export async function streamGoogle( + cfg: AppConfig, + system: string, + history: ChatMessage[], + signal: AbortSignal, + handlers: StreamHandlers, +): Promise { + if (!cfg.apiKey) { + handlers.onError(new Error('Missing API key — open Settings and paste one in.')); + return; + } + if (!cfg.model) { + handlers.onError(new Error('Missing model — set one in Settings.')); + return; + } + + const base = (cfg.baseUrl || 'https://generativelanguage.googleapis.com').replace(/\/+$/, ''); + const url = `${base}/v1beta/models/${encodeURIComponent(cfg.model)}:streamGenerateContent?alt=sse&key=${encodeURIComponent(cfg.apiKey)}`; + + const contents = history.map((m) => ({ + role: m.role === 'assistant' ? 'model' : 'user', + parts: [{ text: m.content }], + })); + + const body: Record = { contents }; + if (system) { + body.systemInstruction = { role: 'system', parts: [{ text: system }] }; + } + + let acc = ''; + try { + const resp = await fetch(url, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(body), + signal, + }); + + if (!resp.ok || !resp.body) { + const text = await resp.text().catch(() => ''); + handlers.onError(new Error(`upstream ${resp.status}: ${text || 'no body'}`)); + return; + } + + const reader = resp.body.getReader(); + const decoder = new TextDecoder(); + let buf = ''; + + while (true) { + const { value, done } = await reader.read(); + if (done) break; + buf += decoder.decode(value, { stream: true }); + let idx: number; + while ((idx = buf.indexOf('\n\n')) !== -1) { + const frame = buf.slice(0, idx).trim(); + buf = buf.slice(idx + 2); + if (!frame) continue; + for (const line of frame.split('\n')) { + if (!line.startsWith('data:')) continue; + const payload = line.slice(5).trim(); + if (!payload) continue; + let parsed: unknown; + try { + parsed = JSON.parse(payload); + } catch { + continue; + } + const delta = extractGeminiText(parsed); + if (delta) { + acc += delta; + handlers.onDelta(delta); + } + } + } + } + handlers.onDone(acc); + } catch (err) { + if ((err as Error).name === 'AbortError') return; + handlers.onError(err instanceof Error ? err : new Error(String(err))); + } +} + +function extractGeminiText(payload: unknown): string { + if (!payload || typeof payload !== 'object') return ''; + const candidates = (payload as { candidates?: unknown }).candidates; + if (!Array.isArray(candidates) || candidates.length === 0) return ''; + const first = candidates[0] as { content?: { parts?: Array<{ text?: unknown }> } }; + const parts = first?.content?.parts; + if (!Array.isArray(parts)) return ''; + let out = ''; + for (const p of parts) { + if (typeof p?.text === 'string') out += p.text; + } + return out; +} diff --git a/src/providers/model.ts b/src/providers/model.ts new file mode 100644 index 0000000..b29789e --- /dev/null +++ b/src/providers/model.ts @@ -0,0 +1,32 @@ +/** + * BYOK model router. Picks a streaming client based on cfg.provider so + * the rest of the app can stay provider-agnostic. Adding a fifth provider + * later means: add an entry to ModelProvider, add a presets row, add a + * `stream` function, and one more `case` here. + */ +import type { AppConfig, ChatMessage } from '../types'; +import type { StreamHandlers } from './anthropic'; +import { streamMessage as streamAnthropic } from './anthropic'; +import { streamAzure } from './azure'; +import { streamGoogle } from './google'; +import { streamOpenAI } from './openai'; + +export async function streamModel( + cfg: AppConfig, + system: string, + history: ChatMessage[], + signal: AbortSignal, + handlers: StreamHandlers, +): Promise { + switch (cfg.provider) { + case 'openai': + return streamOpenAI(cfg, system, history, signal, handlers); + case 'azure': + return streamAzure(cfg, system, history, signal, handlers); + case 'google': + return streamGoogle(cfg, system, history, signal, handlers); + case 'anthropic': + default: + return streamAnthropic(cfg, system, history, signal, handlers); + } +} diff --git a/src/providers/openai.ts b/src/providers/openai.ts new file mode 100644 index 0000000..da2d668 --- /dev/null +++ b/src/providers/openai.ts @@ -0,0 +1,135 @@ +/** + * OpenAI-compatible streaming client. Covers any endpoint that speaks the + * `/chat/completions` SSE wire format — OpenAI proper, OpenRouter, + * LiteLLM proxy, DeepSeek, Groq, Together, Mistral. Azure has its own + * URL shape and lives in azure.ts. + * + * Browser fetch is fine here for the same BYOK reason streamMessage() + * uses dangerouslyAllowBrowser: this is a local-first tool, the key is + * the user's, it never leaves their machine. Move to a server proxy if + * you ever ship a hosted build. + */ +import type { AppConfig, ChatMessage } from '../types'; +import type { StreamHandlers } from './anthropic'; + +export async function streamOpenAI( + cfg: AppConfig, + system: string, + history: ChatMessage[], + signal: AbortSignal, + handlers: StreamHandlers, +): Promise { + if (!cfg.apiKey) { + handlers.onError(new Error('Missing API key — open Settings and paste one in.')); + return; + } + if (!cfg.baseUrl) { + handlers.onError(new Error('Missing base URL — open Settings and set one.')); + return; + } + + const url = joinUrl(cfg.baseUrl, '/chat/completions'); + const body = { + model: cfg.model, + stream: true, + max_tokens: 8192, + messages: [ + ...(system ? [{ role: 'system', content: system }] : []), + ...history.map((m) => ({ role: m.role, content: m.content })), + ], + }; + + await streamChatCompletions(url, cfg.apiKey, body, signal, handlers, 'bearer'); +} + +// Shared SSE pump between the OpenAI and Azure clients — they only differ +// in URL shape and auth header. +export async function streamChatCompletions( + url: string, + apiKey: string, + body: Record, + signal: AbortSignal, + handlers: StreamHandlers, + auth: 'bearer' | 'azure', +): Promise { + let acc = ''; + try { + const headers: Record = { + 'Content-Type': 'application/json', + }; + if (auth === 'bearer') headers['Authorization'] = `Bearer ${apiKey}`; + else headers['api-key'] = apiKey; + + const resp = await fetch(url, { + method: 'POST', + headers, + body: JSON.stringify(body), + signal, + }); + + if (!resp.ok || !resp.body) { + const text = await resp.text().catch(() => ''); + handlers.onError(new Error(`upstream ${resp.status}: ${text || 'no body'}`)); + return; + } + + const reader = resp.body.getReader(); + const decoder = new TextDecoder(); + let buf = ''; + + while (true) { + const { value, done } = await reader.read(); + if (done) break; + buf += decoder.decode(value, { stream: true }); + // Frames are separated by a blank line. Split on \n\n; the trailing + // partial frame stays in buf for the next iteration. + let idx: number; + while ((idx = buf.indexOf('\n\n')) !== -1) { + const frame = buf.slice(0, idx).trim(); + buf = buf.slice(idx + 2); + if (!frame) continue; + // Each frame is one or more `data: ...` lines plus optional + // `event:` / comments. We only care about `data:` payloads. + for (const line of frame.split('\n')) { + if (!line.startsWith('data:')) continue; + const payload = line.slice(5).trim(); + if (!payload || payload === '[DONE]') continue; + let parsed: unknown; + try { + parsed = JSON.parse(payload); + } catch { + continue; + } + const delta = extractDelta(parsed); + if (delta) { + acc += delta; + handlers.onDelta(delta); + } + } + } + } + handlers.onDone(acc); + } catch (err) { + if ((err as Error).name === 'AbortError') return; + handlers.onError(err instanceof Error ? err : new Error(String(err))); + } +} + +function extractDelta(payload: unknown): string { + if (!payload || typeof payload !== 'object') return ''; + const choices = (payload as { choices?: unknown }).choices; + if (!Array.isArray(choices) || choices.length === 0) return ''; + const first = choices[0] as { delta?: { content?: unknown }; text?: unknown }; + if (first?.delta && typeof first.delta.content === 'string') { + return first.delta.content; + } + // Some legacy / completion-style proxies emit `text` instead of delta. + if (typeof first?.text === 'string') return first.text; + return ''; +} + +function joinUrl(base: string, path: string): string { + const b = base.replace(/\/+$/, ''); + const p = path.startsWith('/') ? path : `/${path}`; + return `${b}${p}`; +} diff --git a/src/providers/presets.ts b/src/providers/presets.ts new file mode 100644 index 0000000..0511b4d --- /dev/null +++ b/src/providers/presets.ts @@ -0,0 +1,108 @@ +/** + * Provider presets — the BYOK side of the app supports four wire formats + * (Anthropic-native, OpenAI-compatible, Azure OpenAI, Google Generative + * Language). Each one ships with a default base URL and a short list of + * suggested model ids so the SettingsDialog datalist gives the user a + * head-start. The presets stay deliberately conservative: a user pointing + * an `openai` provider at LiteLLM / OpenRouter / DeepSeek just types a + * different baseUrl + model, no code change required. + * + * AWS Bedrock and Google Vertex aren't first-class providers here. Both + * require credential signing (SigV4 for AWS, GCP service-account JWT for + * Vertex) which is unsafe to do from the browser with long-lived BYOK + * credentials. The recommended path is to run LiteLLM (or a similar + * proxy) server-side and point the `anthropic` or `openai` provider at + * that proxy's URL — the provider chooser surfaces this guidance. + */ +import type { ModelProvider } from '../types'; + +export interface ProviderPreset { + id: ModelProvider; + // Display name shown in the chooser and the env meta line. + label: string; + // Short marketing-style line shown under the provider card. + blurb: string; + // Default base URL preloaded into the form when the user picks this + // provider for the first time. Empty string means "the user must fill + // it in" (Azure has no global default). + baseUrl: string; + // Suggested model id (datalist anchor). The user can type anything. + defaultModel: string; + // Suggestions surfaced in the model field's . + modelSuggestions: string[]; + // Placeholder hint for the api key field. + apiKeyPlaceholder: string; + // Whether the provider requires the Azure-specific apiVersion field. + needsApiVersion?: boolean; +} + +export const PROVIDER_PRESETS: Record = { + anthropic: { + id: 'anthropic', + label: 'Anthropic', + blurb: 'Direct to api.anthropic.com or any Anthropic-compatible proxy (LiteLLM, AWS Bedrock / GCP Vertex via proxy).', + baseUrl: 'https://api.anthropic.com', + defaultModel: 'claude-sonnet-4-5', + modelSuggestions: [ + 'claude-opus-4-5', + 'claude-sonnet-4-5', + 'claude-haiku-4-5', + 'claude-3-5-sonnet-latest', + ], + apiKeyPlaceholder: 'sk-ant-...', + }, + openai: { + id: 'openai', + label: 'OpenAI-compatible', + blurb: 'Any OpenAI /chat/completions endpoint — OpenAI, OpenRouter, LiteLLM proxy, DeepSeek, Groq, Together, Mistral.', + baseUrl: 'https://api.openai.com/v1', + defaultModel: 'gpt-4o-mini', + modelSuggestions: [ + 'gpt-4o', + 'gpt-4o-mini', + 'anthropic/claude-3.5-sonnet', + 'google/gemini-2.0-flash', + 'deepseek/deepseek-chat', + 'meta-llama/llama-3.3-70b-instruct', + ], + apiKeyPlaceholder: 'sk-...', + }, + azure: { + id: 'azure', + label: 'Azure OpenAI', + blurb: 'Azure-hosted deployments. Base URL is your resource endpoint; Model is the deployment name.', + baseUrl: '', + defaultModel: '', + modelSuggestions: [], + apiKeyPlaceholder: 'azure key', + needsApiVersion: true, + }, + google: { + id: 'google', + label: 'Google Gemini', + blurb: 'Google Generative Language API — Gemini family, key from aistudio.google.com.', + baseUrl: 'https://generativelanguage.googleapis.com', + defaultModel: 'gemini-2.0-flash', + modelSuggestions: [ + 'gemini-2.0-flash', + 'gemini-2.0-flash-lite', + 'gemini-1.5-pro', + 'gemini-1.5-flash', + ], + apiKeyPlaceholder: 'AIza...', + }, +}; + +export const PROVIDER_ORDER: ModelProvider[] = [ + 'anthropic', + 'openai', + 'azure', + 'google', +]; + +// True when the provider's wire format expects a deployment-specific URL +// rather than a generic baseUrl + path. Today only Azure qualifies — kept +// as a helper so callers don't have to memorize that. +export function providerLabel(provider: ModelProvider): string { + return PROVIDER_PRESETS[provider]?.label ?? provider; +} diff --git a/src/state/config.ts b/src/state/config.ts index aea1c40..4e21bda 100644 --- a/src/state/config.ts +++ b/src/state/config.ts @@ -4,9 +4,11 @@ const STORAGE_KEY = 'open-design:config'; export const DEFAULT_CONFIG: AppConfig = { mode: 'daemon', + provider: 'anthropic', apiKey: '', baseUrl: 'https://api.anthropic.com', model: 'claude-sonnet-4-5', + apiVersion: '', agentId: null, skillId: null, designSystemId: null, diff --git a/src/types.ts b/src/types.ts index 0f8aa92..a0b712a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,10 +1,25 @@ export type ExecMode = 'daemon' | 'api'; +// Which BYOK model endpoint to talk to in `mode === 'api'`. Each provider +// has its own request shape — see src/providers/{anthropic,openai,azure, +// google}.ts for the wire details. AWS Bedrock and Google Vertex are +// reached via the `anthropic` provider pointed at an Anthropic-compatible +// proxy (e.g. LiteLLM), which keeps signing on the server where the +// long-lived AWS / GCP credentials belong. +export type ModelProvider = 'anthropic' | 'openai' | 'azure' | 'google'; + export interface AppConfig { mode: ExecMode; + // Active provider when `mode === 'api'`. Older configs that predate the + // multi-provider rework default to 'anthropic' on load. + provider: ModelProvider; apiKey: string; baseUrl: string; model: string; + // Azure OpenAI only — the api-version query string the Azure REST + // surface requires (e.g. '2024-08-01-preview'). Ignored by every other + // provider so the same config can round-trip through localStorage. + apiVersion?: string; agentId: string | null; skillId: string | null; designSystemId: string | null;