Intro Presets Scene Create Export Pricing Showcase Guides MCP Docs Changelog
Model Context Protocol

Let your AI create
visual effects.

Connect Claude Code, Cursor, or any MCP client to Refract. Create shader backgrounds and custom 3D scenes with natural language. Get a live embed URL back.

Claude Code Cursor Windsurf Any MCP client

Quick start

From zero to a live 3D scene in under five minutes.

1

Get your API key

Open Refract, click your avatar, then API Keys → Create Key. Copy the rfk_ key—it’s shown once.

2

Add to your MCP config

Drop this into your client’s MCP configuration file.

Claude Code — ~/.claude/claude_code_config.json 
{
  "mcpServers": {
    "refract": {
      "type": "url",
      "url": "https://www.refract.build/mcp",
      "headers": {
        "Authorization": "Bearer rfk_your_key_here"
      }
    }
  }
}
Cursor — .cursor/mcp.json 
{
  "mcpServers": {
    "refract": {
      "type": "url",
      "url": "https://www.refract.build/mcp",
      "headers": {
        "Authorization": "Bearer rfk_your_key_here"
      }
    }
  }
}
3

Create your first scene

Tell your AI client what to build. The MCP tool runs, and you get a live embed URL back.

prompt 
Create a 3D scene of a glass sphere floating over
a dark plane with soft lighting.
Free to use. MCP access is available on all plans. Free accounts can save up to 5 effects. Pro accounts get unlimited. Your API key is tied to your Refract account.

19 tools

Create effects from presets or raw GLSL, build custom 3D scenes, compose multi-layer scenes, add text overlays, and get embed code for any platform.

Core

list_presets
Browse available 2D shader presets. Returns id, name, description, and category for each preset.
category optional
list_library
List your saved effects. Returns id, projectId, name, effectType, embedUrl, and createdAt.
No parameters
create_3d_scene
Create a custom Three.js scene and deploy it as a live embeddable URL. Accepts arbitrary Three.js code following the setup/animate contract.
name required code required width optional height optional background optional cameraFov optional cameraPosition optional
update_3d_scene
Update an existing scene. The embed URL stays the same but the content rebuilds immediately.
projectId required code optional name optional background optional cameraFov optional cameraPosition optional
get_embed_code
Get a platform-specific embed code snippet. Supports HTML, React, Next.js, Webflow, WordPress, Framer, and Squarespace.
projectId required platform optional
create_shader
Create a 2D shader effect from a preset. Use list_presets to find available preset IDs.
presetId required name optional width optional height optional
create_custom_shader
Create a 2D shader from raw GLSL fragment code. Built-in uniforms (u_time, u_resolution, u_mouse) are injected automatically.
name required code required width optional height optional uniforms optional
delete_effect
Delete an effect from your library by its shader ID.
shaderId required

Scene Composition

get_effect_config
Get the complete configuration of an effect including all layers, blend modes, post-processing, interactions, text overlays, and dimensions.
projectId required
duplicate_effect
Create a complete copy of an existing effect. The original is untouched. Use before making destructive changes or when generating variations.
projectId required name optional
update_scene_layer
Modify properties of a specific layer in a scene. Only specified properties change. Call rebuild_scene when done.
projectId required layerIndex required changes required
add_scene_layer
Add a new layer to a scene at a specified position. Supports shader, svg3d, image, and effect layer types. Call rebuild_scene when done.
projectId required layer required position optional
remove_scene_layer
Remove a layer from a scene by its index. Automatically adjusts interaction references for layers above the removed one.
projectId required layerIndex required
update_scene_post_processing
Update post-processing effects, canvas background, and atmosphere settings for a scene. Call rebuild_scene when done.
projectId required postProcessing optional canvasBg optional atmosphere optional
clear_scene
Remove all layers, text overlays, interactions, and reset post-processing for a scene. Use when starting fresh or taking a scene in a completely new direction. Add new layers and call rebuild_scene when done.
projectId required
rebuild_scene
Rebuild the embed HTML after making changes. The embed URL stays the same but the content updates. Always call after finishing a batch of modifications.
projectId required

Text Overlays

add_text_overlay
Add a text element to a scene with customizable font, size, weight, color, position, blend mode, letter spacing, and opacity.
projectId required overlay required
update_text_overlay
Update properties of an existing text overlay. Only specified properties change. Call rebuild_scene when done.
projectId required overlayIndex required changes required
remove_text_overlay
Remove a text overlay from a scene by its index. Call rebuild_scene when done.
projectId required overlayIndex required

The Three.js contract

