Player not loading? Watch on YouTube
This tutorial builds a browser-based 3D shoe configurator with Next.js 16, React 19, and React Three Fiber v9. A visitor describes a design in natural language, and tool calls change the shoe's appearance. The demonstrated setup uses Vercel's hosted services; it does not show how to run models locally.
The GLB model needs named, swappable parts such as the upper, sole, laces, and accent. React state holds one configuration object, which controls the rendered materials and a price calculation. The AI changes properties on existing parts rather than generating new geometry.
The presenter connects the prompt interface to Vercel AI Gateway through an API route and uses the AI SDK for streaming and tool calling. Four actions set color, material, finish, and accent. Zod schemas validate their parameters before the client applies a new configuration to state. These presets limit what the model can change.
Deployment uses Vercel Fluid Compute and the Vercel plugin inside Claude Code. The presenter recommends Fluid Compute for the streaming request, though the tutorial does not establish universal serverless timeout limits. A bonus section describes Vercel Sandbox as an isolated environment for generated code beyond the preset actions. Vercel Workflow receives a brief mention for longer, multi-step agent flows.
