1. 项目概述：一个面向开发者的LLM API探索与集成工具

最近在折腾大语言模型（LLM）应用开发的朋友，估计都绕不开一个核心环节：如何高效地探索、测试和集成不同厂商提供的LLM API。无论是OpenAI的GPT系列、Anthropic的Claude，还是国内外的各类开源或闭源模型，每个API都有其独特的参数、调用方式和响应格式。手动写脚本一个个试，效率低下不说，还容易遗漏关键配置。 sys-fairy-eve/nightly-mvp-2026-03-25-llm-api-explorer 这个项目，正是为了解决这个痛点而生的一个“最小可行产品”（MVP）。

简单来说，这是一个专为开发者设计的LLM API探索工具。你可以把它理解为一个功能更聚焦、更轻量级的“Postman for LLMs”。它的核心目标不是构建一个完整的应用，而是提供一个直观的界面，让开发者能够快速配置API密钥、调整模型参数、发送请求并实时查看结构化的响应结果。项目名中的“nightly-mvp”和日期戳“2026-03-25”暗示了这是一个快速迭代、每日构建的早期版本，专注于验证核心功能的价值。

对于正在评估多个LLM模型性能、调试API调用参数，或者需要为团队内部搭建一个简易测试平台的开发者而言，这个工具能显著提升工作效率。它把繁琐的curl命令或临时脚本，变成了可重复、可配置、可视化的操作流程。

2. 核心功能与设计思路拆解

2.1 定位：为什么需要专门的LLM API探索器？

在通用API测试工具（如Postman、Insomnia）已经非常成熟的今天，为什么还要专门为LLM设计一个探索器？这源于LLM API的几个独特之处：

首先， 参数复杂且语义化 。除了通用的 model 、 messages ，还有 temperature （创造性）、 top_p （核采样）、 max_tokens （最大生成长度）、 frequency_penalty （频率惩罚）等直接影响输出质量的参数。这些参数不是简单的键值对，它们之间可能存在微妙的相互作用，需要一个界面来直观地展示和调整。

其次， 请求与响应格式特殊 。请求体通常是结构化的对话历史（ messages 数组，包含 role 和 content ），而响应体则嵌套了 choices 、 usage 等关键信息。通用工具虽然能发送JSON，但无法高亮显示 content 中的Markdown或代码块，也无法方便地提取 token 使用量进行分析。

最后， 多后端支持与密钥管理 。开发者经常需要在OpenAI格式、Anthropic格式、甚至是本地部署的Ollama或vLLM服务之间切换。每个后端的基础URL、API密钥格式、认证头都可能不同。一个集成的工具可以管理多个配置模板，一键切换，避免手动修改代码的麻烦。

llm-api-explorer 的设计正是围绕这些痛点展开的。它不是一个全功能的IDE，而是一个“瑞士军刀”式的辅助工具，核心价值在于 降低探索成本 和 提升调试效率 。

2.2 架构设计：轻量前端与配置化后端

从项目名称和MVP的定位来看，其技术栈很可能选择了当前前端生态中快速开发的首选组合： React + Vite + TypeScript ，搭配一个简洁的UI组件库，如Tailwind CSS + Shadcn/ui。这种组合能保证开发速度，同时提供良好的类型安全和用户体验。

后端方面，作为一个本地运行的探索工具，它很可能采用 无服务端架构 或一个极简的Node.js本地服务器。所有API调用都直接从浏览器或本地服务器发出，避免了复杂的中转服务。关键在于，它需要实现一个 配置化的HTTP客户端 ，这个客户端能够：

1. 动态构建请求头 ：根据用户选择的“后端类型”（如OpenAI、Azure OpenAI、Anthropic、Custom），自动填充正确的 Authorization 头（例如 Bearer sk-xxx 或 x-api-key ）。
2. 格式化请求体 ：将用户在UI中填写的系统提示（System Prompt）、对话历史（Chat History）和参数，序列化成对应后端要求的JSON格式。
3. 处理流式响应 ：对于支持Server-Sent Events (SSE) 的API，需要能够处理分块返回的数据，并实时渲染到界面上，模拟打字机效果。
4. 统一错误处理 ：捕获网络错误、API返回的错误码（如 429 限速、 401 鉴权失败），并以友好的方式提示用户。

