用 Cursor + ofox API 实现 vibe coding：10 分钟搭建完整应用（2026）

TL;DR — 用 Cursor Composer + ofox API，10 分钟能从零搭出一个支持流式输出的 AI 写作助手。不手写代码，只描述你想要什么，Cursor 生成，你审查，继续迭代。本文给出完整的 Composer 提示词和关键代码片段。

你要搭什么

一个 AI 写作助手网页：输入文字，点按钮，调用 ofox API（Claude Sonnet 4.6）改写，字一个个流式出来。单文件 HTML，不需要后端，浏览器直接打开，可以切换 Claude / DeepSeek / GPT 三个模型。

选这个项目是因为它足够简单，10 分钟能完成，同时把 ofox API 的流式调用演示得很清楚。不是 Hello World，但也不复杂。

准备工作

安装 Cursor（需要 Pro 订阅，$20/月，才能配置自定义 API Key），在 ofox.ai 注册账号拿 API Key。

Cursor 的自定义 API 配置这里不展开，还没配过的先看：Cursor 3 自定义 API 配置完全指南。

新建一个空文件夹，用 Cursor 打开，创建 index.html。

Vibe coding 的节奏

Cursor 的 Composer（Cmd+I，Windows 是 Ctrl+I）是主要入口。你描述需求，它生成代码，你审查，然后继续描述下一步。

核心是描述结果，不描述实现。不需要说”用 fetch API 调用，用 ReadableStream 处理流式响应”，只说”支持流式输出”就够了。你管方向，它管细节。

关于 vibe coding 的完整工作流，可以看：Vibe Coding 完全指南：2026 年 AI 编程工作流从入门到实战。

第一步：生成项目骨架

打开 index.html，按 Cmd+I，输入：

创建一个 AI 写作助手网页，要求：
- 单文件 HTML，不需要后端
- 顶部有标题"AI 写作助手"和一个 API Key 输入框
- 左侧是文本输入区，右侧是输出区，两栏布局
- 底部有一个"优化文字"按钮
- 调用 OpenAI 兼容 API（地址和模型先用变量占位）
- 支持流式输出，字一个个出来
- UI 简洁，用系统字体，不引入外部 CSS 框架

Composer 生成完整的 HTML 文件，按 Accept 接受。这时候 API 地址和模型还是占位符，下一步接入 ofox。

第二步：接入 ofox API

继续在 Composer 里说：

把 API 配置改成：
- Base URL: https://api.ofox.ai/v1
- 默认模型: anthropic/claude-sonnet-4.6
- API Key 从页面顶部的输入框读取，不硬编码

Cursor 更新 fetch 调用。核心代码长这样：

const response = await fetch('https://api.ofox.ai/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${apiKey}`
  },
  body: JSON.stringify({
    model: 'anthropic/claude-sonnet-4.6',
    messages: [{ role: 'user', content: `优化以下文字：\n\n${inputText}` }],
    stream: true
  })
});

流式输出的处理：

const reader = response.body.getReader();
const decoder = new TextDecoder();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const lines = decoder.decode(value).split('\n');
  for (const line of lines) {
    if (line.startsWith('data: ') && line !== 'data: [DONE]') {
      const data = JSON.parse(line.slice(6));
      outputArea.textContent += data.choices[0]?.delta?.content || '';
    }
  }
}

ofox API 完全兼容 OpenAI 格式，SSE 事件结构一样。用过 OpenAI streaming 的话，这段代码直接能用。

第三步：加功能

基础版跑通之后，继续迭代。每次只加一个功能。

加模型选择：

加一个模型选择下拉框，放在 API Key 输入框旁边，选项：
- anthropic/claude-sonnet-4.6（默认）
- deepseek/deepseek-v3.2
- openai/gpt-5.4-mini

加预设提示词：

在输入区上方加三个预设按钮：
- "优化表达"（改善措辞，保持原意）
- "精简压缩"（缩短到原来的一半）
- "改成正式风格"（商务邮件风格）
点击按钮后自动填充对应的提示词前缀

加错误处理：

加错误处理：
- API Key 为空时提示"请先填写 API Key"
- 请求失败时在输出区显示错误信息，包括 HTTP 状态码
- 请求进行中禁用按钮，完成后恢复

每次 Composer 改完，审查改动是否符合预期就行，不需要读懂每一行。

第四步：调试

打开 index.html，填入 ofox API Key，输入文字，点按钮。

出问题就把报错直接粘给 Composer：

控制台报错：SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
帮我修复

这个报错通常是 API Key 错误，服务器返回了 HTML 错误页而不是 JSON。修复方式是解析 JSON 前先检查 response.ok。一两轮对话基本能解决。

完整效果

10 分钟后你有一个可以在浏览器直接打开的 HTML 文件，支持流式输出，可以切换三个模型，有三种预设提示词，错误处理完整。代码量大概 150-200 行，你一行都没手写。

边界在哪里

BYOK 需要 Cursor Pro 订阅（$20/月）才能启用。上面的工作流用的是 Composer（Chat 模式），Agent 模式即使有 Pro 也不走用户 API Key，需要禁用自定义 Key 才能使用。对于单文件项目，Composer 够用。

10 分钟是针对这种单文件应用的。有数据库、有后端、有认证的完整应用，同样的工作流可以用，但需要更多轮对话和更仔细的审查。

AI 生成的代码需要审查。涉及 API Key 处理、用户数据的部分，你需要确认代码在做什么。

下一步

同样的工作流可以用来搭批量处理文档的 Node.js 脚本、调用多个模型做对比的工具、接入 ofox API 的 Chrome 扩展。

想对比 Cursor 和其他 vibe coding 工具的差异，这篇有详细横评：Vibe Coding 工具横评：Cursor vs Windsurf vs Roo Code vs Claude Code

ofox API 支持 100+ 模型，包括 Claude Opus 4.7、GPT-5.4 Pro、Gemini 3.1 Pro，统一 OpenAI 兼容格式，一个 Key 全部搞定。模型列表和价格在 ofox.ai/zh/models。