paprika3d (the three.js toolset for coding agents)

paprika3d

paprika3d turns your coding agent into a game studio.

Three.js MCP server and Claude Code plugin: build three.js games and 3D pages end to end, from references and a design doc to playtesting, models and a published link.

It takes a three.js game from references on the web to a look and character sheets, a design doc with the creative calls left to you, the build, then loops that keep improving it, all in one lean package of tools. Along the way your agent plays the game, measures every frame and finds or builds the models. That is how the game gets good: it finds the invisible model, the file that never loaded and the flickering faces, and fixes them before it tells you it is done.

In Claude Code the whole flow is two commands, /paprika3d:paprika-make and /paprika3d:paprika-loop for . Codex, Gemini CLI, Cursor and other MCP clients get the same tools, and the skills with npx skills add paprika3d/paprika3d.

The main result: with paprika3d, Sonnet 5.5 made 86% of its 3D objects pass every check, against 66% without it: +20 points (95% interval +11 to +29), over 150 runs in each arm. The checks are no flickering, see-through or inside-out faces, code that runs, and a budget. The checks come from 3JSBench by General Context Labs. All results, each with its run count.

Install

Needs Google Chrome and Node 20.11 or later; the Claude Code plugin needs Claude Code 2.1.118 or later.

| Claude Code | claude plugin marketplace add paprika3d/paprika3d claude plugin install paprika3d@paprika3d | | Codex CLI | codex mcp add paprika -- npx -y paprika3d serve | | Gemini CLI | gemini mcp add paprika npx -y paprika3d serve | | Cursor, VS Code, Windsurf | npx -y paprika3d serve as an MCP server in the client's settings (JSON below) | | Skill only (any agent) | npx skills add paprika3d/paprika3d (one skill: --skill threejs-screenshot) |

Then, in Claude Code, type /paprika3d:paprika-make to make a game or 3D page from one request. In any agent, ask it to use paprika3d to playtest a page you already have.

Other MCP clients

Cursor (.cursor/mcp.json), Windsurf and any other MCP client take this entry; VS Code's .vscode/mcp.json takes the same entry under servers instead of mcpServers:

{

"mcpServers": { "paprika": { "command": "npx", "args": ["-y", "paprika3d", "serve"] } } }

How it works

/paprika3d:paprika-make works in this order, with a few rounds of questions for the calls that are yours. The first three stages each write a file you can read and change; how it works has each stage's files, questions and keys.

A one-line request takes about four rounds of questions and spends nothing on your keys unasked. sheet names which image and 3D model keys are set, never their values; set one with /plugin configure paprika3d or the provider's usual variable, such as FAL_KEY. The loop starts only when you type it; each round is two Claude Code sessions, billed as such, and it needs claude and git on PATH. To publish, join the waitlist at https://paprika3d.com/waitlist and set PAPRIKA3D_PUBLISH_INVITE to your code; what a publish uploads and records.

The full flow runs in Claude Code. In other agents the tools below work the same, and npx skills add paprika3d/paprika3d adds the skills.

How the game gets good

From the first draft on, every stage runs on these tools. Your agent opens its page in headless Chrome on a clock it controls, reads which objects are on screen and which never appear, plays inputs on exact frames and times each frame. They work on any three.js, React Three Fiber or WebGL page, WebGPURenderer included: games, product viewers and configurators, scroll sites, simulations, shader and post-processing demos. Your page needs no changes.

open also puts two helper files in the project, geo.js (procedural geometry) and fx.js (sound, textures, particles, a lighting setup), and the skill can add game-state, which keeps game state in typed arrays and runs Rapier physics in a worker. send_feedback sends the team a report when a reply was wrong. Every tool, with when to reach for it, the skills, the hooks and the files: what the plugin adds.

What your agent sees

Every reply is short text with the numbers that fix the problem. Part of one look reply, on a test page with a start line laid flat on a road:

Surfaces: "road" and "startDecal" share a face plane (y = 0.00) over 2.6 × 16 units: they flicker as the camera moves (z-fighting). Move one at least 0.00054 units off the plane (what the depth buffer can tell apart at 21 units from this camera), give the top one material.polygonOffset = true with polygonOffsetFactor -1, or remove the hidden face.

On screen (4): road 44% [0, 307, 1279, 799] 500 × 18 units, along the view grass 17% [0, 307, 1279, 587] 600 × 400 units startDecal 0.46% [366, 427, 915, 440] 16 × 2.6 units, across the view board4 0.075% [553, 286, 587, 307] 8 × 5 units Never visible: none

Results

3JSBench by General Context Labs checks the 3D objects a model builds from one-line requests. In our run of its checks, more objects pass with paprika3d:

Imported models show up, at the right size. Sonnet 5.5 building three.js pages that each load a glTF model. The paprika3d runs had a one-time reminder to open the page after the first edit; the plugin's after-edit hook now says once that a page the agent wrote has not been