从零到一：构建 AI SaaS 产品

想做一个 AI 产品但不知道从何开始？本文将带你用 Ciyuano 词元圈的 API，从零构建一个 AI 写作助手 SaaS。

产品设计

我们的 AI 写作助手功能：

文章续写
内容改写
语法检查
多语言翻译
风格调整

技术栈

组件	技术	说明
前端	Next.js + Tailwind	快速开发
后端	Next.js API Routes	全栈框架
AI	Ciyuano API	统一入口
数据库	PostgreSQL	用户数据
支付	Stripe	订阅计费

核心代码

1. AI 服务封装

// lib/ai.ts
import OpenAI from "openai";

const client = new OpenAI({
baseURL: "https://www.ciyuano.com/v1",
apiKey: process.env.CIYUANO_API_KEY,
});

export async function generateContent(
prompt: string,
context: string,
action: "continue" | "rewrite" | "check" | "translate"
) {
const systemPrompts = {
continue: "你是一个专业的写作助手。根据上下文自然地续写内容。",
rewrite: "你是一个文字改写专家。保持原意的同时，用更好的表达重写内容。",
check: "你是一个语法检查专家。检查并修正语法错误、标点符号和表达问题。",
translate: "你是一个专业翻译。将内容翻译成目标语言，保持原意和风格。",
};

const response = await client.chat.completions.create({
model: "deepseek-v4-flash",
messages: [
{ role: "system", content: systemPrompts[action] },
{ role: "user", content: `上下文：${context}\n\n任务：${prompt}` },
],
temperature: 0.7,
max_tokens: 2000,
});

return response.choices[0].message.content;
}

2. API 路由

// app/api/generate/route.ts
import { NextRequest, NextResponse } from "next/server";
import { generateContent } from "@/lib/ai";
import { checkUserBalance } from "@/lib/auth";

export async function POST(req: NextRequest) {
const { prompt, context, action } = await req.json();

// 检查用户余额
const user = await checkUserBalance(req);
if (!user || user.balance < 0.01) {
return NextResponse.json(
{ error: "余额不足，请充值" },
{ status: 402 }
);
}

const result = await generateContent(prompt, context, action);

return NextResponse.json({ content: result });
}

3. 前端组件

// components/Editor.tsx
"use client";
import { useState } from "react";

export default function Editor() {
const [content, setContent] = useState("");
const [loading, setLoading] = useState(false);

const handleAction = async (action: string) => {
setLoading(true);
const res = await fetch("/api/generate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
prompt: content.slice(-500),
context: content,
action,
}),
});
const data = await res.json();
setContent(content + "\n\n" + data.content);
setLoading(false);
};

return (

 setContent(e.target.value)}
className="w-full h-64 p-4 border rounded-lg"
placeholder="开始写作..."
/>
<div className="flex gap-2 mt-4">
<button onClick={() => handleAction("continue")} disabled={loading}>
✍️ 续写
</button>
<button onClick={() => handleAction("rewrite")} disabled={loading}>
🔄 改写
</button>
<button onClick={() => handleAction("check")} disabled={loading}>
✅ 检查语法
</button>
</div>
</div>
);
}
</code></pre>
<h2>商业化</h2>
<h3>定价策略</h3>
<table>
<thead><tr><th>套餐</th><th>价格</th><th>额度</th><th>功能</th></tr></thead>
<tbody>
<tr><td>免费版</td><td>¥0</td><td>1000 字/天</td><td>基础功能</td></tr>
<tr><td>基础版</td><td>¥29/月</td><td>5 万字/月</td><td>全部功能</td></tr>
<tr><td>专业版</td><td>¥99/月</td><td>20 万字/月</td><td>全部功能 + 优先响应</td></tr>
</tbody>
</table>
<h2>总结</h2>
<p>用 AI API 构建 SaaS 产品的门槛已经非常低。关键在于找到真实的用户需求，而不是为了用 AI 而用 AI。</p>

技术博客

热门标签

从零到一：如何用 AI API 构建你的第一个 SaaS 产品

使用 OpenAI SDK 无缝切换国产大模型