Scaffolding Art Blocks Projects#

Always Fetch the Generator Spec First#

Before any art script work, fetch this MCP resource:

text

artblocks://generator-spec

It contains the authoritative reference for: tokenData structure, hash-based PRNG patterns, FLEX dependency types (IPFS, Arweave, ONCHAIN, Dependency Registry), supported script types and library versions, HTML structure requirements, and window.$features. It also includes the step-by-step conversion guide for porting existing scripts.

Scaffolding a New Project#

Use scaffold_artblocks_project to generate a ready-to-run index.html + starter art script.

Parameters#

ParamOptions / NotesscriptType``"js" (vanilla), "p5js", "threejs" — requireddependencyVersionp5.js: "1.0.0" or "1.9.0" (default). Three.js: "0.124.0", "0.160.0", "0.167.0" (default). Ignored for "js".includePostParams``true — adds ONCHAIN/PostParams (PMP) stubs in tokenData and example usageincludeFlexDependencies``true — adds IPFS and Arweave dependency stubs with usage patternsincludeFeatures``true — adds window.$features trait assignment stub

Note on Three.js v0.167.0: uses ES module import maps instead of a global <script> tag. This affects script type detection on-chain — see the generator spec for details.

Other supported script types#

scaffold_artblocks_project covers vanilla JS, p5.js, and Three.js. Art Blocks supports many more via the on-chain dependency registry: regl, Tone.js, Babylon.js, A-Frame, Paper.js, Zdog, Processing, and custom types. See artblocks://generator-spec for the full list and how to reference them.

Converting an Existing Script#

When a user has an existing piece to convert to Art Blocks format:

1. Fetch artblocks://generator-spec — it contains a detailed step-by-step conversion guide
2. Use scaffold_artblocks_project with the matching scriptType to get the correct HTML shell
3. Walk through conversion:

Conversion checklist:

• Replace Math.random() with hash-based PRNG derived from tokenData.hash
• Replace hardcoded canvas dimensions with window.innerWidth / window.innerHeight
• Ensure the initial render is deterministic from the hash alone — same hash must always produce the same initial visual output
• Interactive elements (mouse, keyboard, touch) are allowed and encouraged, but must not change the initial render. Interaction should only modify the view after the artwork has loaded deterministically.
• Remove any time-based variation ( Date.now(), setTimeout) that affects the initial render (time-based animation after load is fine)
• Extract visual traits into window.$features (optional but recommended for reveals) — features must be set synchronously before or during initial render
• Verify determinism: reload the page with the same tokenData.hash and confirm identical initial output

When to Enable Each Flag#

FlagEnable when...includeFeaturesScript has distinct visual categories worth exposing as traitsincludePostParamsScript will have configurable on-chain parameters after minting (PMP)includeFlexDependenciesScript loads external assets from IPFS or Arweave