AI SaaSを0円で作る

Page content

AI SaaSを0円で構築し、実際にブラウザで動かすまでのすべてのコマンドを順番に書き出します。

ターミナル（Macなら「ターミナル」、Windowsなら「PowerShell」や「コマンドプロンプト」）を開いて、以下の通りに進めてください。

1. プロジェクトの作成と初期設定

まずは、Next.jsの最新プロジェクトを作成します。

Bash

# 1. プロジェクトを作成（プロジェクト名は my-ai-saas としています）
# 全てデフォルト（Enter連打）でOKですが、App Routerは必ず「Yes」にしてください。
npx create-next-app@latest my-ai-saas

# 2. 作成したディレクトリに移動
cd my-ai-saas

# 3. 必要なライブラリ（Vercel AI SDK と Google Gemini 用）をインストール
npm install ai @ai-sdk/google lucide-react

# 4. 開発用サーバーを起動（ブラウザで http://localhost:3000 を確認）
npm run dev

2. 環境変数の設定

APIキーをプログラムに直接書くのは厳禁です。

Bash

# 1. 環境変数ファイルを作成（Mac/Linux）
touch .env.local

# ※ Windows (PowerShell) の場合はこちら
# New-Item .env.local

作成した .env.local をテキストエディタで開き、以下を書き込みます。

Plaintext

GOOGLE_GENERATIVE_AI_API_KEY=ここにGeminiのAPIキーを貼る

3. ファイルの作成（コードの流し込み）

前述の詳しいコードを、以下のコマンドで作成したファイルにそれぞれコピペしてください。

  • API側（サーバー）: app/api/chat/route.ts を作成

    Bash

    mkdir -p app/api/chat
touch app/api/chat/route.ts

  • UI側（画面）: app/page.tsx を書き換え（既存の中身を全部消してOK）

4. Vercelへのデプロイ（世界公開）

作成したツールをインターネット上に公開します。これも0円です。

Bash

# 1. Vercel CLIのインストール（初回のみ）
npm install -g vercel

# 2. ログイン（ブラウザが開くので承認する）
vercel login

# 3. デプロイの実行
# 質問には全て Enter で答えていけばOKです。
vercel

重要：Vercelの管理画面（Dashboard）での設定

コマンドラインでのデプロイが終わったら、Vercelのプロジェクト設定画面（Settings > Environment Variables）で、先ほどの GOOGLE_GENERATIVE_AI_API_KEY を登録してください。これを行わないと、公開環境でAIが動きません。

5. 運用中に使う便利なコマンド

開発を進める中でよく使うコマンドです。

コマンド 内容
npm run dev ローカルで開発サーバーを起動（修正が即反映される）
npm run build 本番公開用のビルドチェック（エラーがないか確認）
vercel --prod 修正した内容を本番サイトに反映（更新デプロイ）

ここでは **「AI SaaSをほぼ0円で作る基本構造」**を、
PCに何もない状態から動くところまで順番に説明します。

使う構成（無料枠ベース）

  • フロント + API: Next.js

  • AI SDK: Vercel AI SDK

  • AIモデル: Google AI Studio

  • DB: Supabase

  • ホスティング: Vercel

※この構成は 個人AI SaaSの最小構成です。

全体構造（まず理解）

Browser
↓
Next.js Frontend
↓
Next.js API
↓
AI SDK
↓
Gemini API
↓
Database (Supabase)

STEP1 Node.jsインストール

まず Node.js を入れます。

確認

node -v

推奨

v18以上

STEP2 プロジェクト作成

npx create-next-app@latest ai-saas

質問は次でOK

TypeScript → Yes
Tailwind → Yes
App Router → Yes

移動

cd ai-saas

STEP3 AI SDKインストール

npm install ai @ai-sdk/google

これで

  • AI呼び出し

  • ストリーミング

が使えます。

STEP4 Gemini APIキー取得

1
https://aistudio.google.com/

アクセス

2
APIキー作成

3
コピー

例

AIzaSyxxxxx

STEP5 環境変数設定

プロジェクトに

.env.local

作成

GOOGLE_GENERATIVE_AI_API_KEY=AIzaSyxxxxx

STEP6 AI API作成

フォルダ作成

app/api/chat

ファイル

route.ts

コード

import { streamText } from "ai"
import { google } from "@ai-sdk/google"

export async function POST(req: Request) {

  const { messages } = await req.json()

  const result = await streamText({
    model: google("gemini-1.5-flash"),
    messages
  })

  return result.toDataStreamResponse()
}

STEP7 チャットUI作成

app/page.tsx

"use client"

import { useChat } from "ai/react"

