Toolcraft is an open-source starter kit and UI library for building custom design apps with AI, working with agents like Codex, Claude, and Cursor.

Stars

220

7-day growth

No data

Forks

11

Open issues

1

License

MIT

Last updated

2026-07-14

AI repository intelligence
FR-AI / ANALYSIS

Why it is worth attention

It provides a complete pre-built foundation (React/TypeScript, canvas, controls, layers, export) that AI agents can extend on demand, enabling rapid creation of tailored creative tools without starting from scratch.

Who it is for

  • Developers building custom creative or design tools
  • AI agent users prototyping interactive experiments
  • Designers wanting to automate asset generation workflows

Use cases

  • Creating procedural graphics and gradient generators
  • Building image stylization effects (ASCII, pixel, halftone, glitch)
  • Developing animation and video-effect tools
  • Generating branded blog covers or social media assets

Strengths

  • Comes with ready‑to‑use canvas, controls, layers, timeline, and export workflows
  • Works with multiple AI coding agents (Codex, Claude, Cursor)
  • Source code is fully editable in each generated project
  • Includes unit, browser, acceptance, and performance tests

Considerations

  • Designed specifically for visual‑canvas applications – not a general‑purpose UI kit
  • Requires an AI agent to generate the initial tool logic
  • Learning curve for developers unfamiliar with React and TypeScript

README quick start

Toolcraft

Toolcraft is an open-source starter kit and UI library for building custom design apps with AI. Use it to create small creative products, internal utilities, interactive experiments, and tools tailored to your workflow.

It works with any AI agent (Codex, Claude, Cursor).

Built by Pixel Point.

Create a project

Run the CLI:

npx @pixel-point/toolcraft create

Choose a project name and your AI agent. Then open the generated folder in that agent and describe the tool you want to build:

Build an app that applies an ASCII effect to an uploaded image.

Once the app is ready, start it locally:

npm run dev

What Toolcraft includes

  • A React and TypeScript starter app
  • A canvas with upload, pan, zoom, radar, and history support
  • Built-in controls for common creative-tool settings
  • Optional layers, animation timelines, and keyframes
  • Image and video export workflows
  • Local instructions for AI coding agents
  • Unit, browser, acceptance, and performance checks
  • Editable runtime and UI source inside each generated project

The checked-in app is intentionally neutral. It starts with the Toolcraft canvas, upload flow, controls panel, and toolbar. Product-specific controls, renderers, layers, timelines, and exports are added only when the tool needs them.

What to build

Toolcraft works best for apps that combine a visual canvas with a focused set of controls, such as:

  • Procedural graphics and gradient generators
  • Image stylization, ASCII, pixel, halftone, and glitch effects
  • Shader and Three.js experiments
  • Animation and video-effect tools
  • Blog cover and branded asset generators

Repository structure

  • src/app — product schema, acceptance coverage, and performance configuration
  • src/routes — application routes and Toolcraft composition
  • src/toolcraft/runtime — state, commands, canvas, panels, timeline, and export runtime
  • src/toolcraft/ui — Toolcraft controls and interface components
  • docs/toolcraft — local rules and reference docs for AI agents
  • e2e — browser acceptance and performance tests

This repository contains the standalone starter produced by the Toolcraft CLI. The runtime and UI source are included directly instead of being hidden behind a package, so generated projects can be inspected and changed when needed.

Commands

npm in

Description

A starter kit and UI library for building custom design apps with AI.

Related repositories

Similar projects matched by category, topics, and programming language.

TanStack
Featured
TanStack GitHub avatar

router

TanStack Router is a type-safe, data-driven React router with built-in caching, prefetching, and nested layouts, while TanStack Start extends it into a full-stack SSR framework.

Web DevelopmentFrontend Frameworks
14,861
vercel-labs
Featured
vercel-labs GitHub avatar

scriptc

scriptc compiles ordinary TypeScript into small, fast native executables without needing Node.js, V8, or any JavaScript runtime in the binary.

Developer ToolsCode Quality & Build
1,985
Jakubantalik
Featured
Jakubantalik GitHub avatar

thinking-orbs

A React component library that renders six hand-tuned animated thought orb loading indicators on a plain 2D canvas, with two purpose-tuned sizes and automatic theme detection for AI and agent UIs.

AI & Machine LearningAI Agents
1,191