Vibe Coding

In-App Navigation

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

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

Undo 2

Reverts your Space to the version from before this specific prompt. Any changes made while the prompt was running will also be reset.

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

Attach File 4

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.

Vibe Tab 5
The Vibe tab displays the currently active Vibe you are editing. Only one Vibe can be active at a time, but the Space Agent can edit multiple Vibes in the background.

More information about the Space Agent can be found 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.

Settings 79

Clicking the selected model opens the Space Agent Settings. Here, you can configure the following options:

• Usage Limit: Depending on your subscription and available top-up budget, this section shows how much of your usage limit you have already consumed. The percentage increases with each prompt. The hourly indicator shows your usage within the current hourly period, while the weekly indicator shows your usage within the current weekly period. The remaining time until each limit resets is displayed next to it.

• Top Up: Instead of purchasing or upgrading a subscription, you can make a one-time payment to increase your available usage. The purchased budget does not expire and can be used regardless of when it was added. Your included subscription limits are always used first. The top-up budget is only used after those limits have been exhausted.

• Notify Me When Done: Enables a browser notification when the Agent has completed the requested changes. This is particularly useful when you are working on another Space in a different browser tab. Notifications can only be received while at least one Arrival.Space tab is open. This setting must be enabled separately in each browser and on each device, such as desktop and mobile, as it is not synchronized across browsers or devices.

• New Conversation: Starts a new conversation and compresses the context from the previous conversation. The context contains the information and previous instructions the AI Agent uses to understand your current task. Starting a new conversation can help when the existing context has become too long or is no longer relevant.

• Model: Select the model you want the Agent to use. The following models are available:

  • GLM-4.7 Flash: A nearly free model intended for very simple tasks. It is not recommended for complex requests. Even tasks such as generating a mesh may already be too demanding for this model.
  • Sonnet 5: Recommended for standard Vibe changes and clearly defined features.
  • Opus 4.8: Recommended for complex or slightly ambiguous requirements, as well as larger changes.
  • Fable 5: Designed for complex and challenging tasks. It is particularly capable of working with unfamiliar tools or finding solutions that are not clearly documented.
  • GPT-5.6 Luna: Best suited for small, clearly described changes. It is primarily intended for questions about Arrival.Space features and functionality, but it can also handle some less complex tasks, such as basic mesh generation.
  • GPT-5.6 Terra: The recommended default model for most Vibe tasks. It is suitable for standard features, UI changes, manageable bugs, and changes involving multiple related files.
  • GPT-5.6 Sol: Intended for complex features, difficult bugs, major refactorings, and tasks that require the model to plan independently over an extended period or coordinate multiple tools and files.

Send Message 8

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 3. 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.

Clicking the lower section 2 opens the Vibe Details UI, which includes a preview of the Vibe, information about its creator, the option to like the Vibe, a description, and a list of all public Spaces in which the Vibe has been used.

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 1 to save your Vibe.

Before saving your Vibe, give it a meaningful title and add a description 2.

The following save options are available:

• Save as New: Creates a new template. Use this option whenever you do not want to update an existing template. This is the default option when saving a Vibe for the first time.
• Public: Saves the template to Your Vibes and also publishes it in the Community section.
• Update copies already placed: Updates existing instances of this Vibe that have already been placed in Spaces.

When saving the Vibe, a screenshot is captured from the current Space and added automatically. You can replace this image later.

Edit Vibe Details

The Vibe Details help users understand how a Vibe should be used and should include relevant information about its functionality. This is especially useful for parameters whose purpose may not be immediately clear from their names.

Open the Side Panel > Vibes and switch to Your Vibes. Hover over the desired entry. The icon appears in the top-right corner and opens a submenu. Select Edit Details 1 to open the UI.

At the top, you can update the screenshot 2. Click the camera icon to capture a screenshot from your current position in the Space.

3 allows you to update the title and description.

Finally, you can add your Vibe to the Community Templates by enabling the Public toggle 4.

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.

Edit Details

Opens the Edit Vibe Details UI, where you can update the title, description, and image.

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.

Publish 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.