Skip to main content

How to vibe code Code Blocks

Distributor steps to vibe code Encompass dashboard Code Blocks with AI using Local Edit in Chrome or Edge with VS Code Copilot, Cursor or Claude Code: preview, tests, screenshots. Requires v26.03+.

B
Written by Bailey Naas-Thornton

Minimum Version Required: 26.03

Pre-Conditions

What You'll Need Before You Start

Vibe coding lets you describe what you want in plain English and an AI agent builds it for you. No programming experience needed — just clear ideas about what you want to create.

Before you begin, make sure you have:

1. A Code Editor with an AI Agent

We recommend Visual Studio Code (VSCode) with GitHub Copilot — it's the most popular option and what this guide walks through. Download VSCode free at code.visualstudio.com.

Alternatives: You can also use Cursor or Windsurf — both are editors with AI built-in. The steps are nearly identical; we'll note differences as they come up.
​
​

2. An AI Subscription

  • GitHub Copilot — Included with VSCode. Requires a subscription ($10/mo individual or free for some accounts). Install the "GitHub Copilot" extension from the VSCode Extensions panel.

  • Cursor / Windsurf — AI is built into the editor. Each has its own subscription plan.

Most also include a free plan to get started, but note that they will commonly limit you to less intelligent AI models on the free plan.
​
​

3. A Modern Web Browser

Use Google Chrome, or Microsoft Edge. The Local Edit feature requires a modern browser that supports folder access — Safari and Firefox are not supported for this feature.
​
​

4. A Local Folder

Create an empty folder on your computer where your code files will live during editing. For example: Documents/EncompassCode. You'll point both Encompass and your editor to this folder.
​
​

5. Encompass Permissions

You need access to the Dashboard editor in Encompass. If you don't see the code editor or the "Local Edit" button, ask your admin to grant you the appropriate permissions.

Tip: If you're completely new to all of this, start by just installing VSCode and the Copilot extension. You can be up and running in under 10 minutes.

Steps

Step-by-Step: Your First Vibe Coding Session

Step 1: Set Up Your Editor

For VSCode + GitHub Copilot (Recommended):

  1. Download and install Visual Studio Code.

  2. Open VSCode. Click the Extensions icon on the left sidebar (it looks like four squares).

  3. Search for "GitHub Copilot" and click Install.

  4. Sign in with your GitHub account when prompted. If you don't have one, create a free account at github.com.

  5. You're ready! You should see a Copilot chat icon in your sidebar.

For Cursor: Download from cursor.com and install. AI is built in — just sign up and you're ready. When Encompass asks you to pick an agent, select "Cursor / Other".

For Windsurf: Download from windsurf.com and install. Same as Cursor — select "Cursor / Other" when prompted in Encompass.

Step 2: Open Your Code Block in Encompass

  1. Navigate to the Dashboard containing the Code Block you want to edit (or create a new one).

  2. Open the Code Block's editor — you'll see tabs for HTML, CSS, JavaScript, and Tests.

  3. Click the "Local Edit" button in the toolbar.

Step 3: Choose Your AI Agent

A dialog will appear titled "Dashboard Local Editing". You'll see a dropdown to select your coding agent:

  • GitHub Copilot — Choose this if you're using VSCode with Copilot

  • Claude Code — Choose this if you're using the Claude Code CLI tool

  • Gemini CLI — Choose this if you're using Google's Gemini CLI

  • Cursor / Other — Choose this for Cursor, Windsurf, or any other editor

Click Confirm.
​
​

Why does this matter? Each agent looks for its instructions in a different file. Encompass creates the right instruction file for whichever agent you pick, so the AI knows exactly how to work with your code.

Step 4: Select Your Local Folder

  1. Your browser will open a folder picker. Navigate to the empty folder you created (e.g., Documents/EncompassCode, or any folder location you want on your computer).

  2. Click Select Folder.

  3. Your browser will ask to grant read and write access — click Allow. This is required so the browser and your editor can share files.

