从零到一：如何用 AI API 构建你的第一个 SaaS 产品
·4 分钟阅读·201 次阅读
从零到一：构建 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 (