项目的“配置化”思想还体现在对“工作区”或“项目”的支持上。用户可以保存不同的API端点、模型列表和默认参数组，方便在不同项目间快速切换。

3. 关键模块解析与实操要点

3.1 配置管理模块：安全与灵活性的平衡

这是工具的基础。一个典型的配置管理界面会包含以下部分：

• 后端配置 ：一个下拉选择框，列出预定义的模板（OpenAI, Anthropic, Azure OpenAI, Ollama, Custom）。选择不同模板，下方的表单字段会动态变化。
• API端点 ：基础URL，如 https://api.openai.com/v1 或 http://localhost:11434/v1 。
• API密钥 ：敏感的输入框，通常以密码形式隐藏。这里有一个 关键的安全实践 ：密钥应当只存储在浏览器的本地存储（LocalStorage）或本地配置文件中， 绝不 应该被发送到任何第三方服务器。对于团队使用，可以考虑支持从环境变量读取。
• 模型列表 ：一个可下拉选择的模型列表。理想情况下，工具应能提供一个“获取模型列表”的按钮，调用对应后端的 /models 端点（如果支持）来动态拉取，避免手动维护。

注意 ：在处理API密钥时，务必提醒用户不要在公共场合分享包含密钥的配置文件或截图。工具本身也应提供“一键清除所有密钥”的功能。

3.2 对话与参数编排模块

这是用户交互的核心区域，通常设计为左右或上下布局。

左侧/上部：对话编辑区

• 系统提示词 ：一个文本区域，用于设定AI的“角色”和行为准则。
• 对话历史 ：一个可编辑的列表，每行代表一条消息。用户可以自由添加、删除、修改用户（User）或助手（Assistant）的消息。每条消息通常包含 role 和 content 两个字段。高级功能可能支持从文件导入历史或保存当前会话。
• 当前用户输入 ：一个大的文本输入框，用于编写本次要发送的查询。

右侧/下部：参数控制面板 参数面板需要将抽象的数学概念转化为直观的控制组件。例如：

• Temperature (温度) ：使用滑动条（Slider），范围0.0到2.0，旁边实时显示数值。并附上简短说明：“值越高，输出越随机、有创造性；值越低，输出越确定、保守。”
• Max Tokens (最大令牌数) ：数字输入框，设置本次生成的上限。旁边可以显示估算的字符数（大约1 token ≈ 0.75个英文单词或0.4个汉字）。
• Top P (核采样) ：另一个滑动条，范围0.0到1.0。
• 流式输出开关 ：一个复选框，控制是否启用逐字显示的效果。
• 其他高级参数 ：如 frequency_penalty , presence_penalty ，可以放在一个“高级选项”折叠面板里，避免主界面过于拥挤。

一个重要的实操技巧 ：对于 temperature 和 top_p ，通常不建议同时剧烈调整两者。官方文档常建议只更改其中一个。工具可以在UI上添加一个提示，或当两个值都被非默认设置时给出轻微警告。

3.3 请求发送与响应展示模块

点击“发送”按钮后，工具需要完成以下工作：

1. 收集所有UI上的配置和输入。
2. 根据选定的后端模板，构建最终的HTTP请求。
3. 显示一个加载状态，并可能禁用发送按钮防止重复请求。
4. 处理响应。

对于 非流式响应 ，直接解析JSON，将助手的回复 content 添加到对话历史中，并在一个独立区域漂亮地展示完整的响应JSON（可折叠），高亮显示 usage 中的提示令牌、完成令牌和总令牌数。这对于成本估算非常有用。

对于 流式响应 ，处理会复杂一些。需要建立SSE连接，监听 data 事件，解析每个数据块（通常以 data: 开头）。数据块可能是一个完整的JSON对象，也可能是一个 [DONE] 标记。需要从每个数据块的 choices[0].delta.content 中提取文本片段，并实时追加到正在生成的回复显示区域。同时，还需要从可能的 usage 数据块中最终提取令牌使用情况。

响应展示区的一个高级功能是格式渲染 。如果助手返回的内容包含Markdown，工具应能进行基本渲染（如代码块高亮、粗体、列表）。这可以通过集成一个轻量级的Markdown渲染库来实现。

4. 实现一个基础版本的核心步骤

假设我们使用React + TypeScript + Vite来构建这个探索器的前端，以下是如何实现核心流程的步骤。

4.1 项目初始化与依赖安装

