Loomic

💡 Loomic 是什么

CapCut 刚推出了 Video Studio——基于画布的 AI 视频制作空间，Lovart 做的是 AI 设计 Agent，Canva 也在往 AI 方向猛推。这类产品的共同点：闭源、数据不在你手里、定价你说了不算。

Loomic 做的是同一件事，但完全开源。你在无限画布上跟 AI 对话，它直接生成图片、视频，摆好位置，调好样式。不需要时间轴，不需要模板，不需要学 prompt 工程。说"把左边那张换成暖色调"，AI 就懂了。

从构思、角色设定、故事板、场景生成、细节打磨到导出——整个创作流程在一个画布上完成。底层是 LangGraph 驱动的 Agent，接了 Google Gemini / Vertex AI / OpenAI / Replicate 十几个模型（包括 Veo 3.1、Kling、Seedance、Sora 等），图片视频都能生。

开源，可以自己部署，数据全在你手里。

✨ Features

🗣️ 对话式画布设计

• 在无限画布上和 AI 对话，直接生成、编辑、排版
• 多轮对话迭代，说"把左边那张图换成暖色调"就行
• Agent 看得懂画布上下文，知道你在说哪个元素

🖼️ 图片生成（15+ 模型）

• Google Imagen 4 / Gemini Image / Vertex AI
• OpenAI DALL-E 3 / GPT Image
• Replicate: Flux Kontext, SDXL, Recraft, Seedream...
• 填自己的 API Key，按需组合

🎬 视频生成

• Google Veo 3.1 / 3.0 / 2.0（文生视频、图生视频）
• Replicate: Kling, Seedance, Wan, Sora, Hailuo...
• 支持原生音频生成

🎨 无限画布

• 基于 Excalidraw，自由拖拽、缩放、分层
• AI 生成的素材直接落在画布上，不用手动导入
• 导出、截图、分享

🏷️ Brand Kit

• 设定品牌色、字体、Logo
• AI 生成时自动遵循品牌规范
• 集成 Google Fonts

💰 积分 & 付费

• 内置积分系统，按量计费
• LemonSqueezy 订阅集成
• 免费用户每天有基础额度

🧩 可扩展技能系统

• Markdown 定义 workspace 技能
• 按项目扩展 Agent 能力

🏗️ Architecture

┌─────────────┐     WebSocket / REST      ┌─────────────────┐
│   Next.js   │ ◄──────────────────────►  │  Fastify API    │
│   Frontend  │                           │  + LangGraph    │
│  (Vercel)   │                           │  Agent (Railway) │
└─────────────┘                           └────────┬────────┘
                                                   │ PGMQ
                                          ┌────────▼────────┐
                                          │    Worker(s)     │
                                          │  Image / Video   │
                                          │  Generation      │
                                          │  (Railway)       │
                                          └────────┬────────┘
                                                   │
                                          ┌────────▼────────┐
                                          │    Supabase      │
                                          │  PostgreSQL      │
                                          │  Auth / Storage  │
                                          └─────────────────┘

🛠️ Tech Stack

🚀 Getting Started

Prerequisites

• Node.js >= 20
• pnpm >= 10 (npm install -g pnpm)
• Supabase CLI (brew install supabase/tap/supabase)
• A Supabase project (free tier works)
• At least one AI API key (Google or OpenAI)

1. Clone & Install

git clone https://github.com/fancyboi999/Loomic.git
cd Loomic
pnpm install

2. Set Up Supabase

Create a Supabase project at supabase.com, then apply migrations:

supabase link --project-ref YOUR_PROJECT_REF
supabase db push

This creates all required tables, RLS policies, storage buckets, and the PGMQ job queue.

3. Configure Environment

cp .env.example .env.local

Edit .env.local with your credentials:

# ── Required: Supabase ──────────────────────────────────────
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
SUPABASE_DB_URL=postgresql://postgres:pw@db.your-project.supabase.co:5432/postgres
SUPABASE_PROJECT_ID=your-project-ref
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

# ── Required: At least one AI provider ──────────────────────
LOOMIC_AGENT_MODEL=google:gemini-2.5-flash     # or openai:gpt-4o
GOOGLE_API_KEY=your-google-api-key             # for Gemini + Imagen + Veo
# OPENAI_API_KEY=your-openai-key               # alternative: OpenAI provider

# ── Optional: More generation providers ─────────────────────
# REPLICATE_API_TOKEN=                          # 13+ image/video models
# METASO_API_KEY=                               # MiniMax H3 video
# METASO_API_BASE=https://metaso.cn/api/minimax/
# GOOGLE_VERTEX_PROJECT=                        # Vertex AI (service account)
# GOOGLE_VERTEX_LOCATION=global                 # global for image/LLM
# GOOGLE_VERTEX_VIDEO_LOCATION=us-central1      # us-central1 for video
# GOOGLE_APPLICATION_CREDENTIALS=               # path to SA JSON

The database URL above is a direct connection and requires IPv6. If your network does not support IPv6, copy the Session pooler URI (port 5432) from your Supabase project's Connect dialog into SUPABASE_DB_URL. Its host and username differ from the direct connection. Leave SUPABASE_JWT_SECRET empty for remote token verification, or set it to a single public JWK object (not a JWKS {"keys":[...]} object).

Next.js reads apps/web/.env.local separately. Copy apps/web/.env.local.example to that path, then set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY to the same public values as the root .env.local. Set NEXT_PUBLIC_SERVER_BASE_URL to your local API URL (by default http://localhost:3001).

Google sign-in needs separate OAuth credentials; GOOGLE_API_KEY is only for AI models. To enable the Continue with Google button, create a Web application OAuth client in Google Auth Platform. Set http://localhost:3000 as an authorized JavaScript origin and https://YOUR_PROJECT_REF.supabase.co/auth/v1/callback as an authorized redirect URI. Add the client's ID and secret under Supabase Dashboard → Authentication → Sign In / Providers → Google, then enable the provider. In Authentication → URL Configuration, allow http://localhost:3000/auth/callback as a redirect URL. You can use the seeded email/password accounts without configuring Google OAuth.

Note: See Environment Variables Reference for the full list.

4. Seed Test Accounts (optional)

自部署后，跑一下种子脚本就能直接体验各套餐功能，不需要接支付：

pnpm seed

脚本会在你自己的 Supabase 中创建 4 个测试账号：

These accounts are created in YOUR Supabase instance.

Use password sign-in on /login for these accounts. The login-link option only works for an email account that already exists; use /register to create a new account.

5. Start Development

pnpm dev

This starts all services simultaneously:

Open http://localhost:3000 and start creating!

☁️ Deployment

Frontend → Vercel

# Connect your repo to Vercel, then set:
# Build C