Agnes AI Demo

填好 API Key，一键验证 Agnes AI 免费模型能不能跑。

不需要自己读接口文档、不需要用 AI 帮你写接入代码——克隆仓库、配置密钥、启动即可在浏览器里测试聊天、文生图、文生视频。

仓库地址：github.com/kxdds/Agnes-AI-Demo

为什么开源

Agnes 提供免费 API，但很多人卡在「怎么调通」这一步。本项目把官方接口封装成可运行的 Web Demo：

• 零接入成本：API Key 写在 .env，其余已接好
• 全模态覆盖：聊天、图片、视频三个 Tab 直接试
• 本地代理：后端转发请求，避免 CORS，Key 不暴露给浏览器
• 可参考源码：src/lib/api.ts 即最小可用调用示例

环境要求

• Node.js 18+
• npm（或 pnpm / yarn）

快速开始（3 步）

1. 克隆并安装

git clone https://github.com/kxdds/Agnes-AI-Demo.git
cd Agnes-AI-Demo
npm install

2. 配置 API Key

在 platform.agnes-ai.com 注册并创建免费 API Key（Settings → API Keys），然后：

cp .env.example .env

编辑 .env，填入你的密钥：

AGNES_API_KEY=sk-你的密钥

3. 启动

npm run dev

浏览器打开 http://localhost:5173。

npm run dev 会同时启动：

服务	端口	说明
Vite 前端	5173	聊天 / 图片 / 视频 / 素材库 UI
Hono 代理	3001	转发到 https://apihub.agnes-ai.com/v1

怎么验证「能不能跑」

启动后按 Tab 逐项测试：

Tab	模型	操作
聊天	agnes-1.5-flash	输入任意问题，看是否流式返回
图片	agnes-image-2.1-flash	输入 prompt 生成图片
视频	agnes-video-v2.0	输入 prompt，等待异步任务完成并播放

也可检查代理健康状态：

curl http://localhost:3001/api/health
# {"ok":true,"hasApiKey":true}

若 hasApiKey 为 false，说明 .env 未配置或 Key 为空。

常见问题

页面能开，但请求报错 AGNES_API_KEY is not set

• 确认已复制 .env.example 为 .env 并填入 Key
• 修改 .env 后需重启 npm run dev

聊天无响应 / 502

• 检查网络能否访问 apihub.agnes-ai.com
• 确认 API Key 有效且未过期

视频一直在生成中

• 视频为异步任务，通常需数分钟；Demo 会自动轮询
• 超时超过 15 分钟会提示重试

内置免费模型

能力	模型 ID	API 端点
对话（SSE 流式）	agnes-1.5-flash	POST /v1/chat/completions
文生图 / 图生图	agnes-image-2.1-flash	POST /v1/images/generations
文生视频	agnes-video-v2.0	POST /v1/videos → GET /v1/videos/{task_id}

官方文档：Quickstart · Image 2.0 · Video

项目结构

server/index.ts       # API 代理（保护 Key、处理 CORS、媒体转发）
src/lib/api.ts        # Agnes API 封装，可直接参考接入自己的项目
src/components/       # Chat / Image / Video / Library 面板
src/hooks/            # useChat、useVideoTask、useLibrary

脚本

命令	说明
npm run dev	同时启动前端 + 代理
npm run dev:web	仅前端
npm run dev:api	仅代理
npm run build	生产构建
npm run preview	预览构建产物

License

MIT