Tutorials

From Zero to One: How to Build Your First SaaS Product with AI API

·2 min read·202 views
From Zero to One: How to Build Your First SaaS Product with AI API

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

ComponentTechnologyDescription
FrontendNext.js + TailwindRapid development
BackendNext.js API RoutesFull-stack framework
AICiyuano APIUnified entry
DatabasePostgreSQLUser data
PaymentStripeSubscription 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 (