Encompass will now download your code files into that folder. You'll see files like:

  • Dashboard_123_456.html — Your HTML code

  • Dashboard_123_456.css — Your CSS styles

  • Dashboard_123_456.js — Your JavaScript

  • Dashboard_123_456.test.js — Your test file

  • An instructions file for your AI agent

  • Skill files the AI uses for testing and screenshots

If you've edited this Code Block locally before, Encompass will ask whether to use your existing local files or reload fresh from the server. Choose "Reload" to start fresh, or keep your existing files to continue where you left off.

Step 5: Open the Folder in Your Editor

  1. Open VSCode (or your chosen editor).

  2. Go to File → Open Folder and select the same folder you picked in Step 4.

  3. You should see all the downloaded files in the file explorer on the left.

Step 6: Start Vibe Coding!

Now the fun part. Open the AI chat in your editor and describe what you want to build in plain English.

In VSCode: Open Copilot Chat from the sidebar, then switch to Agent mode (look for a dropdown or toggle at the top of the chat panel — switch from "Ask" or "Edit" to "Agent"). Agent mode lets Copilot read, write, and modify your files autonomously.

In Cursor / Windsurf: Use the built-in AI chat panel. These editors are already in agent mode by default.

Example prompts to try:

  • "Create a sales summary dashboard that shows total revenue, order count, and average order value in card layouts"

  • "Add a bar chart showing monthly sales trends"

  • "Make the layout responsive so it looks good on mobile"

  • "Change the color scheme to use blues and grays"

The AI will read the instruction files that Encompass created, understand the Encompass SDK and Design System, and write code that works within your Code Block.

Step 7: Preview Your Changes

Back in your browser, you'll see a preview panel showing your Code Block rendered live. As the AI writes code in your local files, you can see results by clicking Refresh Preview in the preview toolbar.

The preview toolbar buttons (left to right):

  • Refresh Preview — Reloads the preview with your latest local code

  • Reload Code to Local — Overwrites local files with the web editor version

  • Save Code Changes — Pushes your local code back to the web editor

  • Save & Run Tests — Saves and runs your test suite

  • Close Preview — Ends the local editing session

Step 8: Let the AI Run Tests and Take Screenshots

Your AI agent has two powerful built-in skills:

  • Running Tests: The AI can run your Code Block's test suite by writing a small signal file. Encompass picks it up within a few seconds, runs the tests in the real browser environment (with full access to the Encompass SDK), and returns detailed results — including pass/fail status, code coverage percentage, and specific line-by-line coverage data. The AI reads these results and fixes any issues automatically.
    ​
    ​

  • Taking Screenshots: The AI can also request a screenshot of the live preview. Encompass captures the rendered output and saves it as an image file that the AI can see. This lets the AI visually verify layouts, fix alignment issues, and refine the design — all without you having to describe what's wrong.
    ​
    ​

Important: Tests run in the browser, not on your computer. The AI should never try to run npm test or other local test commands — it won't work. The instruction files Encompass created already explain this to your AI agent.

Step 9: Save Your Work

When you're happy with the result:

  1. Click Save Code Changes in the preview toolbar to push your local code back into the Encompass web editor.

  2. Review the code in the web editor if you'd like.

  3. Save and publish your Code Block through the normal Encompass workflow.

Step 10: Iterate and Improve

Vibe coding is iterative. Don't try to describe everything in one prompt. Instead:

  1. Start with the basic structure and layout.

  2. Ask the AI to add features one at a time.

  3. Use screenshots and tests to verify each change.

  4. Refine the design and behavior as you go.

You can come back to Local Edit any time to make changes — your previous files will still be in your local folder, and Encompass will ask if you want to continue from where you left off.

Fields And Definitions

Key Terms and Concepts

Term

What It Means

Vibe Coding

Describing what you want in plain English and letting an AI agent write the code for you. You guide the direction; the AI handles the technical details.