export default function Chat() {

  const { messages, input, handleInputChange, handleSubmit } =
    useChat({ api: "/api/chat" })

  return (
    <main className="max-w-2xl mx-auto p-10">

      <h1 className="text-2xl font-bold mb-6">
        AI Chat
      </h1>

      {messages.map(m => (
        <div key={m.id}>
          <b>{m.role}</b>: {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          className="border p-2 w-full"
        />
      </form>

    </main>
  )
}

STEP8 起動

npm run dev

ブラウザ

http://localhost:3000

AIチャットが動きます。

STEP9 データベース追加（Supabase）

1
https://supabase.com/

2
プロジェクト作成

3
PostgreSQL DB取得

これで

ユーザー
チャット履歴
課金情報

を保存できます。

STEP10 デプロイ

インストール

npm install -g vercel

ログイン

vercel login

デプロイ

vercel

これで

https://xxxxx.vercel.app

に公開されます。

完成構造

ai-saas
│
├ app
│ ├ api
│ │ └ chat
│ │   └ route.ts
│ │
│ └ page.tsx
│
├ .env.local
├ package.json

0円で作れるAI SaaS例

この構造で作れるもの

  • AIブログ生成

  • AI翻訳

  • AI要約

  • AI営業メール生成

  • AIチャット

個人開発者の最小スタック

2026年の実例

Next.js
+
AI SDK
+
Gemini API
+
Supabase
+
Vercel

これで

開発コスト
0円

でAI SaaSが作れます。

もし希望があれば、次を解説できます👇

「300行で作れるAI SaaS完全コード（課金付き）」
「1人で月100万円MRRに一番近いAI SaaS」
「AI SaaSのユーザー獲得テンプレ」

実は 個人でもかなり現実的なビジネスモデルがあります。

AI SaaSを「ほぼ0円」で作る構成は、2026年でも実際に多くの個人開発者が使っています。
ポイントは すべて無料枠（Free Tier）を組み合わせることです。

ここでは **シリコンバレー系の個人開発者がよく使う“0円スタック”**を整理します。

AI SaaSを0円で作る基本構造

AI
↓
Backend
↓
Database
↓
Frontend
↓
Auth
↓
Hosting

この各レイヤーを 無料サービスで構成します。

① AI（LLM API）

無料枠が大きいものを使います。

主な選択肢

  • Google AI Studio

  • GroqCloud

  • OpenRouter

おすすめ

Gemini Flash API

理由

  • 無料枠が大きい

  • 高速

  • APIキー取得が簡単

② Backend（API）

一番多い構成

  • Node.js

  • Next.js

理由

  • APIとフロントを同じプロジェクトで作れる

③ AIフレームワーク

AI処理を簡単にするSDK

おすすめ

  • Vercel AI SDK

できること

チャット
ストリーミング
Tool calling
複数モデル切替

④ データベース

無料枠が大きいDB

おすすめ

  • Supabase

無料枠

PostgreSQL
Auth
Storage

が全部ついています。

⑤ 認証（ログイン）

SaaSで必要

おすすめ

  • Clerk

無料枠

10000ユーザー

まで。

⑥ フロントエンド

AI SaaSで一番多い

  • Next.js

  • React

  • TailwindCSS

特徴

高速
SEO
Vercelと相性◎

⑦ デプロイ（ホスティング）

無料で使える

  • Vercel

無料枠

個人プロジェクト
サーバレス
自動デプロイ

⑧ 0円AI SaaSスタック（完成）

最も多い構成

Frontend
Next.js
Tailwind

Backend
Next.js API

AI
Gemini API

Database
Supabase

Auth
Clerk

Hosting
Vercel

フォルダ構造例

ai-saas
│
├ app
│ ├ api
│ │ └ chat
│ │    └ route.ts
│ │
│ └ page.tsx
│
├ lib
│ └ ai.ts
│
├ .env.local

実際のAI APIコード

例

import { streamText } from "ai"
import { google } from "@ai-sdk/google"

export async function POST(req: Request) {

  const { messages } = await req.json()

  const result = await streamText({
    model: google("gemini-1.5-flash"),
    messages
  })

  return result.toDataStreamResponse()
}

0円で作れるAI SaaS例

この構成で作れるもの

  • AI記事生成

  • AI翻訳

  • AI要約

  • AI営業メール生成

  • AIブログ生成

個人開発者の実際の構成

2026年の典型

Next.js
+
Vercel AI SDK
+
Gemini API
+
Supabase
+
Vercel

これで

月0円

でAI SaaSが動きます。

💡もし希望があれば、次を詳しく解説できます。

  • 「個人で年商1億に一番近いAI SaaS TOP10（2026）」

  • 「300行で作れるAI SaaS完全コード」

  • 「AI SaaSを3時間で作るテンプレート」

かなり実用的な内容です。