Ctrlk

Calvin Usage Guide for VTEX IO

Configuration Steps

1

Create a Workspace in VTEX IO

The first step is to create a workspace within Calvin for VTEX IO. Depending on what you want to build, you must choose between:

  • VTEX Store Theme workspace

  • VTEX Custom App workspace

  • VTEX Admin workspace

Make sure to select the option that matches your project type.

2

Connect a Project or Template

Once the workspace is created, you have two options: use our VTEX template or connect to an existing repository. In either case, navigate to settings by clicking the Settings button.

Use a Template

You can create a new project from a base template. To do so, click the 'Use template' button and wait for the template to be added

Connect to an Existing Repository

To connect Calvin to an existing repository:

  1. Navigate to the 'Repository' folder on settings.

  1. Select the option to connect to a repository and complete all required fields:

  • GitHub

  • Bitbucket

  • GitLab

  1. Choose the branch you want to work with.

  2. In the settings section, define the behavior when a chat is completed:

    • Automatically merge into the selected branch

    • Create a Pull Request to the selected branch

This configuration determines how Calvin will handle the code changes generated when a chat is completed.

3

Select the Correct Documentation

Inside Calvin’s settings, on the 'Repository' folder, you must select the type of documentation you will be working with.

Available options:

  • VTEX IO

  • VTEX Admin

  • VTEX Custom App

It is important to select the option that corresponds to the type of workspace you previously selected.

4

Perform the First VTEX Link

After configuring the repository, it is necessary to run a VTEX link to your previously created VTEX IO workspace.

To do this:

  1. Click the 'Settings' button

  2. Navigate to the 'VTEX IO' folder

  1. Complete the required fields.

  2. Execute the link process.

Link Verification

It is recommended to verify that the process was completed successfully:

  1. Click the 'Settings' button

  2. Navigate to the 'Sandbox' folder

  1. Check that there are no compilation errors

This initial link is essential because it allows Calvin to recompile the project and validate that generated changes do not contain errors.

5

Using Calvin in the Project

Once all previous steps are completed, Calvin is ready to be used in your VTEX IO project.

Suggestion for Pixel Perfect Implementation

To request a pixel perfect component implementation from Calvin, it is recommended to follow this workflow:

  1. Attach the HTML file containing the component design. This HTML can be extracted from the UI/UX workspace. For more information on how to do this, see the UI/UX workspace documentation.

  2. Include a base prompt adapted to the component you want to develop.

Recommended Prompt

Create a pixel perfect implementation of the following <component>, 
the design must be pixel perfect with the html file.

Requirements:
- Examine the html file “<html file>”
- Study the existing design implementation in detail
- Ensure pixel perfect accuracy to the original design
- Don’t use Tailwind to make the implementation
- It’s important that you use the exact same SVGs used on the html file
- Study the current implementation before starting, you can find it on <VTEX workspace URL>
- To check it after a change, you must restart the vtex link and probably reload the page of the url

This prompt can be adapted and expanded according to the project’s needs by adding additional requirements or specific instructions.

Recommendations

  • Always check the logs after each VTEX link.

  • Visually review the generated implementations before completing a chat.

  • Use clear and specific prompts for better results.

  • When developing something complex, better and faster results are usually achieved by dividing the work into smaller, manageable parts. Instead of requesting everything in a single prompt, it is recommended to modularize what you want to achieve. For example, you can first ask Calvin to build only the base structure of the component, ensuring that all elements are correctly organized and positioned. Once that structure is validated, you can then request the pixel perfect design, adjusting styles, spacing, typography, and visual details.

PreviousShopify themeNextMagento

Last updated