# Threejs MCP Apps Preview

> Use when building an MCP Apps interactive UI that previews or controls a Three.js scene, shader, product model, or visual prototype. Apply sandboxing, CSP, fallback, performance, and source-provenance controls before exposing generated 3D content to users.

- Skill: `srednoff888-art/threejs-mcp-apps-preview` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add srednoff888-art/threejs-mcp-apps-preview`
- Raw SKILL.md: https://api.skillmd.com/api/skills/srednoff888-art/threejs-mcp-apps-preview/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: srednoff888-art (https://skillmd.com/u/srednoff888-art)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/srednoff888-art/threejs-mcp-apps-preview

---


# Three.js MCP Apps Preview

Build an interactive preview as a bounded tool UI, not as a general remote-code
execution environment. Start with a compact scene contract and accessible text
fallback.

## Workflow

1. Define the scene inputs, allowed assets, interaction model, rendering budget,
   target host, and a non-canvas fallback before implementation.
2. Use MCP Apps `ui://` resources with restrictive CSP and typed tool inputs.
   Keep scene code, assets, and URLs allowlisted rather than evaluating arbitrary
   model-generated JavaScript.
3. Pause animation when hidden, cap DPR/texture/model budgets, release GPU
   resources, and provide reduced-motion behavior.
4. Validate screenshots, nonblank canvas, keyboard controls, mobile fallback,
   CSP behavior, and tool-result provenance before release.

## Guardrails

- Treat the official Three.js MCP Apps example as a reference implementation,
  not a production-ready code copy.
- Do not fetch arbitrary model URLs or execute user/model supplied scene code.
- Keep MCP App UI actions separate from account, asset-publishing, or deployment
  permissions.