From Zero to One: How to Build Your First SaaS Product with AI API
·2 min read·64 views
From Zero to One: Building an AI SaaS Product
Want to build an AI product but don't know where to start? This article will guide you through using Ciyuano's API to build an AI writing assistant SaaS from scratch.
Product Design
Our AI writing assistant features:
- Article continuation
- Content rewriting
- Grammar check
- Multilingual translation
- Style adjustment
Tech Stack
| Component | Technology | Description |
|---|---|---|
| Frontend | Next.js + Tailwind | Rapid development |
| Backend | Next.js API Routes | Full-stack framework |
| AI | Ciyuano API | Unified entry |
| Database | PostgreSQL | User data |
| Payment | Stripe | Subscription billing |
Core Code
1. AI Service Wrapper
// 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: "You are a professional writing assistant。naturally continue writing based on context。",
rewrite: "You are a text rewriting expert。while preserving the original meaning，rewrite content with better expression。",
check: "You are a grammar checking expert。check and fix grammar errors、punctuationandexpression issues。",
translate: "You are a professional translator。translate content to the target language，preserve original meaning and style。",
};
const response = await client.chat.completions.create({
model: "deepseek-v4-flash",
messages: [
{ role: "system", content: systemPrompts[action] },
{ role: "user", content: `Context：${context}\n\nTask：${prompt}` },
],
temperature: 0.7,
max_tokens: 2000,
});
return response.choices[0].message.content;
}
2. API Routes
// 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();
// Check user balance
const user = await checkUserBalance(req);
if (!user || user.balance < 0.01) {
return NextResponse.json(
{ error: "Insufficient balance，Please recharge" },
{ status: 402 }
);
}
const result = await generateContent(prompt, context, action);
return NextResponse.json({ content: result });
}
3. Frontend Component
// 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 (