# Getting started

### Installing the SDK <a href="#installing-the-sdk" id="installing-the-sdk"></a>

To install the SDK we use npm (but also yarn or another package manager which uses the npm logic is possible).

```
npm i @roomle/web-sdk --save
```

You can pin the dependency to a specific version. We always recommend to use a specific version.

### Creating an index.html <a href="#creating-an-index-html" id="creating-an-index-html"></a>

Next we need some `index.html`. Vue CLI will create this one for you. Of course you can use the Roomle Web SDK also on some sub page or inside a [SPA](https://en.wikipedia.org/wiki/Single-page_application).

It's important to set the Roomle asset path before everything else loads (more see [asset path](/rubens/rubens-sdk/getting-started.md#asset-path)). In our example we do this inside `index.html`.

```html
<script>
  window.__RML__ENV__ = {
    assetPath: 'dist/roomle/',
  };
</script>
```

The next thing we need is a place where we want to put the canvas on which Three.js operates. In our case we just add a `div` container with a specific css class. The styling, sizing of the `div` is done by CSS. Since we use in our example vue js, we are using the ref attribute to declare the container `scene` which we can then use directly in javascript. Of course you can also use vanilla javascript and use the id attribute in the `div` and use it with an `query selector` in javascript.

```html
<template>
  <div class="container">
    <div ref="scene" class="scene"></div>
  </div>
</template>
```

### Usage in TypeScript (JavaScript) <a href="#usage-in-typescript-javascript" id="usage-in-typescript-javascript"></a>

Since we author the SDK in TypeScript we also want to use TypeScript in this guide. We hope you can see the benefits quickly. We think that exploring a SDK is much easier with code completion and intellisense. Therefore IDEs like VSCode, Webstorm, Atom etc are a great help. So let's get started. To load a configuration we need to add the following code to the setup method of our Vue component. Most of the code is framework independent. Only the way we hand over the DOM element could be different, as described above if you are using vanilla javascript please just use the id attribute on the div element and get it in javascript with a `query selector`.

```typescript
  setup({ objectId }) {
    const scene = ref(null);
    let rubensConfiguratorApi = null;
    let rubensConfigurator = null;
    onMounted(async () => {
      RoomleSdk.setGlobalInitData({
        customApiUrl: "https://api.roomle.com/v2",
      });
      rubensPlanner = await RoomleSdk.getPlanner();
      rubensPlanner.boot();
      rubensPlannerApi = await rubensPlanner.getApi();
      await rubensPlannerApi.init(scene.value);
      const initialId = objectId || "usm:frame";
      await rubensPlannerApi.insertObject(initialId);
    });

    return { scene };
  }
```

#### Tweaking the default scene <a href="#tweaking-the-default-scene" id="tweaking-the-default-scene"></a>

Since we are loading a shelf we can improve the light situation slightly. To make it easy we provided light settings which fit for special furniture types, for example `sofa` or `shelf` (more details see [lights](/rubens/rubens-sdk/rubens-sdk-reference/interfaces/common_core_src_scene_settings_loader.scenesettings.md#lights) or our [our reference](/rubens/rubens-sdk/rubens-sdk-reference.md)), to use one of these just use the following code (this is a continuation of the previous example. It's enough to pass the correct settings to `setGlobalInitData`, therefore we change the code slightly):

```typescript
RoomleSdk.setGlobalInitData({
  customApiUrl: 'https://api.roomle.com/v2',
  ls: 'shelf',
});
```

There are several more options to tweak but we won't go into detail here. Therefor see [our reference](/rubens/rubens-sdk/rubens-sdk-reference/classes/planner_core_src_roomle_planner.default.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.roomle.com/rubens/rubens-sdk/rubens-planner-room-designer/getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.