explaingit

binghe1980/ai-canvas

Analysis updated 2026-05-18

182TypeScriptAudience · designerComplexity · 2/5LicenseSetup · moderate

TLDR

AI Canvas is a Codex plugin that adds an infinite canvas for AI image generation, annotation-based editing, and preset business workflows like social media covers and product image sets.

Mindmap

mindmap
  root((AI Canvas))
    Core features
      AI image generation
      Annotation editing
      Multi-version compare
    Built-in Skills
      Social media covers
      YouTube thumbnails
      Product image sets
      Logo and branding
      Cross-platform resize
    Tech
      TypeScript
      Node.js
      tldraw canvas
      MCP tools
    Setup
      Codex plugin install
      Runs locally
      MIT license
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Generate and iteratively refine marketing images inside Codex by drawing annotations directly on the canvas.

USE CASE 2

Create Xiaohongshu covers, YouTube thumbnails, or Amazon product image sets using built-in workflow skills.

USE CASE 3

Resize one image to all required dimensions for multiple social media platforms in a single step.

USE CASE 4

Use the canvas as a visual annotation board inside Codex to iterate on design concepts without leaving your AI tool.

What is it built with?

TypeScriptNode.jspnpmtldrawMCP

How does it compare?

binghe1980/ai-canvassuyancc/openai-plus-vxtgermondai/trawl
Stars182217218
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatemoderatemoderate
Complexity2/53/53/5
Audiencedesignergeneralops devops

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires Codex (the AI coding assistant) and Node.js 20+, installed with two commands then restart Codex.

Use freely for any purpose, including commercial, as long as you keep the copyright notice (MIT).

In plain English

AI Canvas is a plugin for Codex, an AI coding assistant, that adds an infinite drawing board where you can generate images with AI, draw annotations on them to request changes, and use preset business workflows to produce marketing materials. The whole thing runs locally on your machine. The basic loop works like this: you tell Codex to open the canvas, it generates an image from your description, and then you mark up that image directly on the canvas by drawing arrows, circles, or writing notes, then click a button to send those annotations back to Codex for revision. Each new version appears next to the old one so you can compare them side by side. There are six built-in Skills, which are structured workflows for specific business tasks. These include creating Xiaohongshu (a Chinese social media platform) cover images, YouTube thumbnails, product marketing image sets for Amazon and Shopify, logo and brand identity concepts, marketing brochures, and a cross-platform resize tool that takes one image and reformats it for multiple social media dimensions at once. Setup involves two commands to install the plugin from GitHub into Codex, then restarting Codex. The canvas service runs on your own computer at a local address, so no data is sent to any hosted backend by default. Generated images and canvas state are saved in a hidden folder in your project directory. The README is primarily in Chinese with an English version linked. The license is MIT, meaning you can use and modify it freely for any purpose.

Copy-paste prompts

Prompt 1
Install AI Canvas in Codex and walk me through generating a YouTube thumbnail from a product photo using the built-in skill.
Prompt 2
How do I use annotation mode in AI Canvas to mark up an image and send specific change requests back to Codex?
Prompt 3
Show me how to use the cross-platform resize skill in AI Canvas to export one image in Instagram, LinkedIn, and Twitter formats.
Prompt 4
How do I create a custom Skill in AI Canvas for a specific business workflow without modifying the core plugin code?
Prompt 5
How is canvas data stored in AI Canvas and what files does it write to the .ai-canvas folder in my project?

Frequently asked questions

What is ai-canvas?

AI Canvas is a Codex plugin that adds an infinite canvas for AI image generation, annotation-based editing, and preset business workflows like social media covers and product image sets.

What language is ai-canvas written in?

Mainly TypeScript. The stack also includes TypeScript, Node.js, pnpm.

What license does ai-canvas use?

Use freely for any purpose, including commercial, as long as you keep the copyright notice (MIT).

How hard is ai-canvas to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is ai-canvas for?

Mainly designer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub binghe1980 on gitmyhub

Verify against the repo before relying on details.