Skip to content

Codex Sites Convex Backend Skill

Build and ship a Codex Site with Convex as its realtime database and backend, using one reusable Codex skill.

Install: npx convex dev --once

Works with Codex · 12 GitHub stars

Install

$npx convex dev --once

Install command taken from the project's README or registry entry. Always review code before running it.

ChatGPT Sites + Convex

Build and ship a ChatGPT Site with Convex as its realtime database and backend using one reusable Codex skill.

Quick start: Install the skill, restart Codex, then prompt: $codex-sites-convex Build and publish a durable shared realtime project tracker for my team. Publishing or sharing uses Convex production by default and returns a live Sites URL.

Optional live example: Open Daymark Todo. It demonstrates a public, shared realtime list powered by ChatGPT Sites and Convex, with a Convex cron job that clears Todos every five minutes. Learn how cron jobs work. This demo is not required for installation or use and should not be treated as the default app architecture.

Why this skill?

ChatGPT Sites and Convex have complementary responsibilities:

  • ChatGPT Sites creates, builds, publishes, and shares the frontend.
  • Convex provides the database, queries, mutations, actions, authentication, schedules, search, files, and realtime subscriptions.
  • This skill makes Codex preserve that boundary, check current official documentation, select appropriate Convex components, validate both halves, and publish in the correct order.

Without a dedicated workflow, an agent can scaffold a second frontend, introduce another database, guess at Convex APIs, skip authorization, expose credentials, or validate only the local UI. This skill adds the missing cross-product runbook.

What’s included

  • A complete build-and-publish workflow in SKILL.md
  • New-project and existing-project paths
  • ChatGPT Sites architecture safeguards
  • Current Convex documentation routing
  • Official Convex agent setup checks for plugin, MCP, and managed AI files
  • Official Convex component discovery before implementation
  • Component-specific skill loading when a component is selected
  • Optional convex-helpers discovery for matched code-level utilities
  • Official Convex ESLint rules for backend quality checks
  • Convex schema, validator, index, authorization, and pagination rules
  • A deployed HTTPS and WebSocket connectivity gate
  • Accountless local Agent Mode and isolated cloud-agent guidance
  • Expiring Cloud Agent Mode deployments for temporary shared previews
  • A backend-readiness gate before Sites or the browser starts
  • A Node.js 22.13+ runtime gate, Node 24 project pins, and project-owned dev, build, and start checks
  • Expected-port enforcement, exact localhost HTTP verification, and process-lifetime guidance
  • Production deployment ordering and Chrome QA
  • A removable “Built with ChatGPT Sites + Convex” footer with light and dark theme support and a Phosphor GitHub icon
  • Deterministic preflight and project verification scripts

Architecture

flowchart LR
    U["User's browser"] --> S["ChatGPT Sites frontend"]
    S -->|"Queries, mutations, subscriptions"| C["Convex deployment"]
    C --> D["Convex database"]
    C --> F["Functions, files, schedules, search"]
    X["Codex"] -->|"Build and publish frontend"| S
    X -->|"Develop and inspect backend"| C

The Convex MCP server helps Codex during development. Visitors use the public Convex React client and generated API types.

Similar plugs

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…

Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.

The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create prototypes, websites, apps, dashboards, presentations, images, and videos with your team…

Explore related