Spline MCP: Build 3D Web Experiences with AI (Cursor, Claude, Gemini, and more)
This tutorial shows how to connect an MCP-capable AI tool to the Spline desktop editor, generate an editable 3D scene from a reference, and iterate it into an interactive website. It emphasizes naming Spline in the prompt and specifying the scene, viewpoint, behavior, and interactions the agent should create.
SplineWatchTranscript found
Quick learning frame
Read this before watching.
AI-native interfaces are control surfaces for intent, artifacts, context, preview, inspection, and iteration.
New playlist item from Spline; queued for transcript-backed review, topic mapping, and a practical learning artifact.
Skill you build: The ability to direct an MCP-connected AI agent to create and iteratively refine editable 3D experiences inside Spline.
Watch for the shift from claim to mechanism. The learning value is the point where the transcript reveals a repeatable action, tool boundary, context move, review habit, or artifact.
Concept diagram
Where this video fits.
01Intent
02Context
03Generation surface
04Preview
05Critique
06Implementation handoff
Deep lesson
Turn this video into working knowledge.
867 cleaned transcript words reviewed across 256 timed caption segments.
Thesis
Spline MCP: Build 3D Web Experiences with AI (Cursor, Claude, Gemini, and more) teaches a practical ai interface control move: This tutorial shows how to connect an MCP-capable AI tool to the Spline desktop editor, generate an editable 3D scene from a reference, and iterate it into an interactive website. It emphasizes naming Spline in the prompt and specifying the scene, viewpoint, behavior, and interactions the agent should create.
The goal is not to remember the video. The goal is to extract the operating principle, tie it to timestamped evidence, test how far the claim transfers, and make something reusable.
0:00
Connect the Editor
“Spline MCP is here, letting you use AI agents directly inside Spline to build anything you can imagine. It runs with the AI tools you already use. Claude Code, Cursor, Codeex, Gemini, VS Code, and any other client...”
Spline MCP operates through the desktop editor and supports clients such as Claude Code, Cursor, Codex, Gemini, and VS Code. Spline automatically detects and configures supported tools when both apps are open, while other MCP clients can use the configuration copied from the Other Agents option. Open Spline beside an MCP client, confirm its connection, and locate the manual configuration path you would use for an unlisted client.
1:19
Name the Tool
“another MCP compatible AI tool that isn't listed here, open other agents at the bottom. Copy the config, paste it into your tool, and you're good to go. All right, let's actually build your first scene with Splinem.”
The prompt must explicitly say to work in Spline so the agent selects the correct tool; a reference image plus a direct recreation request is enough to begin a scene. The green MCP badge confirms the active connection, and the generated objects remain normal, editable Spline elements rather than a baked result. Write a first-scene prompt that names Spline, attaches or describes a reference, and specifies the main objects, materials, and camera viewpoint.
4:16
Iterate Into Interaction
“editor, Claude generated all the code inside it. Everything here is editable as well, so you can make changes where you need it. That's the magic of Spline MCP. Build your 3D scene in Spline, then bring it...”
A generated scene can become a complete website by prompting for navigation, camera animation, mood changes, discoverable objects, and other behaviors, with code generated inside Spline's editor. The agent can also modify the currently open Spline file, so the same workflow supports both new scenes and continued refinement. Extend the scene prompt with one camera behavior, one day-or-night state change, and one clickable discovery interaction, then refine the open file rather than starting over.
01
Intent
Start with this video's job: This tutorial shows how to connect an MCP-capable AI tool to the Spline desktop editor, generate an editable 3D scene from a reference, and iterate it into an interactive website. It emphasizes naming Spline in the prompt and specifying the scene, viewpoint, behavior, and interactions the agent should create. Treat "Intent" as the outcome you are trying to make visible, not a topic label. Anchor it to 0:00, where the video says: “Spline MCP is here, letting you use AI agents directly inside Spline to build anything you can imagine. It runs with the AI tools you already use. Claude Code, Cursor, Codeex, Gemini, VS Code, and any other client...”
02
Context
Use "Context" to locate the part of the ai interface control mechanism the video is demonstrating. Ask what changes in your real setup if this claim is true. Anchor it to 1:19, where the video says: “another MCP compatible AI tool that isn't listed here, open other agents at the bottom. Copy the config, paste it into your tool, and you're good to go. All right, let's actually build your first scene with Splinem.”
03
Generation surface
Turn "Generation surface" into the reusable artifact for this lesson: A UI control-surface critique sheet with context inputs, artifact visibility, review criteria, and implementation handoff. This is where watching becomes something you can inspect and reuse.
04
Preview
Use "Preview" as the application surface. Decide whether the idea touches a browser flow, a local file, a model choice, a source document, a UI, or a review step.
05
Critique
Use "Critique" to prove the lesson. The evidence should connect back to the video title, transcript anchors, and a concrete output, not a generic best-practice claim.
06
Implementation handoff
Use "Implementation handoff" to carry the idea forward: save the prompt, checklist, diagram, or operating rule that would make the next agent run better.
Example
Source-backed artifact packet
Convert the video into a scoped artifact request that includes the transcript claim, mechanism, acceptance criteria, and proof. The output should be a ui control-surface critique sheet with context inputs, artifact visibility, review criteria, and implementation handoff..
Example
AI interface control proof brief
Separate what the speaker claims, what the demo actually proves, and what still needs outside verification before you adopt the ai interface control pattern.
Example
Teach-back module
Transform the lesson into a definition, a Intent -> Context -> Generation surface -> Preview -> Critique -> Implementation handoff diagram, one misconception, one practice exercise, and a check-for-understanding question.
Do not learn it wrong
Treating the title as the lesson without checking what the transcript actually says.
generic UI inspiration
visual output with no critique
handoff that lacks implementation criteria
Letting the lesson drift into generic design tips.
Letting the lesson drift into visual hype without inspection.
Letting the lesson drift into screenshots without implementation criteria.
Do not count this as learned until these are true.
01
State the transcript-backed claim in your own words: This tutorial shows how to connect an MCP-capable AI tool to the Spline desktop editor, generate an editable 3D scene from a reference, and iterate it into an interactive website. It emphasizes naming Spline in the prompt and specifying the scene, viewpoint, behavior, and interactions the agent should create.
02
Explain the practical stakes without hype: New playlist item from Spline; queued for transcript-backed review, topic mapping, and a practical learning artifact.
03
Map the idea onto the Intent -> Context -> Generation surface -> Preview -> Critique -> Implementation handoff sequence and name the weakest link.
04
Produce the artifact and include the evidence that proves it: A UI control-surface critique sheet with context inputs, artifact visibility, review criteria, and implementation handoff.
Put it into practice
Give this grounded prompt to Codex or Claude after watching.
You are helping me turn one specific YouTube video into real, durable learning.
Source video:
- Title: Spline MCP: Build 3D Web Experiences with AI (Cursor, Claude, Gemini, and more)
- URL: https://www.youtube.com/watch?v=tO4BrbNTqKA
- Topic: Agent Architecture
- My current learning frame: Use a reference image to generate an editable Spline scene, then issue a second prompt that adds a camera transition, a visual mode change, and a clickable interaction to the same file.
- Why this matters: New playlist item from Spline; queued for transcript-backed review, topic mapping, and a practical learning artifact.
Transcript anchors from this exact video:
- 0:00 / Evidence 1: "Spline MCP is here, letting you use AI agents directly inside Spline to build anything you can imagine. It runs with the AI tools you already use. Claude Code, Cursor, Codeex, Gemini, VS Code, and any other client..."
- 1:19 / Evidence 2: "another MCP compatible AI tool that isn't listed here, open other agents at the bottom. Copy the config, paste it into your tool, and you're good to go. All right, let's actually build your first scene with Splinem."
- 4:16 / Evidence 3: "editor, Claude generated all the code inside it. Everything here is editable as well, so you can make changes where you need it. That's the magic of Spline MCP. Build your 3D scene in Spline, then bring it..."
Video-aware target:
- Prompt lane: AI interface control
- Mechanism to extract: Extract how the interface gives the user control over context, visual quality, generated artifacts, and handoff.
- Artifact to produce: A UI control-surface critique sheet with context inputs, artifact visibility, review criteria, and implementation handoff.
- Artifact must include: context input; visual target; preview/review step; implementation handoff; quality rubric
Your task:
1. Use the transcript anchors above as the primary source packet. If you add outside context, label it clearly as outside context and keep it secondary.
2. Create a source-check table with columns: timestamp, claim, transcript support, what the demo proves, confidence, and what still needs verification.
3. Extract the actual teachable mechanism from the video: Extract how the interface gives the user control over context, visual quality, generated artifacts, and handoff. Do not invent claims that are not supported by the title, lesson frame, or transcript anchors.
4. Build a reusable learning artifact: A UI control-surface critique sheet with context inputs, artifact visibility, review criteria, and implementation handoff.
5. Include:
- a plain-English definition of the core idea
- a diagram or structured model using this sequence: Intent -> Context -> Generation surface -> Preview -> Critique -> Implementation handoff
- answers to these source questions: What does the interface let the user control? | What artifact becomes visible? | What critique or handoff step closes the loop?
- 3 concrete examples that apply the video idea to real agentic work, such as design.md handoff; Figma-to-code review; UI reference library translation
- 2 failure modes the video helps prevent, chosen from the transcript evidence and these likely risks: generic UI inspiration; visual output with no critique; handoff that lacks implementation criteria
- a checklist for the next real workflow, focused on: context, preview, artifact visibility, critique, handoff
- one practical exercise with a clear done signal: Turn one UI demo into a design-review checklist for a real product screen.
6. Add a "learning transfer" section: what changes in my workflow tomorrow if I actually learned this?
7. Add a "source check" section that cites which transcript anchor supports each major takeaway.
Quality bar:
- Make this specific to "Spline MCP: Build 3D Web Experiences with AI (Cursor, Claude, Gemini, and more)", not a generic Agent Architecture essay.
- Cite transcript anchors for every claim about design context, UI generation, preview, critique, or handoff.
- Prefer operational examples, failure modes, and reusable artifacts over broad definitions.
- Call out uncertainty instead of smoothing over weak evidence.
- Avoid these generic drifts: generic design tips; visual hype without inspection; screenshots without implementation criteria.
- If evidence is weak or missing, stop and say what transcript segment or timestamp needs review instead of guessing.
- Finish with a concise artifact I could paste into my learning app.
Misconceptions
What to stop believing.
A better model automatically makes a better agent.
The model matters, but harness design determines whether the system can act safely and repeatably.
More tools always help.
Every tool increases surface area. Strong agents have the right tools with clear permissions.
Memory means saving everything.
Useful memory is compressed, curated, and tied to future decisions.
Practice studio
Learning only counts when you make something.
01
Transcript evidence map
Separate what the video actually says from what you already believe about the topic.
3 source-backed takeaways with timestamps, confidence, and a transfer note.02
One useful artifact
Apply the video to a real workflow and produce a ui control-surface critique sheet with context inputs, artifact visibility, review criteria, and implementation handoff..
A reusable artifact with a done signal and one verification step.03
AI interface control teach-back card
Explain the ai interface control mechanism to someone who has not watched the video yet.
A 90-second explanation, one diagram, one example, and one misconception to avoid.
Recall check
Answer first, then reveal — without rewatching.
How does Spline MCP connect to supported AI tools on the same machine?
Why must a creation prompt explicitly mention Spline?
How can the MCP workflow continue from an existing Spline scene?
Source shelf
Use the video as a doorway, then verify with primary sources.