Everything you need to know about writing custom 3D scenes. This is the runtime your code runs in.

The setup / animate pattern

Your code exports a default setup function that receives a context object and returns an animate function called every frame.

Three.js scene contract 
export default function setup(ctx) {
  const { scene, camera, renderer, clock, mouse, THREE } = ctx;

  const geometry = new THREE.IcosahedronGeometry(1, 3);
  const material = new THREE.MeshPhysicalMaterial({
    transmission: 0.95,
    roughness: 0.05,
    color: '#88ccff'
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  return function animate(time, delta) {
    mesh.rotation.y = time * 0.3;
    mesh.position.y = Math.sin(time) * 0.2;
  };
}

What’s on ctx

The context object passed to your setup function.

Property Type Notes
scene THREE.Scene Pre-configured with RoomEnvironment IBL for PBR reflections
camera THREE.PerspectiveCamera Default position [0, 0, 5], configurable FOV
renderer THREE.WebGLRenderer ACES filmic tone mapping
clock THREE.Clock Standard Three.js clock
mouse { x, y } Normalized 0–1, bottom-left origin
THREE namespace Full Three.js r170 (0.170.0)

Available classes

Geometries
SphereGeometry BoxGeometry TorusGeometry TorusKnotGeometry IcosahedronGeometry PlaneGeometry CylinderGeometry ConeGeometry RingGeometry TubeGeometry BufferGeometry InstancedBufferGeometry
Materials
MeshPhysicalMaterial MeshStandardMaterial MeshBasicMaterial MeshNormalMaterial ShaderMaterial RawShaderMaterial PointsMaterial LineBasicMaterial SpriteMaterial
Post-processing
EffectComposer RenderPass ShaderPass UnrealBloomPass OutputPass GlitchPass FilmPass AfterimagePass
Shaders
FXAAShader LuminosityHighPassShader CopyShader
Controls & curves
OrbitControls CatmullRomCurve3 QuadraticBezierCurve3 CubicBezierCurve3
Lights
DirectionalLight AmbientLight PointLight SpotLight HemisphereLight RectAreaLight
Math & animation
Vector2 Vector3 Vector4 Color Matrix4 Quaternion Euler MathUtils AnimationMixer AnimationClip
Blocked APIs. No fetch, XMLHttpRequest, or WebSocket. No eval or Function constructor. No localStorage or sessionStorage. No DOM manipulation except document.createElement for procedural canvas textures. Code max size: 100KB.
Default scene. Ambient light (0.4) + directional light (0.8) at [5, 10, 7]. RoomEnvironment IBL for realistic PBR reflections. Transparent background. ACES filmic tone mapping.

Camera position and FOV can be set via create_3d_scene params (cameraPosition, cameraFov) or inside your code with camera.position.set() and camera.lookAt(). Code-level settings override the params.

Example prompts

Copy these into Claude Code or Cursor. Each produces a deployable 3D scene.

Glass morphism sphere

A translucent glass sphere with PBR reflections, gently spinning and bobbing.

Create a 3D scene with a glass morphism sphere floating
in the center. Use MeshPhysicalMaterial with high
transmission and low roughness. Add a subtle rotation
and floating animation.

Neon grid landscape

Animated retro grid with bloom post-processing and a glowing horizon.

Create a synthwave landscape: an infinite neon grid
plane receding into the distance with a glowing sun on
the horizon. Use LineSegments for the grid, animate it
scrolling toward the camera. Purple and cyan color scheme.

Particle galaxy

A dense spiral galaxy of colored particles with smooth rotation.

Create a particle galaxy with 50,000 points arranged in
a spiral arm pattern. Color gradient from blue at center
to pink at edges. Slow rotation animation.
Use PointsMaterial with size attenuation.

Metallic torus knot

A chrome torus knot with environment reflections and slow rotation.

Create a metallic torus knot with MeshPhysicalMaterial.
Set metalness to 1.0 and roughness to 0.1 for a chrome
look. Add slow Y-axis rotation and a subtle float
animation on the Y position.

Embed anywhere

Use the get_embed_code tool to get a ready-to-paste snippet for your platform.

HTML React Next.js Webflow WordPress Framer Squarespace
HTML embed 
<style>
  [data-refract-wrap] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
</style>

<div data-refract-wrap>
  <iframe
    data-refract
    src="https://refract.build/embed/your-id"
    style="position:absolute;inset:0;width:100%;height:100%;border:none;"
    loading="lazy"
    allow="autoplay"
  ></iframe>
</div>

Prompt it. Ship it.
Nothing in your codebase.

Create your first scene