首先，创建一个新的Vite项目，并选择React和TypeScript模板。

npm create vite@latest llm-api-explorer -- --template react-ts
cd llm-api-explorer
npm install

然后，安装必要的UI库和工具库。这里以 shadcn/ui （基于Tailwind CSS）和状态管理库 Zustand 为例，因为它们轻量且易于使用。

# 初始化 Tailwind CSS 和 shadcn/ui (根据其官方文档)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# 接着按照 shadcn/ui 官网指南初始化组件

# 安装状态管理、HTTP客户端和Markdown渲染库
npm install zustand axios react-markdown

4.2 定义核心状态与类型

在 src/types.ts 中，我们先定义好整个应用需要用到的类型。

// 定义支持的后端类型
export type BackendType = 'openai' | 'anthropic' | 'azure-openai' | 'ollama' | 'custom';

// 定义单条消息的结构
export interface ChatMessage {
  id: string;
  role: 'system' | 'user' | 'assistant';
  content: string;
}

// 定义API配置
export interface ApiConfig {
  backendType: BackendType;
  baseURL: string;
  apiKey: string;
  defaultModel: string;
}

// 定义请求参数
export interface RequestParams {
  model: string;
  temperature: number;
  max_tokens: number;
  top_p: number;
  stream: boolean;
  // ... 其他参数
}

// 定义整个应用的状态
export interface AppState {
  config: ApiConfig;
  messages: ChatMessage[];
  currentInput: string;
  params: RequestParams;
  isLoading: boolean;
  responseContent: string;
  responseRaw: string;
  error: string | null;
  // ... actions 将在 store 中定义
}

4.3 创建状态管理Store

使用Zustand创建一个全局状态Store ( src/store/useStore.ts )，集中管理配置、对话历史和请求状态。

import { create } from 'zustand';
import { ApiConfig, ChatMessage, RequestParams, AppState } from '../types';

interface StoreActions {
  setConfig: (config: Partial<ApiConfig>) => void;
  setMessages: (messages: ChatMessage[]) => void;
  addMessage: (message: ChatMessage) => void;
  updateCurrentInput: (input: string) => void;
  setParams: (params: Partial<RequestParams>) => void;
  setLoading: (isLoading: boolean) => void;
  setResponse: (content: string, raw: string) => void;
  setError: (error: string | null) => void;
  sendMessage: () => Promise<void>; // 核心的发送消息动作
}

