feat: support user-managed model configuration

Author: yeahhe365

App.tsx

@@ -9,6 +9,8 @@ import ChatInput from './components/ChatInput';
 import Sidebar from './components/Sidebar';
 import ChatArea from './components/ChatArea';
 
+const CHAT_INPUT_MAX_WIDTH_CLASS = 'max-w-[40.32rem]';
+
 const App = () => {
   const {
     sessions,
@@ -52,7 +54,7 @@ const App = () => {
 
   return (
     <ErrorBoundary>
-      <div className="relative flex h-screen overflow-hidden bg-[var(--theme-bg-secondary)] font-sans text-[var(--theme-text-primary)]">
+      <div className="theme-transition-colors relative flex h-full overflow-hidden bg-[var(--theme-bg-secondary)] font-sans text-[var(--theme-text-primary)]">
         <SettingsModal
           isOpen={isSettingsOpen}
           onClose={() => setIsSettingsOpen(false)}
@@ -76,7 +78,7 @@ const App = () => {
           onDeleteSession={handleDeleteSession}
         />
 
-        <main className="relative flex min-w-0 flex-1 flex-col bg-[var(--theme-bg-primary)]">
+        <main className="relative flex min-w-0 flex-1 flex-col overflow-hidden bg-[var(--theme-bg-primary)]">
           <Header
             selectedModel={selectedModel}
             setSelectedModel={setSelectedModel}
@@ -106,8 +108,10 @@ const App = () => {
             onForkMessage={handleForkMessage}
           />
 
-          <div className="pointer-events-none absolute bottom-0 left-0 right-0 z-20 flex justify-center bg-[linear-gradient(to_top,var(--theme-bg-primary)_0%,color-mix(in_srgb,var(--theme-bg-primary)_82%,transparent)_68%,transparent_100%)] p-4 pb-6">
-            <div className="pointer-events-auto w-full max-w-[40.32rem]">
+          <div className="pointer-events-none absolute bottom-0 left-0 right-0 z-30">
+            <div
+              className={`pointer-events-auto mx-auto w-full ${CHAT_INPUT_MAX_WIDTH_CLASS} px-2 pb-[calc(env(safe-area-inset-bottom,0px)+1rem)] sm:px-3`}
+            >
               <ChatInput
                 query={query}
                 setQuery={setQuery}

Dockerfile

@@ -6,13 +6,20 @@ COPY package.json package-lock.json ./
 RUN npm ci
 
 COPY . .
+ENV VITE_API_PROXY_MODE=local
 RUN npm run build
 
-FROM nginx:1.27-alpine AS runtime
+FROM node:22-alpine AS runtime
 
-COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
-COPY --from=build /app/dist /usr/share/nginx/html
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV PORT=80
+ENV PRISMA_STATIC_DIR=/app/dist
+
+COPY --from=build /app/dist /app/dist
+COPY docker/server.mjs /app/server.mjs
 
 EXPOSE 80
 
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["node", "server.mjs"]

README.en.md

@@ -4,24 +4,24 @@
   <a href="./README.md">中文</a> | <a href="./README.en.md">English</a>
 </p>
 
-A Gemini-powered visual multi-agent deep reasoning engine with dynamic planning, reasoning visualization, and multi-session management.
+A visual multi-agent deep reasoning engine for user-configured Gemini API and OpenAI-compatible API models.
 
 ## Overview
 
-A Gemini-powered visual multi-agent deep reasoning engine with dynamic planning, reasoning visualization, and multi-session management.
+A visual multi-agent deep reasoning engine with dynamic planning, reasoning visualization, and multi-session management. Prisma does not ship model presets; create the Gemini or OpenAI-compatible models you want to use in settings.
 
 ## Features
 
 - Multi-agent collaborative reasoning.
 - Visual task planning and reasoning traces.
-- Supports Gemini API and OpenAI-compatible endpoints.
+- Supports user-created Gemini API and OpenAI-compatible model configurations.
 - Modern React 19 + TypeScript + Vite project.
 
 ## Quick Start
 
 - Run `npm install`.
-- Copy and configure environment variables.
 - Run `npm run dev`.
+- Open Settings -> Model Management and add at least one Gemini API or OpenAI-compatible API model.
 
 ## Docker Deployment
 
@@ -38,13 +38,21 @@ docker build -t prisma .
 docker run --rm -p 8081:80 prisma
 ```
 
-The container builds the static `dist/` bundle and serves it with Nginx, while Cloudflare Pages can keep using the existing `npm run build` flow.
+The Docker image builds the static `dist/` bundle and serves it with a small Node runtime. Docker builds enable the local API proxy: the browser calls same-origin `/custom-api`, and the container makes the actual Gemini/OpenAI-compatible API request to avoid browser-side CORS limits.
+
+Common model API hosts are allowed by default. To use a custom gateway or local model service, add allowed hosts:
+
+```bash
+PRISMA_PROXY_ALLOWED_HOSTS=api.example.com,host.docker.internal docker compose up --build
+```
+
+The proxy switch is injected only by the Dockerfile. Cloudflare Pages can keep using the existing pure-static `npm run build` flow, with direct browser API requests and no `/custom-api` runtime service.
 
 Cloudflare Pages reads the root `.node-version`; this repository pins Node.js 22 so Pages, GitHub Actions, and Docker builds use the same major runtime.
 
 ## Configuration
 
-- Configure API keys and model settings for Gemini or OpenAI-compatible services.
+- Create and manage model-specific API keys, base URLs, and providers for Gemini or OpenAI-compatible services.
 
 ## Tech Stack
 

README.md

@@ -71,7 +71,7 @@
 - **思考预算 (Thinking Budget)**：
   - 支持为 **规划**、**执行**、**综合** 三个阶段分别设置思考深度（Minimal, Low, Medium, High）。
   - 这决定了模型在生成 Token 时分配给 "Thinking" 字段的配额。
-- **模型切换**：内置 `Gemini 3 Flash` 与 `Gemini 3.1 Pro`，也支持接入 OpenAI 兼容自定义模型。
+- **模型管理**：不预置任何模型配置，启动后由用户自行添加 Gemini API 或 OpenAI 兼容 API 模型。
 
 ### 🛠️ 现代化工程体验
 
@@ -101,25 +101,15 @@ cd Prisma
 npm install
 ```
 
-### 3. 配置环境
-
-在项目根目录创建 `.env.local` 文件并填入你的 API Key：
-
-```env
-VITE_API_KEY=your_api_key_here
-```
-
-兼容旧配置名：`GEMINI_API_KEY` 仍可继续使用。
-
-### 4. 启动开发服务器
+### 3. 启动开发服务器
 
 ```bash
 npm run dev
 ```
 
-访问 `http://localhost:3000` 即可开始推理。
+访问 `http://localhost:3000` 后，先在「设置 -> 模型管理」中添加至少一个 Gemini API 或 OpenAI 兼容 API 模型。
 
-### 5. 运行校验
+### 4. 运行校验
 
 ```bash
 npm test
@@ -128,7 +118,7 @@ npm run lint
 npm run build
 ```
 
-### 6. 使用 Docker 部署
+### 5. 使用 Docker 部署
 
 ```bash
 docker compose up --build
@@ -143,7 +133,13 @@ docker build -t prisma .
 docker run --rm -p 8081:80 prisma
 ```
 
-Docker 镜像会在构建阶段生成静态 `dist/` 并用 Nginx 提供服务，Cloudflare Pages 仍然可以继续沿用现有的 `npm run build` 流程。
+Docker 镜像会在构建阶段生成静态 `dist/`，并由一个轻量 Node 运行时提供页面和本地 API 代理：浏览器只请求同源的 `/custom-api`，真正的 Gemini/OpenAI 兼容 API 请求由容器内的 Node 服务发出，用来避开浏览器侧 CORS 限制。默认允许常见模型 API 域名；如果要接入自定义网关或本地模型服务，可以追加允许域名：
+
+```bash
+PRISMA_PROXY_ALLOWED_HOSTS=api.example.com,host.docker.internal docker compose up --build
+```
+
+这个代理开关只在 Dockerfile 中注入。Cloudflare Pages 仍然走普通 `npm run build` 的纯前端直连模式，不需要 `/custom-api` 服务。
 
 Cloudflare Pages 会读取仓库根目录的 `.node-version`，当前固定为 Node.js 22，以便和 GitHub Actions、Docker 构建环境保持一致。
 
@@ -243,6 +239,7 @@ Prisma/
 ## 📄 许可证
 
 MIT License
+
 ---
 
 ## 友链

api.ts

@@ -1,20 +1,32 @@
 import { GoogleGenAI } from '@google/genai';
 import OpenAI from 'openai';
-import { ApiProvider, CustomModel, AIClient, GoogleGenAIClient, OpenAIClient } from './types';
+import type {
+  ApiProvider,
+  AppConfig,
+  CustomModel,
+  AIClient,
+  GoogleGenAIClient,
+  ModelOption,
+  OpenAIClient,
+} from './types';
 
 // --- Configuration & Types ---
 
-type AIProviderConfig = {
+export type AIProviderConfig = {
   provider?: ApiProvider;
   apiKey?: string;
   baseUrl?: string;
+  proxyMode?: ApiProxyMode;
 };
 
 type ApiEnv = {
   VITE_API_KEY?: string;
   GEMINI_API_KEY?: string;
+  VITE_API_PROXY_MODE?: string;
 };
 
+type ApiProxyMode = 'direct' | 'local';
+
 // --- Provider Detection ---
 
 export const isGoogleProvider = (ai: AIClient | unknown): ai is GoogleGenAIClient => {
@@ -33,14 +45,48 @@ export const isGoogleProvider = (ai: AIClient | unknown): ai is GoogleGenAIClien
  * Only handles API version prefix deduplication as a safety net.
  * URL routing is handled by SDK-level options (httpOptions.baseUrl / baseURL).
  */
-const createCustomFetch = (baseUrl: string | null): typeof globalThis.fetch => {
-  if (!baseUrl) return window.fetch.bind(window);
-
+const createCustomFetch = (
+  baseUrl: string | null,
+  proxyMode: ApiProxyMode,
+): typeof globalThis.fetch => {
   const nativeFetch = window.fetch.bind(window);
-  const cleanBaseUrl = baseUrl.replace(/\/+$/, '');
+  const cleanBaseUrl = baseUrl?.replace(/\/+$/, '') ?? null;
+
+  const createProxyInit = (
+    input: RequestInfo | URL,
+    init: RequestInit | undefined,
+    targetOrigin: string,
+  ): RequestInit => {
+    const request = input instanceof Request ? input : null;
+    const method = init?.method ?? request?.method;
+    const headers = new Headers(request?.headers);
+
+    new Headers(init?.headers).forEach((value, key) => {
+      headers.set(key, value);
+    });
+    headers.set('X-Target-URL', targetOrigin);
+
+    return {
+      ...init,
+      method,
+      headers,
+      body:
+        init?.body ??
+        (request && !['GET', 'HEAD'].includes(method ?? request.method) ? request.body : undefined),
+      cache: init?.cache ?? request?.cache,
+      credentials: init?.credentials ?? request?.credentials,
+      integrity: init?.integrity ?? request?.integrity,
+      keepalive: init?.keepalive ?? request?.keepalive,
+      mode: init?.mode ?? request?.mode,
+      redirect: init?.redirect ?? request?.redirect,
+      referrer: init?.referrer ?? request?.referrer,
+      signal: init?.signal ?? request?.signal,
+    };
+  };
 
   return async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
     let urlString: string;
+    let requestInput: RequestInfo | URL = input;
     if (typeof input === 'string') {
       urlString = input;
     } else if (input instanceof URL) {
@@ -49,8 +95,8 @@ const createCustomFetch = (baseUrl: string | null): typeof globalThis.fetch => {
       urlString = input.url;
     }
 
-    // Safety: deduplicate API version prefix (e.g., /v1beta/v1beta → /v1beta)
-    // Some Google SDK versions may double-append version prefixes when httpOptions.baseUrl includes one
+    // Safety: deduplicate API version prefix (e.g., /v1beta/v1beta -> /v1beta).
+    // Some Google SDK versions may double-append version prefixes when httpOptions.baseUrl includes one.
     if (cleanBaseUrl) {
       try {
         const baseHost = new URL(cleanBaseUrl).host;
@@ -60,15 +106,31 @@ const createCustomFetch = (baseUrl: string | null): typeof globalThis.fetch => {
           const versionPrefix = basePath.match(/\/v\d+(beta|alpha)?$/)?.[0];
           if (versionPrefix && url.pathname.includes(versionPrefix + versionPrefix)) {
             url.pathname = url.pathname.replace(versionPrefix + versionPrefix, versionPrefix);
-            return nativeFetch(url.toString(), init);
+            urlString = url.toString();
+            requestInput = urlString;
           }
         }
       } catch {
         /* ignore URL parse errors */
       }
     }
 
-    return nativeFetch(input, init);
+    if (proxyMode === 'local') {
+      try {
+        const url = new URL(urlString, window.location.href);
+        const isHttpApiRequest = url.protocol === 'https:' || url.protocol === 'http:';
+        const isExternalRequest = url.origin !== window.location.origin;
+
+        if (isHttpApiRequest && isExternalRequest) {
+          const proxyUrl = `/custom-api${url.pathname}${url.search}`;
+          return nativeFetch(proxyUrl, createProxyInit(input, init, url.origin));
+        }
+      } catch {
+        /* fall through to the native request */
+      }
+    }
+
+    return nativeFetch(requestInput, init);
   };
 };
 
@@ -81,11 +143,22 @@ export const findCustomModel = (
   return customModels?.find((m) => m.name === modelName);
 };
 
+export const findPresetOverride = (
+  modelName: string,
+  presetOverrides?: CustomModel[],
+): CustomModel | undefined => {
+  return presetOverrides?.find((model) => model.name === modelName);
+};
+
 export const resolveApiKey = (
   explicitApiKey?: string,
-  env: ApiEnv = import.meta.env,
+  _env: ApiEnv = import.meta.env,
 ): string | undefined => {
-  return explicitApiKey || env.VITE_API_KEY || env.GEMINI_API_KEY;
+  return explicitApiKey;
+};
+
+export const resolveApiProxyMode = (env: ApiEnv = import.meta.env): ApiProxyMode => {
+  return env.VITE_API_PROXY_MODE === 'local' ? 'local' : 'direct';
 };
 
 /**
@@ -112,13 +185,28 @@ export const getAIProvider = (model: string): ApiProvider => {
   return 'google';
 };
 
+export const resolveModelApiConfig = (
+  model: ModelOption,
+  config: Pick<AppConfig, 'customModels' | 'presetOverrides'>,
+): AIProviderConfig => {
+  const customModelConfig = findCustomModel(model, config.customModels);
+  const provider = customModelConfig?.provider || getAIProvider(model);
+
+  return {
+    provider,
+    ...(customModelConfig?.apiKey ? { apiKey: customModelConfig.apiKey } : {}),
+    ...(customModelConfig?.baseUrl ? { baseUrl: customModelConfig.baseUrl } : {}),
+  };
+};
+
 // --- API Client Factory ---
 
 export const getAI = (config?: AIProviderConfig): AIClient => {
   const provider = config?.provider || 'google';
   const apiKey = resolveApiKey(config?.apiKey);
   const baseUrl = config?.baseUrl || null;
-  const customFetch = createCustomFetch(baseUrl);
+  const proxyMode = config?.proxyMode || resolveApiProxyMode();
+  const customFetch = createCustomFetch(baseUrl, proxyMode);
 
   // Handle OpenAI-compatible providers
   if (provider === 'openai') {

appVersion.ts

@@ -0,0 +1,3 @@
+export const resolveAppVersion = (version?: string) => version || '0.0.0-dev';
+
+export const APP_VERSION = resolveAppVersion(import.meta.env.VITE_APP_VERSION);