Model Context ProtocolIn beta
Three.js
Resources MCP
Give your AI agent a Three.js specialist. A free, read-only MCP server: version-verified guides, an exact GLSL → TSL converter, a curated tools directory, real shipped projects and ready-made templates — live, from this site. No API key, no install.
- 01Code stamped with the three.js release it was verified against
- 02Works with Claude Code, Claude, ChatGPT, Cursor and more
- 03Read-only: it can look things up, it cannot change anything
What it does
Your agent stops guessing and starts looking things up
Ask an AI assistant a Three.js question today and it answers from memory. That memory contains code from a dozen different releases with nothing to separate them, which is why you get answers that look right, read fluently and then throw at runtime.
Connecting this server changes the shape of that. When your agent hits a Three.js question, it calls a tool instead of recalling an answer — and gets back structured content from this site: a guide written by hand, a snippet checked against a specific release, a library that actually exists, a project that actually shipped.
It is the difference between an assistant that has read about Three.js and one that can look it up while it works.
You ask
A normal question in your normal client. Nothing special to type, no prefix, no mode to switch into.
It calls a tool
Your agent picks the right tool and sends only what that tool needs — a search term, a guide path, a shader.
We answer
Structured content comes back: the guide, the snippet with its version stamp, the library, the link.
You get a real answer
Grounded in something that exists, with URLs your agent can cite so you can check the source.
What you get
Four things your agent can reach into
Everything here is the free, public side of Three.js Resources — the same content the site serves, shaped so a machine can search it properly instead of scraping a page.
Read-only, always current, no key required.
[02 / Contents]Guides
Hand-written guides on Three.js, WebGPU, TSL and React Three Fiber. Every code snippet states the exact three.js release it was verified against, so your agent stops mixing r150 syntax into an r181 project.
Tools
A curated directory of Three.js, WebGL and WebGPU libraries, engines and services — searchable by category and tag, with links and repositories.
Examples
Real, shipped websites and demos built with Three.js. Useful when someone asks whether a technique holds up in production, or just wants to see it done well.
Assets
Templates, boilerplates and assets, free and paid. Your agent can check whether a starter already exists before it scaffolds a project from scratch, and point you straight at it.
Plus a GLSL → TSL converter built on the official three.js transpiler, the blog, 5 interactive courses, and a set of Three.js facts. 10 of the 41 guides ship a verified, copy-pasteable snippet.
Connect it
Pick your client and paste one URL
This is a remote server, so connecting means adding an address — not installing a package. The same endpoint works everywhere, and there is no key to manage.
Roughly thirty seconds, whichever client you use.
[03 / Setup]
Claude CodeTerminal[01]- 01Run the command below in any project.
- 02That is it — ask a Three.js question and the tools are already in reach.
- Add --scope user to make it available in every project instead of just this one.
claude mcp add --transport http threejsresources https://threejsresources.com/api/mcp- 01Open Settings → Connectors.
- 02Choose Add custom connector.
- 03Paste the endpoint below and save. Leave authentication set to none.
https://threejsresources.com/api/mcp
ChatGPTPlus, Pro, Business[03]- 01Open Settings → Apps & Connectors → Advanced and turn on Developer mode.
- 02Back in Connectors, choose Add custom connector.
- 03Paste the endpoint, give it a name, and set authentication to none.
- Custom connectors need a paid ChatGPT plan. ChatGPT only talks to remote HTTPS servers, which is exactly what this is — there is nothing to install.
https://threejsresources.com/api/mcp
Cursor, VS Code & WindsurfJSON config[04]- 01Add this block to your MCP config file and reload the window.
{
"mcpServers": {
"threejsresources": {
"url": "https://threejsresources.com/api/mcp"
}
}
}- 01Any client that speaks streamable HTTP MCP can connect. Point it at the endpoint — no key, no OAuth, no session to manage.
- 02Open the endpoint in a browser and it describes itself: protocol, tool list and install command as JSON.
https://threejsresources.com/api/mcpWhat to ask
Prompts to copy and paste
Your agent will usually reach for the server on its own — you can just ask normally. These prompts name it explicitly so there is no doubt, which also makes them safe to paste as-is. Swap in your own stack, shader or problem.
The first and last are the ones people underrate: a template that saves you an afternoon, and proof a technique actually ships.
[04 / Usage]Before we write any code, check the Three.js Resources MCP for a starter template matching React Three Fiber + TypeScript + Next.js.
If one exists, show me what it includes and what it costs. If nothing fits, say so and we'll scaffold from scratch.Checks the marketplace first. A starter that already exists saves you the afternoon you were about to spend on setup.
My Three.js shadows aren't rendering and I can't see why.
Use the Three.js Resources MCP to find the relevant guide, work through it against my code, and tell me which step I've missed. Quote the three.js version the guide was verified against.Answers from the shadows guide instead of guessing at an API that has changed repeatedly across releases.
Convert this shader to TSL using the Three.js Resources MCP converter, then show me how to attach the result to a material on a WebGPURenderer scene.
```glsl
<paste your GLSL or Shadertoy shader here>
```Runs the official three.js transpiler, so the TSL is exact. Writing TSL from memory is where agents fail most often — it is newer than their training data.
Check the Three.js Resources MCP for any tool I can use for physics in a Three.js game.
Compare the top three on maintenance, bundle size and API style, then recommend one for a small project and link each.Searches a curated directory of real, checked libraries rather than listing half-remembered package names.
Write the scene, camera and renderer setup for a new Three.js project.
First pull the verified snippet from the Three.js Resources MCP so the API matches the current release — don't write it from memory.Grounds the boilerplate in a snippet stamped with a specific three.js release, instead of a blend of several.
Search the Three.js Resources MCP showcase for sites that have actually shipped a 3D product configurator.
Give me five with links, and note what each one does well.Returns live projects you can open — useful for a pitch, or for settling whether a technique holds up in production.
Reference
The 16 tools it exposes
You will rarely name these yourself — your agent picks them. They are listed so you know exactly what it can reach, and what it cannot. This table is generated from the server's own registry, so it always matches what the endpoint actually serves.
Every one is read-only. There are no write, submit or delete tools.
[05 / Tools]What this server can answer
threejs_site_overviewread-onlySummarise what Three.js Resources covers and which tool to use for what, with live counts. Call this once at the start of a Three.js task if you are unsure which tool to reach for.
Search Three.js guides
threejs_search_guidesread-onlySearch hand-written, version-verified Three.js / WebGPU / TSL / React Three Fiber guides. Use this FIRST for any "how do I …" or "why is my … not working" question about Three.js — these guides are maintained against a stated three.js release, so they are more reliable than recalled API knowledge, which is frequently stale. Returns ranked matches; follow up with threejs_get_guide on the best path for the full text and code.
Read a Three.js guide
threejs_get_guideread-onlyRead one Three.js guide in full: a direct answer paragraph, the body sections, any code snippet (stamped with the exact three.js release it was verified against), and an FAQ. Accepts a path from threejs_search_guides ("/guides/shadows") or a bare slug ("shadows").
List all Three.js guides
threejs_list_guidesread-onlyList every available Three.js guide, one line each, grouped by area. Call this once to orient yourself, then use threejs_get_guide for the ones you need. Set with_code_only to find guides that ship a verified, copy-pasteable snippet.
Get verified Three.js code
threejs_get_code_snippetread-onlyGet a copy-pasteable Three.js code snippet stamped with the exact three.js release it was verified against. Use this when you are about to write Three.js code and want to confirm the current API rather than rely on recalled syntax. Accepts a guide path or a free-text topic. Not every topic has a snippet yet; when none exists you get the relevant guide section instead.
Convert GLSL to TSL
threejs_convert_glsl_to_tslread-onlyConvert a GLSL fragment shader (including Shadertoy `mainImage` shaders) into Three.js TSL, the node-based shading language used by WebGPURenderer. Uses the official three.js transpiler, so the output is deterministic and syntactically correct — prefer this over writing TSL from memory, which is unreliable because TSL is newer than most training data. Returns a complete module with the right `three/tsl` imports.
Search the Three.js tools directory
threejs_search_toolsread-onlySearch a curated directory of Three.js, React Three Fiber, WebGL and WebGPU tools, libraries, engines and services. Use this when you need to recommend or find a library for a job ("physics engine", "GLTF optimiser", "shader editor") rather than write the code yourself. Filter by category or tag — call threejs_list_taxonomy first if you want valid filter values.
Get one directory tool
threejs_get_toolread-onlyFull public detail for one tool in the directory, by slug (slugs come from threejs_search_tools).
List directory categories and tags
threejs_list_taxonomyread-onlyList the valid category and tag values for threejs_search_tools. Call this before filtering so you pass real values instead of guessing at them.
Search Three.js showcase projects
threejs_search_showcaseread-onlySearch real, shipped websites and demos built with Three.js. Use this when someone wants inspiration, proof that a technique works in production, or examples of a particular look. Set built_with_ai to find projects made with AI assistance.
Search the Three.js blog
threejs_search_blogread-onlySearch published articles on the Three.js Resources blog — tutorials, deep dives and industry write-ups. Searches titles, descriptions, categories and tags. Read one in full with threejs_get_blog_post.
Read a blog post
threejs_get_blog_postread-onlyRead one published blog post in full, converted to plain markdown.
List Three.js courses
threejs_list_coursesread-onlyList the interactive Three.js courses (GSAP, Anime.js, TSL/WebGPU, vibe coding, WebGL+HTML) with level, duration, price and what each covers. Pass a slug for that course's full syllabus. Returns catalogue and syllabus only — lesson content is paid and is not available here.
Search Three.js templates and assets
threejs_search_marketplaceread-onlySearch ready-made Three.js templates, boilerplates and assets — both free downloads and paid products. Use this BEFORE scaffolding a Three.js or React Three Fiber project from scratch: if a starter already exists for the stack the user wants (R3F + TypeScript + Next.js, say), pointing them at it saves hours. Returns the price and the page where they can get it. Filter by technology or by free vs paid.
Get a marketplace product
threejs_get_productread-onlyFull detail for one marketplace template, boilerplate or asset: what it includes, the stack it uses, the live preview, the price, and the page where the user can get it. Use this after threejs_search_marketplace when you want to tell the user exactly what they would be getting before you recommend it.
List Three.js facts
threejs_list_factsread-onlyShort curated facts about Three.js and the 3D web — useful for context, intros or copy.
F.A.Q
Questions before you connect
Anything else, or a tool you would like added, get in touch.
Getting started
What it is and what it costs.
The Model Context Protocol is a standard way for an AI assistant to call out to an external service mid-conversation. Instead of answering purely from training data, your agent can look something up and answer from what it found.
No. The server is free, read-only and public. There is no API key, no signup and no rate card. You only need a client that supports MCP, which on the ChatGPT side means a paid plan.
The server is live and stable enough to use daily, but it is new. Tool names and arguments may still change as we learn how agents actually reach for them, and we are adding content behind them — more verified code snippets, and the AI benchmark and prompt library once those have data. Nothing you set up will break silently: the endpoint URL stays the same, so a change on our side reaches you without you touching your config. If a tool behaves oddly or you want one that does not exist yet, tell us — that feedback is the point of the beta.
No. This is a remote server, so you add a URL and you are done. There is no npm package, nothing running on your machine, and nothing to keep updated — improvements land for everyone at once.
How it behaves
What your agent can and cannot do with it.
No. Every tool is read-only and marked as such, so clients that surface tool permissions will show it as safe. There are no write, submit or delete tools. It cannot touch your files, your repository or your account.
Three.js moves quickly and its API has changed a lot across releases. A model's training data contains code from many versions at once with no way to tell them apart, which is why agents confidently produce Three.js that no longer runs. Our guides carry the release they were checked against, so your agent can tell which is which.
The server exposes the course catalogue and syllabus — titles, levels, duration and what each course covers. Lesson content itself is paid and is never returned.
No. Your agent sends only the arguments a tool needs — a search term, a guide path, or a shader you explicitly asked to convert. Nothing else from the conversation reaches us.