const useStore = create<AppState & StoreActions>((set, get) => ({
  // 初始状态
  config: {
    backendType: 'openai',
    baseURL: 'https://api.openai.com/v1',
    apiKey: '',
    defaultModel: 'gpt-3.5-turbo',
  },
  messages: [{ id: '1', role: 'system', content: 'You are a helpful assistant.' }],
  currentInput: '',
  params: {
    model: 'gpt-3.5-turbo',
    temperature: 0.7,
    max_tokens: 500,
    top_p: 1,
    stream: false,
  },
  isLoading: false,
  responseContent: '',
  responseRaw: '',
  error: null,

  // 更新状态的动作
  setConfig: (partialConfig) => set((state) => ({ config: { ...state.config, ...partialConfig } })),
  setMessages: (messages) => set({ messages }),
  addMessage: (message) => set((state) => ({ messages: [...state.messages, message] })),
  updateCurrentInput: (input) => set({ currentInput: input }),
  setParams: (partialParams) => set((state) => ({ params: { ...state.params, ...partialParams } })),
  setLoading: (isLoading) => set({ isLoading }),
  setResponse: (content, raw) => set({ responseContent: content, responseRaw: raw }),
  setError: (error) => set({ error }),

  // 核心：发送消息
  sendMessage: async () => {
    const state = get();
    const { config, messages, currentInput, params } = state;

    if (!currentInput.trim() || state.isLoading) return;

    // 1. 准备请求
    const userMessage: ChatMessage = { id: Date.now().toString(), role: 'user', content: currentInput };
    const allMessages = [...messages, userMessage];

    set({ isLoading: true, error: null, responseContent: '', responseRaw: '' });
    // 先将用户消息加入历史，但先不更新到最终状态，等收到回复再一起更新
    // 这里为了简单，我们先更新，实际中可能希望等请求成功后再更新
    set((s) => ({ messages: [...s.messages, userMessage], currentInput: '' }));

    // 2. 根据后端类型构建请求
    let requestUrl = `${config.baseURL}/chat/completions`; // OpenAI格式端点
    let requestBody: any = {
      model: params.model,
      messages: allMessages.filter(m => m.role !== 'system').map(({ role, content }) => ({ role, content })),
      temperature: params.temperature,
      max_tokens: params.max_tokens,
      top_p: params.top_p,
      stream: params.stream,
    };
    // 如果有系统消息，需要放在messages数组开头
    const systemMessage = allMessages.find(m => m.role === 'system');
    if (systemMessage) {
      requestBody.messages = [{ role: 'system', content: systemMessage.content }, ...requestBody.messages];
    }

    const headers: Record<string, string> = {
      'Content-Type': 'application/json',
    };

    // 根据不同后端调整请求体和头部
    if (config.backendType === 'openai' || config.backendType === 'azure-openai') {
      headers['Authorization'] = `Bearer ${config.apiKey}`;
      // Azure OpenAI 可能需要额外的 API-Version 头，这里简化处理
    } else if (config.backendType === 'anthropic') {
      requestUrl = `${config.baseURL}/v1/messages`; // Anthropic 的端点不同
      headers['x-api-key'] = config.apiKey;
      headers['anthropic-version'] = '2023-06-01'; // 版本头
      // 需要将请求体转换为Anthropic格式，这里省略转换逻辑
    } else if (config.backendType === 'ollama') {
      requestUrl = `${config.baseURL}/api/chat`; // Ollama 的端点
      // Ollama 可能不需要API Key
      delete headers['Authorization'];
    }

    try {
      // 3. 发送请求
      const response = await fetch(requestUrl, {
        method: 'POST',
        headers,
        body: JSON.stringify(requestBody),
      });

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(`API Error: ${response.status} ${response.statusText} - ${JSON.stringify(errorData)}`);
      }

      // 4. 处理响应
      if (params.stream) {
        // 流式处理逻辑（稍后补充）
        console.log('Streaming response...');
        // 这里需要处理SSE
      } else {
        const data = await response.json();
        const assistantContent = data.choices?.[0]?.message?.content || '';
        const rawResponse = JSON.stringify(data, null, 2);

        // 将助手回复添加到消息历史
        const assistantMessage: ChatMessage = {
          id: (Date.now() + 1).toString(),
          role: 'assistant',
          content: assistantContent,
        };
        set((s) => ({
          messages: [...s.messages, assistantMessage],
          responseContent: assistantContent,
          responseRaw: rawResponse,
          isLoading: false,
        }));
      }
    } catch (error: any) {
      set({ error: error.message, isLoading: false });
      console.error('Request failed:', error);
    }
  },
}));

export default useStore;

4.4 构建用户界面组件

基于定义的状态和Store，我们可以构建几个核心的UI组件。

主布局组件 ( src/App.tsx ) ：

import ConfigPanel from './components/ConfigPanel';
import ChatPanel from './components/ChatPanel';
import ParamsPanel from './components/ParamsPanel';
import ResponsePanel from './components/ResponsePanel';

function App() {
  return (
    <div className="min-h-screen bg-gray-50 p-4 md:p-6">
      <header className="mb-6">
        <h1 className="text-3xl font-bold text-gray-800">LLM API Explorer</h1>
        <p className="text-gray-600">探索、测试与调试大语言模型API</p>
      </header>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 左侧：配置和参数 */}
        <div className="lg:col-span-1 space-y-6">
          <ConfigPanel />
          <ParamsPanel />
        </div>
        {/* 右侧：对话和响应 */}
        <div className="lg:col-span-2 space-y-6">
          <ChatPanel />
          <ResponsePanel />
        </div>
      </div>
    </div>
  );
}

export default App;

配置面板组件 ( src/components/ConfigPanel.tsx ) ：

import useStore from '../store/useStore';
import { BackendType } from '../types';

const BACKEND_OPTIONS: { value: BackendType; label: string }[] = [
  { value: 'openai', label: 'OpenAI' },
  { value: 'anthropic', label: 'Anthropic Claude' },
  { value: 'azure-openai', label: 'Azure OpenAI' },
  { value: 'ollama', label: 'Ollama (Local)' },
  { value: 'custom', label: 'Custom Endpoint' },
];

