Tang Tard Meme Factory 🍊

AI-Powered Meme Editor with Open API & CLI — Create memes, integrate meme creation into your app, or let AI generate maximum hilarity. No API key required.

Quick Integration (for developers)

Add meme creation to your app in one line. No API key. No SDK. Just a link:

<a href="https://smoothbrain.app/app?image=YOUR_IMAGE_URL&mode=tard" target="_blank">
  Make a Meme
</a>

Or via CLI:

npx tard-memes render --image https://example.com/meme.jpg --mode chad
npx tard-memes open --template drake --mode tard

Full API & CLI docs | AGENTS.md | OpenAPI spec | LLM docs

Docs & Developer Assets

| Resource | Description | |----------|-------------| | AGENTS.md | API & CLI reference for agents and developers | | DEVLIFE.md | Internal dev guide — setup, rules, prompts, asset management | | docs/CLOUDFLARE_SETUP.md | Cloudflare Pages deployment & KV namespace setup | | docs/PUBLISHING.md | npm publishing guide for the CLI | | openapi.json | OpenAPI 3.1 spec | | llms.txt | LLM-readable integration guide | | .well-known/agents.json | Agent discovery (endpoints, skills, capabilities) |

Agent & IDE Integration

Skills and rules for every major AI coding agent:

| Platform | Config File | Skills | |----------|------------|--------| | Claude Code | CLAUDE.md | .agent/skills/ | | Cursor | .cursor/skills/ | .cursor/rules/ | | GitHub Copilot | .github/copilot-instructions.md | — | | OpenAI Codex | codex.md | — | | Cline / Roo Code | .clinerules | — | | Windsurf | .windsurfrules | — | | Generic | skills/tard-memes.md | — |

All skills are also served on production at smoothbrain.app/skills/ and discoverable via /.well-known/agents.json.

Features

Core Meme Creation

• Template Library — Browse trending meme templates from Imgflip or upload your own images
• Parts Bin — Built-in sticker/asset library for drag-and-drop layering
• Text Layers — Customizable text with full styling (font, size, color, outline, spacing)
• Multi-Layer System — Stack multiple image and text layers with positioning
• Background Removal — AI-powered background removal for stickers and cutouts
• Canvas Persistence — Auto-saved and restored on refresh

AI-Powered

• Caption Generation — AI analyzes your image and generates caption options
• Image Generation — Create AI images as backgrounds or sticker layers
• Roast Mode — Spicy caption generation for maximum savagery
• GIF Search — Integrated Giphy search

Modes

| Mode | Vibe | |------|------| | Tard Mode 🍊 | Beginner-friendly quick meme creation | | Chad Mode 🔥 | Full arsenal — advanced features & roast mode |

Export & Share

• High-Quality PNG with embedded metadata
• One-click clipboard copy
• Paste images directly onto the canvas

API & Integration

The API is completely open — no API key, no auth required. Fair-use rate limits apply per IP.

URL Parameters

Open the editor with an image pre-loaded:

https://smoothbrain.app/app?image=IMAGE_URL&mode=tard&top=Hello&bottom=World

| Param | Required | Description | |-------|----------|-------------| | image | Yes* | Direct URL to any image | | template | Yes* | Search imgflip templates by name (e.g. drake) | | mode | No | tard (default) or chad | | top | No | Pre-fill top caption | | bottom | No | Pre-fill bottom caption | | ref | No | Referral source tracking |

*One of image or template is required.

CLI

npx tard-memes health                                    # API status
npx tard-memes templates drake                           # Search templates
npx tard-memes render --image URL --mode chad            # Generate editor URL
npx tard-memes open --template drake --top "Hello"       # Open in browser

API Endpoints

Base URL: https://smoothbrain.app — all public, no auth. Rate limits per IP (e.g. 20 AI req/min, 120 template searches/min).

| Method | Path | Description | |--------|------|-------------| | GET | /api/v1/health | Health check + API discovery links | | GET | /api/v1/templates?search=drake | Search meme templates | | GET | /api/v1/templates/:id | Get template by ID with editor URLs | | POST | /api/v1/memes/render | Generate editor URL from image/config | | POST | /api/v1/memes/render-image | Render meme as SVG image (returns image/svg+xml) | | POST | /api/v1/memes/caption | AI caption generation (BYOK) | | POST | /api/v1/memes/imagine | AI image generation (BYOK) | | POST | /api/v1/memes/auto | Full pipeline: analyze + caption + editor URL (BYOK) |

Example: Generate an editor link

