Claude Code MCP: Discovering and Reusing Three.js Components with AI

Key answer: MCP (Model Context Protocol) is an open standard that lets AI coding agents call external tools and read external data. Claude Code acts as an MCP client, so you register MCP servers and it uses their tools during a task. For 3D work this is the difference between an agent hallucinating Three.js code and an agent discovering a real, reviewed component from a server and installing it straight into your project. The AETumi MCP does exactly that — it lets Claude Code browse a cinematic 3D library and place working Three.js and React Three Fiber components into your repo instead of you copy-pasting them.

If you have used Claude Code to edit files and run commands, you have seen its built-in abilities. MCP is how you extend them. Instead of the agent being limited to what ships in the box, MCP gives it a standard way to reach outside — to documentation, a browser, a database, or a 3D component library like AETumi.

Table of contents

• What MCP actually is
• How Claude Code uses MCP servers
• MCP for Three.js: discovering and reusing 3D components
• The agent to MCP to project flow
• What the AETumi MCP provides
• When MCP is worth it
• FAQ
• Conclusion

What MCP actually is

The Model Context Protocol is an open standard for connecting AI applications to external systems. The problem it solves is fragmentation: before a shared protocol, every integration was bespoke, so connecting an assistant to your docs, your database, and your component library meant three custom, incompatible bridges.

MCP defines a common client–server contract instead. An MCP server exposes capabilities — commonly tools the model can call and resources it can read. An MCP client, embedded in an AI application, discovers those capabilities and lets the model use them. Because the contract is standardized, any compliant client can talk to any compliant server. Build one AETumi MCP server, and it works with any MCP-capable agent. Think of it as a universal adapter between AI agents and the outside world, not a pile of one-off cables.

How Claude Code uses MCP servers

Claude Code is an MCP client. Using MCP with it comes down to three ideas:

1. You register a server. You tell Claude Code where an MCP server runs and how to reach it. Servers can run locally on your machine or be reached remotely; configuration lives in Claude Code's settings. 2. The agent discovers its tools. Once connected, Claude Code can see the tools that server exposes and their descriptions. Discovery is part of the protocol, so it does not need re-teaching each session. 3. The model calls tools during a task. When a step maps to a server's tool, the agent invokes it, passes arguments, and uses the result to continue. You stay in the loop and approve consequential actions.

Because setup specifics and command syntax evolve, follow AETumi's docs or Anthropic's official Claude Code documentation for exact registration steps rather than trusting half-remembered flags.

MCP for Three.js: discovering and reusing 3D components

3D web work is where copy-paste hurts most. A Three.js scene is not one snippet — it is a renderer, a camera, lights, geometry, materials, an animation loop, and cleanup, all of which have to agree. When an agent generates that from memory, small errors compound: a disposed material that was still in use, a resize handler that never runs, an import path that does not exist.

MCP changes the shape of the request. Instead of generate a Three.js hero, the agent can discover a reviewed hero component and install it. The MCP server advertises what 3D components it has; the agent lists them, selects one, and asks the server to install it. The files arrive as real source in your repo, already coherent, and the agent then adapts them to your data and routes.

A correct minimal Three.js setup — the kind a reviewed component gets right and an improvised one often does not — looks like this with r160 ES modules:

import * as THREE from 'three';

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.z = 4;

const mesh = new THREE.Mesh(
  new THREE.IcosahedronGeometry(1, 0),
  new THREE.MeshStandardMaterial({ color: 0x6699ff, flatShading: true })
);
scene.add(mesh, new THREE.DirectionalLight(0xffffff, 2), new THREE.AmbientLight(0xffffff, 0.4));

renderer.setAnimationLoop(() => {
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
});

addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

The value of discovery is that the pixel-ratio clamp, the animation loop, and the resize handler are already in place — you are reusing a part, not betting on a fresh guess. For a deeper walkthrough of building 3D with Claude Code, see Claude Code and Three.js.

The agent to MCP to project flow

Here is the path a request travels when you ask Claude Code to add a 3D section through the AETumi MCP:

1. You type a request — "Add the AETumi scroll-driven hero to this page." 2. Claude Code interprets it and recognizes it needs capabilities beyond its built-ins. 3. The MCP client inside Claude Code inspects the registered servers and selects the AETumi server's relevant tool — for example, one that lists or installs a component. 4. The MCP transport carries a structured tool call — the tool name plus arguments like a component id and target path — to the server. 5. The AETumi MCP server resolves the asset against its 3D library and returns the files or metadata. 6. Claude Code writes the component into your project, wires imports, and shows you the diffs.

The insight in that chain: the agent never has to know AETumi's internals ahead of time. The server advertises what it can do, and the agent orchestrates. The same pattern extends to any capable server — only which server sits at the end changes.

What the AETumi MCP provides

AETumi is an AI-native 3D web platform — Three.js and WebGL scenes, React Three Fiber components, and Next.js templates. Its MCP integration turns that library into something an agent can act on rather than something you browse and copy. The practical payoff:

• Direct install into your project. The agent places component files where they belong instead of you shuttling code between a browser and your editor.
• Correct wiring. Because the agent installs and then adapts, imports and setup tend to land right the first time.
• Fewer context problems. You describe intent; the server supplies the actual, correct asset, so there is less room to hallucinate an API that does not exist.

The AETumi MCP is open source — you can read exactly how the server exposes and resolves components in the aetumi-mcp repository. MCP access ships with the Full Stack plan ($129, buy once, own for life), which also includes full source ownership.

When MCP is worth it

MCP shines when a task repeats and touches an external system: pulling components, checking live documentation, driving a browser, querying a database. For a one-off snippet, built-in abilities are fine. But for front-end teams shipping cinematic 3D regularly, connecting the AETumi MCP once and then simply asking for assets removes the most error-prone part of the loop.

FAQ

Is MCP specific to Claude Code? No. MCP is an open standard. Claude Code is one MCP client, but any compliant client can use any compliant server.

How is discovering a Three.js component different from generating one? Generation asks the model to write a whole scene from memory, where small inconsistencies break rendering. Discovery asks the server for a reviewed component and installs it as source, so you reuse working code and adapt it.

Do MCP servers run locally or remotely? Both are supported. Some run as a local process on your machine; others are reached remotely. Claude Code's configuration covers each case.

What can the AETumi MCP do? It lets an agent browse and install AETumi's 3D and React Three Fiber components directly into your project. See the MCP overview for details.

Do I need the Full Stack plan for MCP access? AETumi MCP access is part of the Full Stack plan ($129), which also includes full source ownership.

Conclusion

MCP is the standard that lets Claude Code reach beyond its built-in abilities, and for 3D that reach matters most — discovering a reviewed Three.js component and installing it beats improvising a scene every time. Register the AETumi MCP once, and "find, download, copy, wire" becomes a single sentence. Start with the MCP overview, compare plans at aetumi.app/pricing, read Claude Code and Three.js, and inspect the server itself in the aetumi-mcp repository.