export default function ConfigPanel() {
  const { config, setConfig } = useStore();

  return (
    <div className="bg-white rounded-lg shadow p-6">
      <h2 className="text-xl font-semibold mb-4">API 配置</h2>
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">后端类型</label>
          <select
            className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            value={config.backendType}
            onChange={(e) => setConfig({ backendType: e.target.value as BackendType })}
          >
            {BACKEND_OPTIONS.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">API 端点 (Base URL)</label>
          <input
            type="text"
            className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="https://api.openai.com/v1"
            value={config.baseURL}
            onChange={(e) => setConfig({ baseURL: e.target.value })}
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">API 密钥</label>
          <input
            type="password"
            className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="sk-..."
            value={config.apiKey}
            onChange={(e) => setConfig({ apiKey: e.target.value })}
          />
          <p className="text-xs text-gray-500 mt-1">密钥仅保存在本地浏览器中。</p>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">默认模型</label>
          <input
            type="text"
            className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="gpt-3.5-turbo"
            value={config.defaultModel}
            onChange={(e) => setConfig({ defaultModel: e.target.value })}
          />
        </div>
      </div>
    </div>
  );
}

对话面板与参数面板 可以参照类似的结构构建，绑定到Store中对应的状态和动作。发送按钮触发 useStore.getState().sendMessage() 函数。

4.5 实现流式响应处理

流式响应能极大提升交互体验。我们需要修改Store中的 sendMessage 函数，增加对SSE的处理。

// 在 sendMessage 函数的 try 块中，替换非流式处理部分：
if (params.stream) {
  // 清空当前响应内容
  set({ responseContent: '' });
  const reader = response.body?.getReader();
  const decoder = new TextDecoder();

  if (!reader) throw new Error('Response body is not readable');

  let accumulatedContent = '';
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    const chunk = decoder.decode(value);
    const lines = chunk.split('\n').filter(line => line.trim() !== '');

    for (const line of lines) {
      if (line.startsWith('data: ')) {
        const data = line.slice(6); // 去掉 'data: ' 前缀
        if (data === '[DONE]') {
          // 流结束，将累积的内容添加到消息历史
          const assistantMessage: ChatMessage = {
            id: (Date.now() + 1).toString(),
            role: 'assistant',
            content: accumulatedContent,
          };
          set((s) => ({
            messages: [...s.messages, assistantMessage],
            isLoading: false,
          }));
          break;
        }

        try {
          const parsed = JSON.parse(data);
          const delta = parsed.choices?.[0]?.delta?.content || '';
          if (delta) {
            accumulatedContent += delta;
            // 实时更新响应显示区域的内容
            set({ responseContent: accumulatedContent });
          }
        } catch (e) {
          console.error('Failed to parse SSE chunk:', data, e);
        }
      }
    }
  }
} else {
  // ... 原有的非流式处理逻辑
}

5. 进阶功能与扩展思路

一个基础的MVP完成后，可以考虑添加以下功能来提升其实用性：

5.1 会话管理与持久化

目前对话历史仅存在于内存中，刷新页面就会丢失。可以集成一个轻量级本地数据库（如 dexie ）或直接利用 localStorage 来保存多个会话。每个会话包含其配置、消息历史和参数预设。这允许用户创建不同的“项目”，比如“客服机器人调优”、“代码生成测试”、“创意写作”，并在它们之间快速切换。

5.2 预设模板与参数组合

对于常见的任务（如“代码审查”、“文案润色”、“头脑风暴”），可以预置一套优化的系统提示词和参数组合（例如，代码审查用 temperature=0.2 以获得更确定的输出）。用户一键加载，无需每次手动配置。

5.3 成本估算与使用统计

在每次请求后，解析响应中的 usage 字段，累计计算本次会话乃至所有历史会话的令牌消耗。结合不同模型的公开定价（可配置），估算出大致的API调用成本。这对于控制预算和优化提示词以降低token消耗非常有帮助。

5.4 请求/响应历史与对比

除了当前会话，工具可以保存每一次独立的请求和响应（包括原始JSON）。用户可以回看历史记录，比较不同参数下同一提示词的不同输出结果，从而更科学地进行A/B测试。

5.5 函数调用（Function Calling）与工具使用支持

