# Product Configurator

Table of Contents

- Project Layout
- Setting up the Viewers
- Loading Models
- Add Component Selection
- Incorporating Model Relationships
- Clearing the Build

This tutorial focuses on capabilities that would typically be provided by a product configurator visualization solution. The concepts here are not specific to a product configurator, and can be cherry picked for use in your own application. A completed version of this tutorial can be found on our GitHub project. The master branch contains an empty HOOPS Visualize Web project, intended for you to paste code snippets from this tutorial and build the app as you follow along. Alternatively, the completed branch contains the completed tutorial.

## Covered topics

- Bringing multiple models and assemblies in and out of the scene
- Inserting transformed nodes into an existing model assembly tree
- Working with multiple WebViewers
- Incorporating external data

The intent would be for the end user to navigate a selection of potential components, view them, and select the desired component to be added to the final assembly.

By the end of this tutorial, we will see an application that looks similar to the final result below.

Conversation saved
HOOPSY BETA

### Hello! I'm HOOPSY

Your Docs generative AI assistant. Ask me anything about HOOPS Visualize Web or choose a sample question below to start a conversation:

What is HOOPS Visualize Web?
What are the latest release notes for HOOPS Visualize Web?
How do I start evaluating HOOPS Visualize Web?
How do I write my first sample application?
How can I get assistance?

HOOPSY may store conversations according to OpenAI's policy. Responses may not always be accurate.

HOOPSY is thinking...