JSON Render
Pattern
INT·Mar 26

JSON Render Three.js

AI-generated 3D scenes using @json-render/react-three-fiber. Describe environments, meshes, and lighting to stream live Three.js renders you can orbit immediately.

View Full Pattern on Desktop
JSON Render Three.js preview

Problems Solved

  • Turn natural language prompts into orbitable Three.js scenes
  • Stream JSON specs into React Three Fiber without reloads
  • Blend meshes, lights, cameras, and controls from curated catalogs

Use Cases

  • 3D concept explorers
  • Product hero stage builders
  • Immersive storytelling demos
  • Rapid prototyping for motion shoots

AI SDK APIs

streamTextgateway

Tags

json-renderthreejsreact-three-fiberaistreaming

Requirements

Node.js
24+
Memory
512MB
Other
  • Vercel AI Gateway or Anthropic API key

Environment Variables

External Services

anthropicupstash

Ready to use?

View the full interactive pattern with live preview and copy the source code.

View Pattern on Desktop

Related Patterns

JSON Render Data Table preview

JSON Render Data Table

AI-generated data tables using json-render. Describe columns, rows, sorting, and filters — stream specs into an interactive DataTable with toolbar satellites.

json-renderdata-table+3
View →
JSON Render Shadcn preview

JSON Render Shadcn

AI-generated UI using @json-render/shadcn. Describe a UI in natural language and watch it render with shadcn components.

json-rendershadcn+3
View →
JSON Render React preview

JSON Render React

AI-generated UI from natural language using @json-render. Describe a UI and watch it stream in progressively with shadcn components.

json-renderai+3
View →
JSON Render PDF preview

JSON Render PDF

Generate PDF documents from natural language using @json-render/react-pdf. Describe a document or refine examples to create professional PDFs with streaming spec and live preview.

json-renderpdf+3
View →
End of Pattern