Calvin Usage Guide for VTEX IO
Configuration Steps
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:
Navigate to the 'Repository' folder on settings.
Select the option to connect to a repository and complete all required fields:
GitHub
Bitbucket
GitLab
Choose the branch you want to work with.
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
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.
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:
Click the 'Settings' button
Navigate to the 'VTEX IO' folder
Complete the required fields.
Execute the link process.
Link Verification
It is recommended to verify that the process was completed successfully:
Click the 'Settings' button
Navigate to the 'Sandbox' folder
Check that there are no compilation errors
Suggestion for Pixel Perfect Implementation
To request a pixel perfect component implementation from Calvin, it is recommended to follow this workflow:
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.
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 urlThis 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.
Last updated