> For the complete documentation index, see [llms.txt](https://help.smartico.ai/welcome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smartico.ai/welcome/products/vibe-studio-beta.md).

# Vibe Studio (Beta)

Vibe Studio is a design studio built right into the Smartico Back Office. It lets you create your own custom, on-brand interface for any gamification feature - missions, levels, tournaments, raffles, stores, mini-games, avatars, leaderboards, badge&#x73;**,** and more - **without writing code**. You describe what you want in plain English; an AI assistant builds it; a live preview updates as you go; and one click takes it live.

{% hint style="info" icon="bell" %}
**Check examples of the widgets, landings, promotions, and custom games on** [**https://smartico.dev**](https://smartico.dev/)
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/nj2BwYZtyFLmYv5XQMvx" alt=""><figcaption></figcaption></figure></div>

### What you can build

{% hint style="danger" %}
Note: if you didn't have previous experience in AI-assisted development, you need to consider the following:

* Don't trust claims from AI that everything is done and working; always do deep testing
* It's easy to start and hard to finish - your first results could be impressive, but to get to the final, production-ready version, it will take many attempts
* If you stack, you can ask Smartico support to assist.
  {% endhint %}

Vibe Studio manages four kinds of player-facing experiences:

| You want…                                        | Build a…        | Audience           | How players reach it                                 |
| ------------------------------------------------ | --------------- | ------------------ | ---------------------------------------------------- |
| Gamification embedded in your existing site      | **Widget**      | Logged-in players  | A one-line JavaScript snippet you paste on your site |
| A page for one promotion (a tournament, raffle…) | **Promotion**   | Existing players   | A link you share from campaigns                      |
| A page to attract and convert new visitors       | **Landing**     | Anonymous visitors | A public URL you point traffic at                    |
| Your own branded reward game                     | **Custom Game** | Players / visitors | Embedded where you want it                           |

Each has its own article: [**Widgets**](/welcome/products/vibe-studio-beta/widgets.md), [**Promotions**](/welcome/products/vibe-studio-beta/promotions.md), <mark style="background-color:$warning;">**Landings**</mark>, and <mark style="background-color:$warning;">**Custom Games**</mark>.

#### How it fits with the rest of Smartico

Smartico supplies the **data and the rules** - the missions, prizes, balances, segments/eligibility, all configured elsewhere in the Back Office. Vibe Studio supplies the **look, the layout, and the experience** on top. A tournament leaderboard you design here still pulls its live rankings from Smartico; a custom wheel still draws its prizes from your Random Rewards setup. You design the presentation; Smartico powers what's behind it.

### The two halves of Vibe Studio

* **The list screens** - *Widgets, Landings, Promotions, Custom games* - where you create and open your projects.
* **The Studio** (the editor) - opens when you create or open a project. It has a **live preview**, an **AI chat** where you give instructions, and your project files. Most of your time is spent in the chat, describing what you want and watching it appear.

<div data-with-frame="true"><figure><img src="/files/RyGDcHbU0hBzKmsOKvtD" alt=""><figcaption></figcaption></figure></div>

### Usage and limits

Vibe Studio itself - the editor and the AI assistant - is included for every Smartico client at no extra cost.

As your usage grows, there are three resources worth keeping an eye on. For most clients, the included allowances are comfortable enough; this section explains what they are and a few easy habits to stay well within them.

**AI assistant tokens**

The AI assistant in Vibe Studio runs on **AI tokens**, drawn from the same monthly pool your Smartico [AI agents](/welcome/products/ai-agents.md) use. Each client gets **10 million tokens per month**. That's plenty for regular design work, and if you need more, your Success Manager can request a higher limit, which is paid for separately.

A couple of things worth knowing:

* Only the **AI assistant** spends tokens. If you edit the code by hand in the Studio or [download the project and edit it on your own computer](/welcome/products/vibe-studio-beta/versions-backups-and-local-editing.md#download-and-upload-a-project-for-power-users), that work costs **no tokens**.
* Small habits help: run **`/clear`** when you move to a new task, so each conversation stays lean. See [Slash commands](/welcome/products/vibe-studio-beta/slash-commands.md) for more details.

**CDN traffic**

Your published **l**andings, widgets, promotions, and custom games are served to players from Smartico's servers on Amazon CloudFront (a global CDN), so they load quickly anywhere. Your base package includes 650 GB of CDN traffic per month.

To put that in perspective: if a landing page (with all its images) weighs about 1 MB to download, 650 GB is enough to serve it roughly 650,000 times. Traffic beyond the included amount is billed at 0.1 EUR per GB.

The easiest way to stay light is to keep your media small - large images, video, and audio are what use up traffic fastest. Ask the assistant for optimized images, and reach for video only when it truly earns its place.

**Fair use of impressions**

Every time a widget, landing, or promotion is shown to a player, it counts as one **impression**. Impressions place a load on the Smartico infrastructure, so we measure them to keep usage fair across all clients.

One practical guideline: please **avoid using landing pages as "pop-under" ads** on advertising channels. That generates a lot of impressions for very little conversion - an inefficient load for everyone. Landings perform best where a visitor has chosen to engage, so use them there.

**In short**

None of this needs action for typical use - the included allowances cover the vast majority of clients. If you're planning a high-volume campaign, have a quick word with your Success Manager so we can set you up comfortably.

| Resource                              | Included per month | Beyond that                  |
| ------------------------------------- | ------------------ | ---------------------------- |
| **AI tokens** (shared with AI agents) | 10,000,000         | Raised on request            |
| **CDN traffic** (Amazon CloudFront)   | 0.65 TB            | Billed at AWS rates          |
| **Impressions**                       | Fair-use, measured | Contact your Success Manager |

### FAQ

**Do I need to know how to code?** No. You describe what you want in plain English, and the assistant writes and edits everything. You *can* hand-edit code if you want to, but it's optional.

**Where does the content come from?** From Smartico. Vibe Studio builds the presentation; the mechanics, prizes, balances, and scheduling are configured elsewhere in the Back Office and delivered live to your page.

**Who can use it?** Any operator on a label that has the Vibe Studio product enabled. Ask your Success Manager if you don't see it.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.smartico.ai/welcome/products/vibe-studio-beta.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
