Agent写软件的时代-如何把 AI 的网关做成工作台?

但只要真正开始多人使用、长期使用，问题就会很快出现：

• 谁在用哪个 Key？
• 每个 Key 花了多少钱？
• 哪些模型还能调用？
• 预算、限速、有效期怎么管？
• Codex、Claude Code 这类 Agent 工具怎么统一接入？
• 调用文档、套餐、订单和用量能不能放在同一个入口？

所以我们做了一个围绕 LiteLLM 的 AI 服务门户：深度记事 AI 服务控制台。

它不是单纯的聊天页面，而是把模型入口、API Key、套餐、用量、Agent 任务和调用文档整合到一个工作台里。

当前该项目已经完全开源：

https://github.com/jacksonjack001/deepnoting-portal-ui

网站首页：

https://deepnoting.cn/portal/

一句话理解

这套系统可以拆成两层：

LiteLLM 负责模型网关和预算控制。

Portal 负责用户、套餐、支付、用量展示、聊天、文档和 Agent 任务。

这样拆分的好处是：模型代理继续交给成熟的 LiteLLM，用户体验和运营流程则放在更容易定制的 Portal 里。

为什么需要一个 Portal

如果只有网关，管理员能看见模型和 Key，但用户往往看不清自己的使用状态。

如果只有聊天页面，用户能发消息，但很难知道预算、用量、订单、模型权限和 API 调用方式。

Portal 解决的是中间这一层体验：

• 用户可以注册、登录或用已有 API Key 直接进入。
• 购买套餐后自动激活 LiteLLM 虚拟 Key。
• 用量按当前 API Key 统计，而不是只按邮箱统计。
• 页面直接展示预算、余额、Token、请求数、模型分布和最近调用。
• 聊天页支持文本、图片和常用参数。
• Codex / Claude Code 的接入文档和 Agent 任务状态也集中展示。

用量看得清楚

总览页的目标很直接：让用户知道当前 Key 还能不能用、剩多少预算、最近消耗在哪里。

页面会展示：

• Key 状态
• 剩余金额
• 累计消耗
• 累计 Token
• 请求额度
• 过期时间
• 每日/每周/每月趋势
• 按模型统计的消耗
• 最近调用明细

这里有一个很实用的细节：API Key 直接登录的用户，也能按当前 Key 看到用量。

有些外部导入的 Key 在 LiteLLM 里不一定绑定到门户邮箱，如果只按邮箱查询 spend logs，用量页可能是空的。现在会结合当前 Key 的 hash 去同步日志，统计口径更贴近真实使用。

聊天页不只是聊天

聊天页使用的是当前账号自己的 LiteLLM 虚拟 Key。浏览器不会直接拿完整 Key 调 LiteLLM，而是通过 Portal 中转。

这样可以统一处理：

• 登录态
• Key 状态
• 模型权限
• 余额和预算
• 聊天历史
• 流式输出
• 错误提示
• 用量记录

聊天页支持文本、多轮历史、图片上传/粘贴，以及常见生成参数，例如 temperature、top_p、max_tokens、frequency_penalty 和 presence_penalty。

如果选择的是支持视觉能力的模型，也可以直接把图谱、截图或图片粘贴进去提问。

套餐和资源状态放在一起

套餐页不仅展示价格，也展示 Claude / Codex 资源池状态。

这对用户很重要：当模型、账号池或限额窗口发生变化时，用户可以直接看到当前资源是否可用，而不是只能等调用失败后再排查。

套餐支持两类方式：

• 预设套餐：适合快速购买。
• 自定义组合：选择模型、预算、请求数、RPM、TPM 和有效期。

支付成功后，系统会自动把套餐规则写入 LiteLLM Key，包括模型权限、预算、有效期和限速。

订单还支持退款测算。系统会根据订单金额、通道手续费和 Token 消耗估算可退金额，再进入人工退款流程。

调用文档直接给到用户

一个 API 服务能不能被顺利用起来，文档非常关键。

所以控制台里内置了调用文档，包括：

• OpenAI SDK 调用方式
• Codex 配置
• Claude Code 配置
• Agent hooks 上报
• 环境变量示例
• 客户端配置示例

用户不需要到处找配置，只要登录后复制自己的 Key 和示例配置，就可以开始接入。

Agent 任务也能看见

Codex / Claude Code 这类工具经常在本地终端里运行，任务执行状态不容易集中观察。

Portal 提供了 Agent 事件上报接口，可以接收 hooks 事件，并在“当前 Agent 任务”页展示：

• 当前会话
• 首个问题
• 执行状态
• 当前工具
• 模型
• 已用 Token
• 上下文窗口
• 工作目录

这个设计不侵入 Agent 工具本身，只做状态观察和记录。

新闻更新降低沟通成本

模型上下线、套餐调整、文档更新、资源状态变化，都可以在新闻更新页集中发布。

对用户来说，这是一个低成本的变更入口；对维护者来说，也减少了重复解释。

背后的设计取舍

这套系统的核心取舍是：让专业组件做专业的事。

LiteLLM 继续负责：

• 模型代理
• 虚拟 Key
• 模型权限
• 预算
• spend logs
• RPM / TPM

Portal 负责：

• 用户体验
• 注册登录
• 套餐订单
• 支付回调
• 用量聚合
• 浏览器聊天
• 调用文档
• Agent 任务展示

本地数据库只保存门户业务状态，例如用户、订单、会话、聊天历史和 Agent 事件。模型调用、Key 权限和预算仍以 LiteLLM 为事实来源。

这样的边界比较清楚，后续要换支付、换邮件、调整套餐、增加模型或更新页面，都不会影响核心网关能力。

参考2个proxy，我们可以把codex和ClaudeCode的20美元套餐转换成API，基本上20美元换算成API调用大概能有个2000美金，国内各种流行的中转站天价的福利大抵来自于此~想发财还是得信息差，哈哈

更多详情请goto我的开源仓库：

https://github.com/jacksonjack001/deepnoting-portal-proxy

注：我这个也是基于两个开源的项目用codex魔改得到的，主要是对claude这个加了一个图形化的界面，然后提供了一个接口可以同时查两者的用户状态和窗口余量。如果有兴趣深入研究可以去看原始仓库~

在线体验

如果想要进一步了解原理，需要再研究下litellm的原理和chatgpt、claude的计费体系，可以参考下面2个文章：

LiteLLM核心原理

liz+CX-CC，公众号：深度记事中转站的核心底座之—LiteLLM详细介绍

ChatGPT/Claude的计费体系

liz，公众号：深度记事Claude vs GPT 收费体系深度调研

有兴趣可以加微拉你进群深入交流：