Code Block

An Encompass Dashboard item that contains custom HTML, CSS, and JavaScript. This is what you're building when you vibe code.

Local Edit

The feature that downloads your Code Block files to your computer so you can edit them with an AI-powered editor instead of the built-in web editor.

AI Agent

Software that can read, write, and modify code files on your behalf. Examples: GitHub Copilot (in Agent mode), Cursor's AI, Claude Code.

Agent Mode

A setting in VSCode's Copilot that allows it to autonomously edit files (not just suggest). You must switch to Agent mode for vibe coding to work.

Prompt

The plain English instruction you type to tell the AI what to build or change. Better prompts give better results.

Skills

Built-in capabilities that Encompass gives your AI agent. Currently: test-runner (run unit tests), screenshot (capture the visual preview), and unit-test-writer (guidance for writing tests).

Commands Folder

A folder created in your local directory where the AI agent and browser communicate. The AI writes command files; the browser reads them, executes the action, and writes result files back.

Preview Panel

The live-rendered view of your Code Block shown in the browser during Local Edit. Updates when you click Refresh or when tests/screenshots are triggered.

Instruction File

A file Encompass generates (e.g., copilot-instructions.md or CLAUDE.md) that teaches your AI agent about the Encompass SDK, design system, and how to use the test/screenshot skills.

Code Coverage

A percentage showing how much of your JavaScript code is exercised by your tests. Higher coverage means more of your code has been verified to work correctly.

Encompass SDK

The built-in JavaScript library available in Code Blocks. It provides functions for calling APIs, formatting data, and interacting with other parts of Encompass.

Best Practices

Best Practices for Vibe Coding
​
​

Start Simple, Build Up - Don't try to describe your entire vision in one massive prompt. Start with the basic structure — "Create a page with a header and three data cards" — then layer on complexity in follow-up prompts. This gives you more control and makes it easier for the AI to get things right.

Be Specific in Your Prompts - Instead of "make it look better," try "increase the font size of the header to 24px, add 16px padding around each card, and use a light gray background." The more specific you are, the more accurate the result.

Use Screenshots Often - Let the AI take screenshots frequently so it can see what the page actually looks like. This is especially useful for layout and styling work. After asking for visual changes, tell the AI to take a screenshot and verify the result. If something doesn't look right, just describe the issue and ask it to fix it. You can even take your own screenshots, draw on them what you want, and pass those into your AI coding agent directly in its chat (drag and drop it in).

Let the AI Write and Run Tests - Tests catch bugs early. Ask the AI to write tests for your logic and run them regularly. Aim for at least 80% code coverage — the AI can see coverage results and will add more tests to fill gaps if you ask it to.

Use the Encompass Design System - Your AI agent's instruction file includes the Encompass Design System documentation. Ask it to use Design System components and styles — this ensures your Code Block looks consistent with the rest of Encompass. For example: "Use the Design System card component for the layout."

Don't Fight the AI — Guide It - If the AI goes in a direction you don't like, don't try to micro-manage every line. Instead, explain the overall direction: "I want a cleaner, more minimal look" or "This should be a data table, not a list of cards." Let the AI figure out the implementation details.

Save Frequently - Click Save Code Changes periodically to push your local code back to Encompass. This protects your work and lets you see it in the full Encompass environment, not just the preview panel.

One Feature at a Time - After each new feature or change, take a screenshot, run tests, and verify everything works before moving on. It's much easier to fix issues when you know exactly which change caused them.

Keep the Browser Tab Open - The preview panel must stay open in your browser for Local Edit to work. It's what runs your tests, takes screenshots, and syncs your files. If you accidentally close it, just click "Local Edit" again and select the same folder — Encompass will reconnect to your existing files. If you think it has disconnected from local, use the refresh button to reconnect it; you will get the permission pop-ups from the browser again if it was disconnected.

Did this answer your question?