# Spline MCP: Build 3D Web Experiences with AI (Cursor, Claude, Gemini, and more) - Spline Academy (https://spline.design/academy/tutorials/spline-mcp-build-3d-web-experiences-with-ai-cursor-claude-gemini-and-more)

> Turn a reference image into an editable 3D scene with Spline MCP and Claude — then take it further with an interactive website.

1. [Academy](https://spline.design/academy)
2. [Tutorials](https://spline.design/academy/tutorials)
3. Spline MCP: Build 3D Web Experiences with AI (Cursor, Claude, Gemini, and more)

# Spline MCP: Build 3D Web Experiences with AI (Cursor, Claude, Gemini, and more)

Spline 3DIntermediate6 min

Turn a reference image into an editable 3D scene with Spline MCP and Claude — then take it further with an interactive website.

In this tutorial, you’ll learn how to connect the Spline desktop app to your AI tool, write your first prompt, and watch your scene come together directly in the editor. We’ll recreate a floating park diorama, explore how to refine its objects and materials, and use Claude to build a playful web experience around it, complete with a day/night toggle, hidden surprises, and interactive elements.

What you’ll learn:

- Connect Spline MCP to Claude and other MCP-compatible AI tools.
- Use an image reference to generate an editable 3D scene.
- Refine your scene with prompts or make changes manually in Spline.
- Work in an existing Spline file or start from scratch.
- Turn your 3D scene into an interactive web experience.

Bring a reference image, an idea, or a moodboard — and start building. Share what you create in the comments!

Try Spline V2 and drop a comment with what you want to see next!

👍 Don't forget to like and subscribe for more Spline tutorials and news

Links: 🌸 Hana → <https://spline.design/hana> 💖 Spline → <http://app.spline.design> 📚 Spline Docs → <https://docs.spline.design> 👋 Spline Community → <https://app.spline.design/community>

Our Socials: 📷 Instagram → / splinetool 🎵 TikTok → / splinedesign 💙 LinkedIn → / splinetool 🐦 X → / splinetool 👾 Discord → / discord

#spline #3D #Design #Spline3D #AIAgent

## Overview

- Spline 3D
- 6 min
- Intermediate

## Related tutorials

[All tutorials](https://spline.design/academy/tutorials)

[Hana V2 Full Tour: Agent Workflow, 3D Support, Faster CanvasSpline 3DBeginner9 min](https://spline.design/academy/tutorials/hana-v2-full-tour-agent-workflow-3d-support-faster-canvas)[Spline V2 Full Tour: New Layout, Faster Creation, Agent WorkflowSpline 3DBeginner9 min](https://spline.design/academy/tutorials/spline-v2-full-tour-new-layout-faster-creation-agent-workflow)[Build Interactive Animations: Morphing UI & Reactive Glow in Hana (Step by Step)HanaBeginner13 min](https://spline.design/academy/tutorials/build-interactive-animations-morphing-ui-reactive-glow-in-hana-step-by-step)

[Spline](https://spline.design/)

The 3D and 2D editor for teams and their agents. Ship to the web, iOS and Android.

#### Ask AI about Spline

#### Products

- [3D Design](https://spline.design/3d-design)
- [Hana](https://spline.design/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/ai-generate)
- [Spline MCP](https://spline.design/mcp)
- [Pricing](https://spline.design/pricing)
- [Enterprise](https://spline.design/enterprise)

#### Runtimes

- [Web](https://spline.design/web)
- [iOS](https://spline.design/ios)
- [Android](https://spline.design/android)

#### Apps

- [Download](https://spline.design/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Download Spline Mirror](https://spline.design/download-mirror)

#### Learn

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Solutions](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/blog)
- [Changelog](https://spline.design/changelog)
- [Education](https://spline.design/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/affiliate)

#### Company

- [Customers](https://spline.design/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/security)

#### Legal

- [Terms & Conditions](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.