现代LLM API的一个重要特性是函数调用。探索器可以提供一个界面，让用户定义JSON Schema格式的函数描述，并在请求中传入 tools 或 functions 参数。当模型返回 tool_calls 时，工具可以模拟执行（或提示用户输入）并自动将结果以 tool 角色消息的形式传回给模型，完成多轮工具调用对话的模拟。

5.6 可扩展的后端适配器

目前的 BackendType 判断逻辑是硬编码在 sendMessage 函数中的。可以将其抽象为一个个独立的“适配器”（Adapter）类或函数。每个适配器负责将统一的内部请求格式，转换为特定后端API所需的格式，并处理其响应。这样，添加对新API（如Google Gemini、DeepSeek）的支持，就变成了实现一个新的适配器并注册到系统中，极大地提升了可扩展性。

6. 常见问题与调试技巧

在实际开发和使用这类工具时，会遇到一些典型问题。

6.1 CORS（跨域资源共享）错误

问题 ：当在浏览器中直接请求第三方API（尤其是本地部署的Ollama，其端口可能与前端开发服务器不同）时，会遇到CORS错误。 解决方案 ：

1. 开发环境 ：在Vite的配置文件中设置代理。这会将前端的API请求转发到目标后端，绕过浏览器的同源策略。

   // vite.config.js
   export default defineConfig({
     server: {
       proxy: {
         '/api-proxy': {
           target: 'http://localhost:11434', // Ollama 地址
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api-proxy/, ''),
         },
       },
     },
   });
   

   然后在前端代码中，将请求发送到 http://localhost:5173/api-proxy/... （你的开发服务器地址）。
2. 生产环境/本地桌面应用 ：如果打包成Electron应用或使用Tauri，则不受CORS限制。如果是纯Web应用，则需要后端API本身配置允许你的前端域名，或者通过一个你自己的后端服务进行中转。

6.2 流式响应中断或显示异常

问题 ：SSE连接意外关闭，或数据块解析出错，导致回复显示不完整或界面卡住。 排查 ：

• 检查网络面板（F12），查看SSE连接是否正常建立（状态码应为200），以及数据流是否持续。
• 确认后端返回的数据格式是否符合预期。有些后端可能在流中返回非标准格式或错误信息。
• 在前端代码中增加更健壮的异常捕获和日志，打印出每一个收到的原始数据块，便于分析。
• 对于复杂的响应，考虑使用专门的SSE库（如 eventsource-parser ）来更可靠地解析数据流。

6.3 参数组合导致输出质量差

问题 ：调整 temperature 和 top_p 后，模型输出变得胡言乱语或重复。 经验 ：

• temperature 和 top_p 通常只调节一个即可。官方建议是，如果调整了 top_p ，则应将 temperature 设为1。
• temperature 接近0时，输出确定性极高，适合事实问答、代码生成。接近1或更高时，创造性增强，适合写作、创意生成。
• 如果出现大量无意义的重复，尝试降低 frequency_penalty （频率惩罚）值，或提高 presence_penalty （存在惩罚）值来鼓励多样性。

6.4 API密钥与配置的安全存储

警告 ：永远不要将硬编码的API密钥提交到版本控制系统（如Git）。 最佳实践 ：

• 在工具中，将配置保存在浏览器的 localStorage 或 IndexedDB 中。
• 提供“导出配置”和“导入配置”功能，导出的文件应提醒用户妥善保管。
• 对于团队共享，可以考虑开发一个简单的配套服务，用于安全地分发加密的配置片段，而前端工具负责解密和使用。

6.5 处理不同API的响应格式差异

问题 ：Anthropic Claude的响应JSON结构与OpenAI不同，导致前端解析失败。 解决方案 ：这就是 适配器模式 发挥价值的地方。在发送请求前，根据 backendType 选择对应的适配器函数。这个函数不仅负责构建请求，也负责解析响应，将其转换为工具内部统一的格式。例如，内部统一格式为 { content: string, usage: { prompt_tokens: number, completion_tokens: number } } ，那么OpenAI适配器从 choices[0].message.content 和 usage 提取，而Anthropic适配器则从 content[0].text 和 usage （如果提供）中提取。

通过系统性地解决这些问题， llm-api-explorer 就能从一个简单的测试工具，进化成一个真正能提升LLM应用开发效率的得力助手。它的价值不在于功能的庞杂，而在于对开发者工作流中“探索与调试”这一高频、关键环节的精准优化。