# Combine with code {% embed url="" %} The Creator Hub plus custom code is a very powerful combination for creating content. You can use the canvas to visually position items intuitively, and then write code that interacts with these items with complete freedom. You can even place a smart item, that has its own default behavior, and write code that reacts to when the item is activated. For example, you can take advantage of an existing lever smart item, that already comes with its sounds and animations and states, and write code that detects when the lever is pulled to run your own custom logic. See [Reference items in code](/creator/scene-editor/extend-with-code/reference-items.md) for how to fetch items by name or by tags from your code. ## Editing code You must install a code editor on your machine to edit the code of your scene. The recommended options are: * VS Code [Visual Studio Code](https://code.visualstudio.com/): This is the recommended option for experienced developers. * Cursor [Cursor AI](https://www.cursor.com/): This is a powerful code editor that is integrated with AI. It lets you pick different AI models to help you write code, all of them are free. This is a good option for developers who are new to Decentraland or TypeScript, or if you want to save time writing code. {% hint style="warning" %} **📔 Note**: If you are on macOS, make sure the code editor app is in the Applications directory. {% endhint %} Once installed, you may need to select your Code Editor in the settings of the Creator Hub. To do this, 1. Open the wheel icon in the top-right of the screen 2. Under **Code editor of choice**, select your Code Editor. You may find your editor listed in the dropdown, or you may need to select **Chose from your device** to find it. ## Open a scene's code Once you installed a code editor on your machine, and selected it in the settings of the Creator Hub, you can click the **< > CODE** button to open it on your scene project. ![](/files/jjBKzspRh4t2aDMEwv7d) This opens a separate window with the code editor. On the left margin you can navigate the files and folder structure of your project. ![](/files/4D7DPjkUf51OzJbNEURN) Add your custom code in the `index.ts` file under `/src`, inside the `main()` function. You can otherwise add custom code outside that function or create new `.ts` files inside the `/src` folder, but these must be somehow referenced inside the `main()` function of `index.ts`. {% hint style="warning" %} **📔 Note**: If you have VS Code or Cursor installed but the **CODE** button doesn't open it, it may be that VS Code is not properly configured on your machine to open via the command line. In most cases, this is handled as part of the default installation, but in case it's not, see [these instructions from VS](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) to enable VS Code from the command line. {% endhint %} If you have a preview window open running your scene, whenever you change the code in your files and save, the scene reloads automatically with your changes. ## Using AI You can leverage AI assistants like Cursor or Claude Code to help you write scene code. For example to use Cursor, do this: 1. Open the Cursor AI assistant by clicking the **AI** button in the top-right of the screen 2. There you can prompt the AI assistant to help you write code. Your prompts can include links to docs pages, paths to specific files in your project, or even images. You can also select a specific model to use from the dropdown. Decentraland provides a context folder for the AI assistant to help you write code, this context folder is located at `/dclcontext` in your scene project. The AI assistant will know to search this context whenever generating code, to get familiar with the Decentraland SDK. This folder is updated with the latest context files every time your scene's dependencies are updated. You can also force update this folder by running the following: ``` npx sdk-commands get-context-files ``` {% hint style="info" %} **💡 Tip**: You can also add your own context files to this folder to help the AI assistant understand your scene and project. If you do, make sure to add them to a new file in that folder, as the default files are overwritten when SDK updates happen. {% endhint %} {% hint style="info" %} **💡 Tip**: Want to go further with AI? You can install Decentraland skills into your preferred AI coding agent to scaffold entire scenes, add multiplayer, deploy, and more — all from plain language prompts. See [Vibe Coding with AI](/creator/scenes-sdk7/getting-started/vibe-coding.md) for the full guide. {% endhint %} ## Version control We recommend that you create a repo for your project on GitHub, and use it to keep track of your project's versions and to work collaboratively with others. If you're not familiar with how to do this, see [Quickstart for repositories](https://docs.github.com/en/repositories/creating-and-managing-repositories/quickstart-for-repositories), or use the [GitHub desktop appliacation](https://desktop.github.com/download/) for an simpler UI-based flow. {% hint style="warning" %} **📔 Note**: Upload the entire project folder to a GitHub repo, but make sure the `/node-modules` or `/bin` folders and the `package-lock.json` file are all included in the `.gitignore` file, to avoid syncing them. This should be the case if you configure the repo to be of type `node`. These files are all auto-generated, and the content may differ for different machines. {% endhint %} ## See also * [Vibe Coding with AI](/creator/scenes-sdk7/getting-started/vibe-coding.md): build scenes by describing what you want to an AI assistant. * [Smart items - Basics](/creator/scene-editor/interactivity/smart-items.md) * [Smart items - Advanced](/creator/scene-editor/interactivity/smart-items-advanced.md) * [States and conditions](/creator/scene-editor/interactivity/states-and-conditions.md) * [Making any item smart](/creator/scene-editor/interactivity/make-any-item-smart.md) * [SDK Quick start](/creator/scenes-sdk7/getting-started/sdk-101.md): follow this mini tutorial for a quick crash course. * [Development workflow](/creator/scenes-sdk7/getting-started/dev-workflow.md): read this to understand scene creation from end to end. * [Examples](https://studios.decentraland.org/resources?sdk_version=SDK7): dive right into working example scenes. --- # 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.decentraland.org/creator/scene-editor/extend-with-code/overview.md?ask= ``` 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.