Cowart: Plugin Canvas Vô Hạn cho Codex, Powered by tldraw

TL;DR

Cowart (viết tắt của Code with Art) là plugin vô hạn canvas dành cho Codex, xây dựng trên tldraw. Thay vì sinh ảnh trong chat thread rồi tự quản lý file, Cowart mang canvas trực quan vào thẳng trong Codex - bạn đặt placeholder, gõ prompt, và ảnh xuất hiện đúng vị trí bạn muốn. Dữ liệu lưu trong thư mục project của bạn, không phải cloud, không phải plugin repo.

• Canvas engine: tldraw v5.1.1 + React 19
• Image model: GPT Image 2 (orchestrated qua Codex)
• Local service: http://127.0.0.1:43217/
• License: Miễn phí, open-source

Vấn đề cần giải quyết

Làm việc với ảnh trong Codex theo mặc định là một quy trình tuyến tính: bạn mô tả ảnh trong chat, nhận ảnh, thấy không đúng ý, mô tả lại, nhận ảnh mới. Không có không gian để nhìn tổng thể nhiều ảnh cùng lúc, không có cách để chỉ vào một vùng cụ thể và nói "sửa phần này".

Với project cần nhiều ảnh liên quan - mockup UI, storyboard, bộ ảnh minh họa - workflow chat-based này nhanh chóng trở nên lộn xộn. Ảnh tản mạn khắp lịch sử chat, không có cách tổ chức hay so sánh trực quan giữa các phiên bản.

Cowart giải quyết đúng vấn đề này bằng cách mang canvas vô hạn vào bên trong Codex. Tác giả ZHONG XIN mô tả đây là "cách chú thích ảnh trực quan hơn, để lại dấu vết hơn" - và lợi thế của việc làm trực tiếp trong Codex là có thể tận dụng tối đa GPT Image 2.

Cowart hoạt động ra sao

Kiến trúc gồm ba lớp phối hợp với nhau:

• Local web service: Canvas UI (React + tldraw) chạy tại http://127.0.0.1:43217/ trên máy của bạn
• Codex skills: Ba skill dạy Codex cách tương tác với canvas - cowart:cowart-open-canvas, cowart:cowart-image-gen, cowart:cowart-image-edit
• MCP tools: Cầu nối kỹ thuật cho Codex đọc selection state từ canvas, gọi image generation với đúng thông số, rồi ghi kết quả vào đúng vị trí trên canvas

Trong kiến trúc này, Codex đóng vai orchestrator: hiểu yêu cầu của bạn, gọi đúng tool, tạo prompt cho image model, và điều phối kết quả về canvas. MCP tools là cầu nối kỹ thuật; tldraw là frontend trực quan; bạn và Codex là hai đầu của vòng lặp.

Dữ liệu canvas lưu theo cấu trúc:

canvas/
  pages/
    <page-id>/
      cowart-canvas.json
      assets/

Mọi thứ nằm trong thư mục project hiện tại - commit được, share được, không phụ thuộc cloud.

Cài đặt

Cách nhanh nhất là nhờ chính Codex cài. Gửi đoạn này vào Codex:

Please install the Cowart Codex plugin from https://github.com/zhongerxin/cowart.git. Clone the repository into ~/plugins/cowart, verify that .codex-plugin/plugin.json exists, add the plugin to the personal marketplace, run codex plugin marketplace add ~, then run codex plugin add cowart@personal. After installing, validate the plugin and tell me whether I should start a new conversation to load the new skills and MCP tools.

Codex sẽ tự xử lý toàn bộ - clone repo, build, đăng ký vào personal marketplace. Sau khi cài xong, mở một conversation mới để skills và MCP tools load đầy đủ.

Hoặc cài thủ công:

mkdir -p ~/plugins
git clone https://github.com/zhongerxin/cowart.git ~/plugins/cowart
cd ~/plugins/cowart
npm install && npm run build
codex plugin marketplace add ~
codex plugin add cowart@personal

Ba tính năng chính

1. Mở canvas cho project

Chỉ cần nói với Codex:

Open the Cowart canvas for this project.

Cowart khởi động local service, mở canvas tldraw trong browser, và liên kết dữ liệu với thư mục project hiện tại. Mỗi project có canvas riêng - bạn có thể làm việc song song trên nhiều project mà không bị trộn lẫn dữ liệu.

2. Sinh ảnh vào AI image holder

Trên canvas, bạn tạo một AI image holder - placeholder với tỷ lệ bạn muốn. Chọn holder đó, rồi mô tả ảnh với Codex:

Generate a new image into the selected Cowart AI image holder.

Codex đọc thông tin holder đang được chọn (kích thước, tỷ lệ, vị trí), gọi GPT Image 2 với đúng thông số, rồi insert ảnh vào đúng holder đó. Bạn có thể đặt nhiều holder trên canvas và điều phối từng ảnh độc lập - một luồng làm việc không thể thực hiện trong chat thread thuần túy.

3. Chỉnh ảnh theo chú thích

Tính năng nổi bật nhất của Cowart. Workflow gồm ba bước:

1. Mở ảnh cần chỉnh lên Cowart canvas
2. Dùng công cụ vẽ của tldraw để chú thích - mũi tên, text, highlight - chỉ đúng vùng muốn thay đổi
3. Chụp màn hình phần đó, gửi cho Codex kèm prompt:

Use my Cowart annotation screenshot to generate a clean revised image beside the original.

Codex đọc ảnh chú thích, hiểu các mũi tên và ghi chú, sinh ảnh mới dựa trên đó, rồi đặt ảnh mới cạnh ảnh gốc trên canvas. Ảnh gốc và chú thích không bị xóa hay di chuyển - bạn luôn có thể nhìn lại quá trình chỉnh sửa.

Ai nên dùng Cowart

Cowart phù hợp nhất nếu bạn:

• Đang dùng Codex thường xuyên và cần sinh ảnh như một phần của workflow, không muốn nhảy sang tool khác
• Làm UI/UX trong môi trường coding - cần iterate nhiều variant mockup, icon, hay ảnh minh họa cho cùng một project
• Muốn chỉnh ảnh bằng cách chỉ tay thay vì mô tả bằng lời - đặc biệt khi yêu cầu thay đổi ở vùng cụ thể
• Cần lịch sử ảnh đi cùng code - canvas data lưu trong thư mục project, commit được vào git

Plugin ít phù hợp hơn nếu bạn không dùng Codex: toàn bộ khả năng AI phụ thuộc vào Codex làm orchestrator, không có cách dùng Cowart canvas đơn lẻ với model khác.

Hạn chế cần biết

Ở v0.1.2, một số điểm cần lưu ý:

• Phụ thuộc vào Codex: Không chạy standalone - cần Codex để gọi image generation và xử lý MCP tools
• Solo project: Hiện có một contributor duy nhất - tốc độ cập nhật và hỗ trợ phụ thuộc vào một người
• Port 43217: Port mặc định có thể xung đột nếu bận - dùng biến môi trường COWART_PORT để đổi
• Early release: v0.1.2 nghĩa là API và behavior còn có thể thay đổi trong các bản sau

Kết

Cowart lấp một khoảng trống thực sự trong workflow AI coding: không gian trực quan để làm việc với ảnh, ngay trong môi trường Codex. Thay vì sinh ảnh trong chat rồi tự quản lý file, bạn có canvas gắn với project - ảnh ở đúng vị trí, lịch sử chú thích được giữ lại, tất cả commit được cùng code.

Plugin miễn phí, open-source, cài được trong vài phút nếu đang dùng Codex. via GitHub - zhongerxin/cowart.