Loading page
by Praise Moyinoluwa
Generate personalized social media bios in seconds with this TypeScript chain combining a React frontend and OpenAI-powered backend. Enter your name and niche to receive five distinct bio variations with one-click copy functionality. Built with React 18, Vite, Tailwind CSS, and Express—includes retry logic, local fallback generation, and a glass-morphism UI that works seamlessly on mobile and desktop. Licensed under Tetrees License.
Smart Bio Generator is a full-stack TypeScript application that generates AI-powered professional bio variations. It combines a React frontend UI with an Express backend API powered by OpenAI, allowing users to input their name and niche to receive five distinct, customizable bio options.
The chain includes:
bio-ui): React 18 + Vite + Tailwind CSS v4 — responsive, dark-themed UI with copy-to-clipboard functionalitybio-api): Node.js + Express + OpenAI API — generates captions/bios based on input topics/ Endpoint: Accepts a topic parameter and returns AI-generated captions.env| Layer | Technology |
|---|---|
| Frontend Framework | React 18 |
| Frontend Language | TypeScript |
| Frontend Bundler | Vite 6 |
| Frontend Styling | Tailwind CSS v4 (@tailwindcss/vite) |
| Backend Runtime | Node.js |
Spin up an isolated sandbox and run it server-side — no local setup.
Push this product straight into your AI IDE, web builder or cloud IDE.
Download your licensed source snapshot from the library, then follow the setup guide in your workspace.
No reviews yet.
Sign in to join the discussion
Loading discussion…
| Backend Framework | Express |
| Backend Language | TypeScript |
| AI Model | OpenAI API |
| HTTP Client | Fetch API (with retry logic) |
Install & Run:
cd plugin
npm install
npm run build
npm start
Server starts on port 9031 by default.
Development Mode:
npm run dev
Environment Variables (create .env):
PORT=9031
OPENAI_API_KEY=sk-your-key-here
Install & Run:
cd frontend
npm install
npm run dev
Dev server runs at http://localhost:5173 (host 0.0.0.0).
Build for Production:
npm run build
Output: dist/ with relative asset paths (iframe-compatible for TetreesAI platform).
Environment Variables (create .env.local):
VITE_API_BASE_URL=http://localhost:9031
If VITE_API_BASE_URL is not set, the frontend falls back to locally-generated sample bios.
/Description: Generates AI-powered captions based on a provided topic.
Request Body:
{
"topic": "sustainable fashion"
}
| Field | Type | Required | Description |
|---|---|---|---|
topic | string | ✅ Yes | The topic to generate captions for (non-empty string) |
Success Response (200 OK):
{
"captions": [
"Style that doesn't cost the earth — sustainable fashion is the future. 🌿 #EcoFashion #SustainableStyle",
"Every thread tells a story. Choose sustainable fashion and make yours one worth telling. ♻️ #ConsciousCloset",
"Look good, feel good, do good. Sustainable fashion for a better tomorrow. 🌍 #SlowFashion #GreenStyle"
]
}
Error Response (400 Bad Request):
{
"error": "Field 'topic' is required and must be a non-empty string."
}
Error Response (500 Internal Server Error):
{
"error": "Failed to generate captions. Check your OPENAI_API_KEY."
}
Example cURL:
curl -X POST http://localhost:9031/ \
-H "Content-Type: application/json" \
-d '{"topic": "sustainable fashion"}'
| Variable | Default | Description |
|---|---|---|
VITE_API_BASE_URL | — | Backend API base URL (e.g., http://localhost:9031). If not set, uses local fallback bios. |
| Variable | Default | Description |
|---|---|---|
PORT | 9031 | Port the API server listens on |
OPENAI_API_KEY | — | Required. Your OpenAI API key for caption generation |
npm run dev # Start dev server at http://localhost:5173
npm run build # Build to dist/ (production)
npm run preview # Serve dist/ locally for testing
npm run typecheck # Run TypeScript type checking
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint issues
npm run build # Compile TypeScript to JavaScript
npm start # Start the production server
npm run dev # Start dev server with hot-reloading
VITE_API_BASE_URL is not configured, the frontend automatically generates sample bios locally using generateLocalBios().execCommand('copy') for older browsers../assets/...) for iframe compatibility with the TetreesAI platform.Tetrees License
The sandbox audition completed and the detected runnable path passed.
This React web app completed archive review with strong static results. Structure, dependency manifests, documentation, functional source, and common risk patterns were checked by the Tetrees verification pipeline; runtime phases are stated separately. Final verified scores after isolated runtime evidence: overall 9.2 and security 9.5.
Deterministic AVCP artifact review
Pipeline avcp-2026-08-04.1 · SHA-256 63600ede3732b98b…
This version-scoped review deterministically inspects the submitted archive for structure, dependencies, documentation, functional source, and common malicious or high-risk signals. Build and test phases are reported as passed only after an isolated sandbox audition. It is not a guarantee of perfect security.
Reviewed Aug 7, 2026
The full install guide and integration prompts unlock after purchase.
eCommerce, Marketplace & POS Systems
$3
