Vibe Coding

Vibe Coding is a way to create interactive features and logic using natural language prompts and ready-made templates, without writing traditional code.

TL;DR

• Open Vibes from the Action submenu or Side Panel.
• Pick a template (Templates, Community, or Yours) and add it to your Space.
• Describe what you want in the Vibe Prompt UI and generate behavior with natural language.
• Tune generated parameters, then save with as Save as New or Save to Parent.
• Publish finished templates from Yours to Community when ready.

Open the Vibe Menu

To open the new Vibe UI or add a new Vibe, you have two options:

1. Action submenu 1 → Vibe 2
2. Side Panel → Vibes 3

In both cases, the Side Panel will open automatically, allowing you to create or manage your Vibes.

Overview of the Vibe Menu

At the top of the panel, you’ll find a search bar. It allows you to search within the Vibes of the currently active tab. The search function filters results based on the title. 1

The Vibe Template menu is currently divided into three categories 2:

1. Templates
   Predefined functions created by the Arrival.Space team.
2. Community
   Functions created and shared by other creators.
3. Yours
   Your own saved and customized functions.

You can add any of these templates 3 to your Spaces to use a specific function, extend its existing logic, or use it as a foundation for your own custom behavior.

Edit Vibe UI

Source Code 1
The Source Code contains the core functionality of the Vibe.
It can be edited , downloaded , or replaced .

tip

It is recommended to edit the Source Code directly only if you are familiar with JavaScript. Otherwise, changes may easily lead to errors.

Prompt Vibe > 2
The Prompt Vibe UI opens the Vibe Prompt UI. There, you can describe in natural language which functionality you would like to create. Clicking the icon opens the same interface.

Using the icon, you can save your Vibe as a template.

Parameters 3
The parameters of each Vibe vary depending on its functionality. Parameters are added based on the specific behavior the Vibe provides.

You can explicitly define which parameters should be exposed, replaced, or modified by specifying this in the Vibe Prompt UI. In addition, parameters may also be generated automatically based on the described functionality.

Input Option	When to Use	Typical Term in “Vibe Coding”
Input Field	For short, single-line inputs (e.g. name, title, URL, numeric value)	Text Input / Single-Line Input
Textarea	For longer text content (e.g. description, notes)	Multiline Input
Toggle	For on/off options or boolean settings	Toggle / Switch
Upload Field	When users need to upload files (e.g. image, mesh model)	File Upload / Media Upload
Drop-down Menu	When users need to choose from predefined options	Select / Dropdown
Color Picker	When users need to define a color (e.g. object color)	Color Picker
Slider (with Number Input)	For adjustable value ranges (e.g. size, intensity, radius)	Range Slider / Value Control

Vibe Prompt UI

Vibe Tabs 1
The Vibe Tabs display your current prompt/chat sessions with the AI. You can quickly switch between them and run multiple Vibe codings at the same time. If the dot next to a tab name is green, the AI is currently processing that session.

Usage 2

Here you can monitor your usage percentage. It starts at 100% and decreases to 0%. We differentiate between hourly and weekly token limits.

Prompt history 3
The Prompt History stores your conversation with the AI, allowing you to review previous messages.

Prompt input field 4
Use the input field to describe the functionality you would like the AI to generate.

Attach File 5

If you would like to attach an image or a 3D model .glb - for example, to instruct the AI to replace a box with your uploaded model - you can upload it here.

= Resize 6
Use the bar at the bottom to resize the Vibe Prompt UI. This also works on mobile devices.

tip

You can freely move the Vibe Prompt UI within the browser window by clicking and dragging the top area next to the Vibe Tabs.

Send Message 5

Use this button to send your prompt, or press ↲ Enter.

Manage your Vibes

Add Vibes

To add a Vibe, open the Vibe menu. Then either click New Vibe 1 or single-click an existing template 2. The Content List entry will open automatically.

You can add Vibes multiple times - there is no limit to how many you can use inside a Space. As soon as you added it once, the button changes to Add Another. In addition to that a Remove button will appear to Remove your Template as Entity.

Edit Vibes

To edit Vibes that have already been added, open your Space Edit UI and either use the floating buttons or switch to the Content tab and open the corresponding entry.

You can then modify the Vibe either through natural language (see section Vibe Prompt UI) or by editing the source code directly (see section Edit Vibe UI).

Save Vibes

To make your Vibes available in your Template list and reuse them in other Spaces, you need to save them.

Use the icon. Clicking the icon opens a submenu 1:

• Save as New: creates and saves a new template
• Save to Parent: updates the existing template

If you choose Save as New, the UI shown on the right will open. There, you can define the template name and add a description. Currently, only two lines are displayed in the preview.

Publish to Community

Once you have saved your Vibe as a template, it will appear in the Vibe menu inside Tab Yours. In the top-right corner of the template card, you will find the button, which opens a submenu.

Remove from Space

This option works the same as the Delete option within the entity itself. The vibe is removed as an entity, but the template remains in the list.

Capture Screenshot

You can create screenshots for your templates. First, position your camera—ideally using Free Cam mode F and then click this option. You can update the screenshot at any time.

Upload Screenshot

If you created your own screenshot, you can use it instead. After uploading, you can still define the preferred crop area.

Select

The Select option allows you to delete multiple templates at once. A checkbox appears after selecting it.

Delete

Use this option to delete your template from the saved templates. After deleting the template, an option automatically appears allowing you to also delete the entity directly, if it exists in the space. If the template is used elsewhere, the entities will remain and will not be removed.

Puiblish to Community

You can share your templates with the community using this option. It opens the Vibe UI, where you can edit the title and description again. The template will then be reviewed by us and, if no prohibited content is found, approved.

Best Practice

The following best practices help you create clean structures, reusable templates, and stable systems inside a real-time 3D environment. They focus on clarity, flexibility, and performance — ensuring your vibes remain adaptable as projects grow.

Think in Reusable Patterns / Components
Build templates and components modularly so vibes can scale and evolve.

Example (PlayCanvas / 3D):
You want to create multiple pyramids made of boxes.

Instead of building one large fixed structure where every single box is manually placed, create a Pyramid component.

Expose inputs like:

• Boxes per level
• Box size
• Color / Material
• Rounded edges
• Spacing

Each pyramid is generated dynamically based on these properties.

Now you can:

• Place multiple pyramids anywhere in 3D space
• Give each pyramid different materials or proportions
• Improve the structure logic once and update all pyramids automatically

Principle:
Do not manually construct geometry repeatedly.
Build a configurable 3D generator component.

Break Tasks into Small Steps
Start simple, then iterate.

Example (PlayCanvas / 3D):
You want to build a procedural tower.

Instead of creating a complex script with animation, materials, lights, and physics at once:

1. First generate stacked boxes.
2. Then add spacing controls.
3. Then add material customization.
4. Then add animation.

Each step should work independently before moving forward.

Principle:
Stable small systems are easier to expand than unstable complex ones.

Expose Only Meaningful Inputs
Every setting should have a clear purpose.

Example (PlayCanvas / 3D):
If you build a “Glowing Orb” component, avoid exposing 15 random parameters.

Instead expose:

• Radius
• Glow intensity
• Color
• Pulse on/off

Do not expose internal shader complexity or unnecessary debug values.

Think in Systems, Not Objects
Build generators, not static scenes.

Example (PlayCanvas / 3D):
Instead of placing 50 rocks manually, create a Rock Scatter System.

Inputs:

• Area size
• Rock density
• Random scale range
• Random rotation

The system distributes rocks automatically in 3D space.

Principle:
Design logic that produces variation automatically instead of hand-placing every mesh.