curl -X POST https://smoothbrain.app/api/v1/memes/render \
  -H "Content-Type: application/json" \
  -d '{"image":"https://example.com/template.jpg","mode":"chad","topText":"Top","bottomText":"Bottom"}'

Use Case: Meme Competitions

A platform like Grove Gaming hosts meme competitions with template images:

1. Platform posts a competition template image
2. Add a "Make a Meme" button: smoothbrain.app/app?image=TEMPLATE_URL&mode=tard&ref=grove-gaming
3. User creates their meme in the editor
4. User exports and submits back to the competition

Zero server-to-server setup. The image URL is passed client-side.

Tech Stack

| Layer | Tech | |-------|------| | Framework | React 19, TypeScript | | Styling | Tailwind CSS 4 | | Build | Vite 6 | | UI | Radix UI, Lucide icons | | Routing | React Router 7 | | API | Cloudflare Pages Functions | | Auth | Clerk (admin panel) | | AI | Multi-provider BYOK (OpenRouter, Gemini, OpenAI, Anthropic, Azure, xAI, Meta) | | Background Removal | @imgly/background-removal | | Hosting | Cloudflare Pages | | CI/CD | GitHub Actions |

Getting Started

Prerequisites

• Node.js 20+
• npm

Installation

git clone https://github.com/grizzleSBstudio/tard-memes.git
cd tard-memes
npm install

Development

npm run dev    # Build + serve full stack (Wrangler, port 3000)

Open http://localhost:3000. Runs frontend + API functions — same as production.

Production Build

npm run build     # Output → dist/

Project Structure

├── functions/              # Cloudflare Pages Functions (API)
│   └── api/v1/
│       ├── _middleware.ts   # CORS headers + rate limiting
│       ├── health.ts        # GET /api/v1/health
│       ├── templates/       # Template search & lookup
│       ├── memes/           # Editor link generation
│       ├── keys/            # API key management (admin)
│       └── admin/           # Admin auth
├── cli/
│   └── tard-memes.js       # CLI tool
├── public/
│   ├── assets/              # Audio, images, video backgrounds
│   ├── partsbin/            # Sticker/asset library
│   ├── openapi.json         # OpenAPI 3.1 spec
│   └── llms.txt             # LLM integration guide
├── src/
│   ├── app/
│   │   ├── MemeEditor.tsx   # Main editor (URL param loading)
│   │   ├── LandingPage.tsx  # Animated landing with mode selection
│   │   ├── admin/           # Admin panel (dashboard, API keys, assets)
│   │   └── crew/            # Factory Crew (signup, login, dashboard)
│   ├── canvas/              # MemeCanvas (HTML5 Canvas rendering)
│   ├── contexts/            # ThemeContext (Tard/Chad themes)
│   ├── services/            # AI provider, background removal, templates
│   └── ui/                  # Controls & shared UI components
├── .agent/skills/           # Claude Code / Antigravity agent skills
├── .cursor/skills/          # Cursor IDE integration skills
├── skills/                  # General agent skill files
├── AGENTS.md                # API & CLI reference for agents
├── DEVLIFE.md               # Internal dev guide
├── index.tsx                # React entry + router + Clerk provider
└── wrangler.json            # Cloudflare Pages config

Routes

| Path | Component | Description | |------|-----------|-------------| | / | LandingPage | Animated intro + mode selection | | /app | MemeEditor | Main editor (supports URL params) | | /admin | AdminLayout | Admin panel (API keys, assets) | | /how-to-use | HowToUsePage | Interactive guide | | /terms | TermsPage | Terms of service | | /privacy | PrivacyPage | Privacy policy | | /crew/* | Crew pages | Factory Crew signup/login/dashboard |

Scripts

| Command | Description | |---------|-------------| | npm run dev | Build + serve full stack (Wrangler, port 3000) | | npm run build | Production build → dist/ | | npm run sync-library | Sync parts bin assets (auto-runs with build) |

Deployment

Auto-deploys via GitHub Actions on push to main.

Secrets required:

• CLOUDFLARE_API_TOKEN
• CLOUDFLARE_ACCOUNT_ID

Environment variables (Cloudflare Pages settings):

• ADMIN_PASSWORD — Admin panel password
• VITE_CLERK_PUBLISHABLE_KEY — (optional) Clerk auth
• VITE_ADMIN_EMAILS — (optional) Admin email whitelist

See docs/CLOUDFLARE_SETUP.md for full setup instructions.

License

MIT License — see LICENSE for details.