ContentGenerator

ContentGenerator is a lightweight, frontend-first content creation UI that uses n8n as the backend workflow engine. Use ContentGenerator to orchestrate content-generation pipelines (webhooks, third-party APIs, enrichers, formatters, publishing steps) without writing backend code — all the orchestration lives inside n8n workflows.

Why this project exists

• Build and iterate content pipelines quickly by composing n8n nodes instead of server code.
• Keep a minimal JavaScript/CSS/HTML frontend that calls webhook endpoints exposed by n8n.
• Deploy the UI anywhere (static hosting) while n8n handles authentication, API keys, retries, and integrations.

Core ideas

• Frontend: Static site (HTML/CSS/JS) — lightweight, fast, and easy to host.
• Backend: n8n workflows that receive webhook triggers, run content generation/enrichment/publishing steps, and return responses.
• Extensible: Add new n8n workflows to support new content types, publishers, or integrations.

Features

• Create content via a minimal form or external POST to a webhook.
• n8n-based pipeline orchestration with retries, transforms, and third-party API calls.
• Configurable outputs: markdown, HTML, SEO metadata, publishing to CMS, scheduling.
• Deployable locally via Docker or to cloud providers (n8n Cloud, self-hosted Kubernetes).

Quick demo (example)

1. Submit content request to n8n webhook: curl -X POST "https://n8n.example.com/webhook/content-generator"
   -H "Content-Type: application/json"
   -d '{ "title": "How to write a README", "type": "article", "tone": "concise", "length": "800" }'

2. n8n workflow receives the webhook, calls your content generation node(s), formats output, and returns a JSON response: { "status": "success", "content": "## How to write a README\n...\n" }

Architecture (overview)

• Frontend (this repo): Presents UI to collect prompts/metadata and calls n8n webhook endpoints.
• n8n: Contains workflows that:
  • Trigger on webhook.
  • Enrich input (metadata, SEO checks).
  • Call generator services (AI API, templates, CMS).
  • Transform and optionally publish the result (CMS API, Git, email).
  • Respond to the webhook caller with the final output or a job id for async workflows.

Why n8n?

• Visual workflow builder reduces backend development.
• Built-in nodes for HTTP requests, functions, databases, and many external services.
• Workflow reusability and observability (execution logs, retried runs).
• Self-hostable or available via n8n Cloud.

Getting started (developer)

Prerequisites

• Node.js (for local frontend build, if applicable)
• Git
• n8n — recommended: Docker or n8n Cloud account
• (Optional) Docker & docker-compose for local n8n + frontend hosting

1. Clone git clone https://github.com/oticdev/contentgenerator.git cd contentgenerator

2. Frontend (local)

• If this repo contains a Node-based dev script: npm install npm run dev
• Otherwise, open index.html (or public/) in a static server: npx serve . # or use any static file host

3. Run n8n locally (recommended with Docker)

• Quick start: docker run -it --rm
  --name n8n
  -p 5678:5678
  -e N8N_BASIC_AUTH_ACTIVE=true
  -e N8N_BASIC_AUTH_USER=admin
  -e N8N_BASIC_AUTH_PASSWORD=changeme
  n8nio/n8n

• Or with docker-compose (example): version: "3.7" services: n8n: image: n8nio/n8n restart: always ports: - "5678:5678" environment: - N8N_BASIC_AUTH_ACTIVE=true - N8N_BASIC_AUTH_USER=admin - N8N_BASIC_AUTH_PASSWORD=changeme volumes: - ./n8n:/home/node/.n8n

4. Import or create the workflow

• In n8n, create a new workflow:
  • Node 1: Webhook (path: content-generator)
    • Methods: POST
    • Response Mode: On Received (or On Completed for async)
  • Node 2: (Transform / Function) — validate and enrich input
  • Node 3: HTTP Request or custom node — call content generation API (or local function)
  • Node 4: (Optionally) CMS HTTP Request — publish or store result
  • Final: Respond to webhook with result

Environment variables / configuration

• N8N_WEBHOOK_BASE_URL — base URL where n8n is reachable (e.g., https://n8n.example.com)
• N8N_WORKFLOW_PATH — webhook path for the primary workflow (default: content-generator)
• CMS_API_KEY, OPENAI_API_KEY, etc. — sensitive keys are stored in n8n credentials, not in the frontend
• FRONTEND_API_URL — optional override for where to post requests (useful in dev)

Webhook examples

• Synchronous response (fast generators):

  • n8n webhook responds with generated content directly.

• Asynchronous flow (long-running jobs):

  • Return job id from n8n immediately.
  • Use a separate workflow or status endpoint to query job status/result.

Example frontend request (POST JSON) { "title": "My article", "keywords": ["readme","n8n"], "tone": "friendly", "length": "short" }

Best practices

• Keep API keys and credentials inside n8n credentials (do not store secrets in the repo or in client code).
• Use n8n’s built-in retry/backoff features for unreliable third-party services.
• For heavy or long-running generation, use async workflows and background workers (n8n workflow queues).
• Validate and sanitize all user input in the n8n workflow before calling external APIs.

Extending the project

• Add new workflows under an n8n-workflows/ folder and include their JSON exports (versioned).
• Add UI components for scheduling, CMS selection, or multi-step templates.
• Add integrations to CMSs (WordPress, Ghost, Contentful), social platforms, or Git-based publishing.

Contributing

• Fork the repo and open a PR.
• If you add an n8n workflow, export the workflow JSON and put it under n8n-workflows/ with a README describing the nodes and credentials required.
• Suggest improvements to content templates and sample workflows.

Troubleshooting

• Webhook 404: check the webhook path in your workflow matches the path used by the frontend.
• Auth errors: ensure n8n authentication (basic auth or other) is configured and the frontend calls with the right headers or proxy.
• Missing secrets: store API keys inside n8n credentials and reference them from workflow nodes.

Roadmap / Ideas

• Add library of ready-to-import n8n workflows for blog posts, product descriptions, and social posts.
• A built-in preview + editor with autosave to a draft CMS or Git branch.
• Multi-user admin UI that maps users to n8n credentials and permissions.

License MIT — see LICENSE file.

Acknowledgements

• Built on top of n8n (https://n8n.io) — thanks to the n8n community and contributors.

Contact

• Repo: https://github.com/oticdev/contentgenerator
• Maintainer: oticdev