Getting started with VibeCraft

VibeCraft is a service where you can create and publish websites and web applications by chatting with AI in a natural language without any coding.

Describe in the chat what you want to create, and VibeCraft will code a full-blown app you can edit in SourceCraft – both frontend and backend – show you a preview, and publish the app to Yandex Cloud.

The service shortens your path from an idea to an MVP or even a full product: you need no sophisticated tools or designer/developer skills. For example, you can use VibeCraft to create and publish a landing page, an online course website, a finance accounting app, a sports and health tracker, a game, or even a CRM system.

What else you can create

Warning

This feature is currently at the Preview stage and is not covered by an SLA.

We charge fees for using SourceCraft and Yandex Cloud resources.

To get started:

  1. Describe your idea
  2. Review the preview version
  3. Optionally, add your own files to the project

Describe your idea

  1. Open the VibeCraft home page.

  2. In the chat window, describe your concept for a website or application, for example:

    Create a website for calculating body mass index based on user input. The calculations should be saved,
and there should be a way to track progress on a graph. Add recommendations and 
infographics for different scores.

    To attach files to the prompt, click and select them on your computer. You can also drag-and-drop your files from the file explorer window on your computer to the chat window.

    To select a project template, click Template and select a suitable option:

    • Auto: VibeCraft selects a template based on the project description.
    • Web service: Backend-powered application.
    • Site: Client-only static website.

    Click .

    Based on your prompt, VibeCraft will automatically create a project and a SourceCraft repository with the same name.

    Warning

    Interacting with VibeCraft in the chat consumes Code Assistant neurocredits.

    Your remaining neurocredit balance is displayed on the bottom panel of the chat window.

  3. VibeCraft structures your prompt into a concise task statement. Optionally, edit it and click Accept.

  4. VibeCraft will generate and display a form describing the key features of your future app and additional information. Make your edits and click Accept.

  5. The Project docs tab with a detailed project implementation plan will open in the main window. To make changes, describe them in the chat.

    In the bottom-right corner, click Accept.

Note

Project documentation is stored in the dedicated SourceCraft repository at <project_name>/.vibecraft/docs.

What should I do if the task gets stuck or fails with an error?

Review the preview version

Once you approve the plan, VibeCraft will start building your application in real time.

Tip

You can interrupt the process in VibeCraft at any time. Do it by clicking Stop in the chat window. The entire project context will be saved.

To resume VibeCraft, type a command in the chat, e.g., Resume.

The Preview tab with a preview version of your application will open in the main window.

VibeCraft will notify you in the chat when the build is ready with a brief overview of how to use the application or website.

Test your application. To make fixes or improvements, describe them in the chat.

To specify a particular item you want fixed, click in the chat window and select the item in the Preview tab. It will now appear in the chat context. Describe how you want to edit it and send the message.

Top preview toolbar options:

  • To see how the website or web application looks on a smartphone or tablet screen, click and select one of the following options:

    • Cell phone · 390 × 844
    • Tablet · 768 × 1024

    To switch to landscape orientation, click  Rotate device.

    To return to regular view, click  Exit emulation.

    Tip

    Switch between modes and check the layout while working to make sure everything looks correct on smaller screens as well.

  • Click to refresh the preview page.

  • Click to open the website in a new browser tab.

    Warning

    The website link is temporary, but you can use it to share the preview version.

    Anyone with the direct link can access the website while it is under development.

  • To open a specific page, type its path into the address bar, e.g., /about-us.

You can view and edit the project code in the SourceCraft repository. To open the repository, click View code on SourceCraft in the upper-right corner.

Optionally, add your own files to the project

The Asset manager tab allows you to upload images, manage them, and add them to the chat context.

To upload images, click Upload image and select the files on your computer.

For uploaded files, the following options are supported:

  • Search by name.
  • Grid and Table mode display.
  • Sorting by one of the following: Name, Usage, File type, or Size.
  • Preview.
  • Commands: Download, Open in new tab, Rename, Duplicate, and Delete.

To add files to the chat context, use one of these methods:

  • In the chat window, click and select one of the following options:
    • Upload an image: To upload new files.
    • Asset manager: To select already uploaded files.
  • On the Asset manager tab, select one or more files and click Add to prompt.

The files you add will appear above the message input field. To remove a file from the context, click on its thumbnail.

In the chat window, specify where to put the newly added files, for example:

Put this image below the introductory paragraph.

After VibeCraft generates the new page, test the application again.

Note

Your files are stored in a dedicated SourceCraft repository at <project_name>/.vibecraft/assets.

What's next

Useful links

Next
Publishing a project