A multi-platform AI content repurposing engine built for creators, marketers, and strategists who need to publish across channels — fast.
Live: content.wendiblac.com
Portfolio: wendiblac.com
- Overview
- Features
- Architecture
- Tech Stack
- Project Structure
- API Reference
- Getting Started
- Environment Variables
- Deployment
- Roadmap
- License
ContentForge AI transforms a single piece of content into platform-optimised posts for Twitter/X, LinkedIn, Instagram, and Blog — with intelligent tone adaptation, hashtag generation, hook optimisation, and CTA suggestions.
The tool supports three distinct operational modes:
| Mode | Purpose |
|---|---|
| Repurpose | Adapt content for each platform while preserving the core message |
| Expand | Turn short-form input into detailed, long-form content |
| Shrink | Condense long-form content into punchy, viral-ready posts |
- Multi-platform batch generation — generate content for up to 4 platforms in a single request
- Tone control — Professional, Casual, Viral, or Educational voice presets
- Per-platform regeneration — regenerate output for any individual platform without re-running the entire batch
- Hook generator — optimises the opening line for maximum engagement
- Hashtag generator — produces 5–8 contextually relevant hashtags per platform
- CTA suggestions — tailored call-to-action recommendations for each output
- Tabbed output interface with copy-to-clipboard per platform
- Animated transitions powered by Framer Motion
- Dark editorial design system with amber accent palette
- Fully responsive layout (mobile → desktop)
┌─────────────────────────────────────────────────┐
│ Client (React) │
│ │
│ ContentInput ──→ content-service ──→ OutputTabs │
│ ↓ ↓ │
│ [tone, mode, POST /generate-content │
│ platforms] ↓ │
│ ┌─────────────────────┐ │
│ │ Edge Function │ │
│ │ (Deno runtime) │ │
│ │ │ │
│ │ System prompt │ │
│ │ + structured tool │ │
│ │ calling (JSON) │ │
│ │ ↓ │ │
│ │ AI Gateway │ │
│ │ (Gemini 3 Flash) │ │
│ └─────────────────────┘ │
└─────────────────────────────────────────────────┘
- User enters content, selects tone, platforms, and mode
- Client serialises the payload and sends a
POSTrequest to thegenerate-contentedge function - The edge function constructs a system prompt with platform-specific guidelines and enforces structured output via tool calling
- The AI model returns a JSON payload conforming to the
PlatformOutputschema - The client renders each platform's output in its own tab with copy and regenerate controls
| Layer | Technology |
|---|---|
| Framework | React 18 + TypeScript 5 |
| Build | Vite 5 |
| Styling | Tailwind CSS v3, custom design tokens (HSL) |
| Animation | Framer Motion |
| Backend | Supabase Edge Functions (Deno) |
| AI Model | Google Gemini 3 Flash (via gateway) |
| Typography | Space Grotesk (Google Fonts) |
src/
├── components/
│ ├── ContentInput.tsx # Input panel: textarea, tone selector, platform picker, mode toggle
│ ├── OutputTabs.tsx # Tabbed output display with copy/regenerate per platform
│ ├── NavLink.tsx # Navigation link component
│ └── ui/ # Reusable UI primitives (shadcn/ui)
├── hooks/
│ ├── use-mobile.tsx # Responsive breakpoint hook
│ └── use-toast.ts # Toast notification hook
├── integrations/
│ └── supabase/
│ ├── client.ts # Supabase client singleton
│ └── types.ts # Auto-generated database types
├── lib/
│ ├── content-service.ts # API layer: generateContent(), regeneratePlatform()
│ └── utils.ts # Shared utility functions
├── pages/
│ ├── Index.tsx # Main application page
│ └── NotFound.tsx # 404 fallback
├── types/
│ └── content.ts # Type definitions: Tone, Platform, Mode, PlatformOutput
├── index.css # Design system tokens and global styles
├── App.tsx # Router configuration
└── main.tsx # Application entry point
supabase/
├── config.toml # Project configuration
└── functions/
└── generate-content/
└── index.ts # AI content generation edge function
Generates platform-optimised content from a single input.
Request Body:
{
"content": "Your original content here...",
"tone": "professional",
"platforms": ["twitter", "linkedin", "instagram", "blog"],
"mode": "repurpose"
}| Field | Type | Required | Values |
|---|---|---|---|
content |
string |
✅ | Raw text input |
tone |
string |
✅ | professional, casual, viral, educational |
platforms |
string[] |
✅ | twitter, linkedin, instagram, blog |
mode |
string |
✅ | repurpose, expand, shrink |
Response:
{
"outputs": [
{
"platform": "twitter",
"content": "Generated tweet thread...",
"hashtags": ["#AI", "#ContentCreation"],
"hook": "Attention-grabbing first line",
"cta": "Follow for more insights"
}
]
}Error Responses:
| Status | Description |
|---|---|
400 |
Missing required fields |
429 |
Rate limit exceeded |
402 |
AI credits exhausted |
500 |
Internal server error |
- Node.js ≥ 18
- Bun (preferred) or npm
- A Supabase project with Edge Functions enabled
# Clone the repository
git clone https://github.com/wendiblac/contentforge-ai.git
cd contentforge-ai
# Install dependencies
bun install
# Start the development server
bun run devThe application will be available at http://localhost:5173.
| Variable | Description |
|---|---|
VITE_SUPABASE_URL |
Supabase project URL |
VITE_SUPABASE_PUBLISHABLE_KEY |
Supabase anonymous/public key |
Edge function secrets (configured server-side):
| Secret | Description |
|---|---|
LOVABLE_API_KEY |
AI gateway authentication key |
The application is deployed as a static site on a custom subdomain:
- Frontend:
content.wendiblac.com— static build served via CDN - Backend: Edge functions deployed to the Supabase project region
# Production build
bun run build
# Output: dist/- Content history — persist generated outputs with user accounts
- SEO article mode — generate full-length SEO-optimised articles
- Scheduling integration — connect to Buffer/Hootsuite for direct publishing
- Analytics dashboard — track content performance across platforms
- Team collaboration — shared workspaces with role-based access
- Template library — pre-built content frameworks for common use cases
Wendi Blac
wendiblac.com · GitHub
This project is proprietary. All rights reserved.