Grok Build 101: Environment Setup and Building a Simple App

Purpose of This Article

Target Audience

This article is aimed at the following readers:

• People who are interested in Grok Build but find the setup daunting.
• People who have tried Grok Build but find the terminal mode difficult to use.
• People who have been using Claude + Cursor and want to evaluate Grok Build as well.

What Exactly Is Grok Build?

Grok Build is an AI coding agent developed by xAI. It becomes easier to understand when compared to the following roles:

• A systems consultant that proposes requirements for the development target through dialogue with you
• A systems architect that proposes the architecture of the development target
• A Scrum Master that creates a phased development plan
• A test engineer that defines checkpoints at each stage
• A team of engineers that implements and tests according to the plan (up to 8 in parallel at no extra cost)
• The ability to review and adjust if issues are found at intermediate checkpoints

In short, it includes all the functions of a systems integrator. And because it is AI rather than human, development time for each step is at most about an hour. Once you master it, you can achieve system development on a completely different level from the past.

Click to enlarge

But Grok Build Is...

It is also true that many people find Grok Build hard to approach. Grok Build itself is a command-based system that runs in the terminal, which may feel difficult for those accustomed to Visual Studio Code and similar tools. This article introduces one solution to that problem.

VS Code + Grok Build Extension + DevContainer

To address the difficulty of using Grok Build on its own, this article introduces the following setup:

• Use Visual Studio Code as the editor. Even people who are not comfortable operating files or Git via commands can feel at ease.
• Install the Grok Build extension for VS Code. You can operate Grok Build from the VS Code chat window and easily see which mode you are currently in.
• Isolate the development environment with DevContainer. Even if you make a mistake operating Grok Build, the risk of damaging your computer’s settings is almost eliminated. For team development, the same environment can be easily copied.

Environment Setup

Prerequisites

Subscription required for Grok Build

One of the following is required:

• SuperGrok
• X Premium+ (People with X Premium+ can also use SuperGrok. Those with only X Premium should upgrade to Premium+.)

Computer

The following operating systems are supported. It cannot be used from an iPad.

• Mac
• Windows (WSL2 is required for the container environment described later)
• Linux

Container Environment

If you do not already have one, install one of the following:

• Docker Desktop
• Rancher Desktop (recommended)
  • Kubernetes setting = Off
  • Container Engine = dockerd (moby)
  • Allocate about half of the host’s CPU and memory

Visual Studio Code

• If you do not already have it, install Visual Studio Code.
• Then install Microsoft’s Dev Containers extension.

Get a Vercel Account

• We will deploy the built app to Vercel.
• If you do not have an account, Sign up. It is free.

Setting Up the Working Directory

• Create an appropriate directory (example: $HOME/Documents/Grok/evaluation).
• Open that directory in VS Code.
• Create a .devcontainer directory under it.
• Create the following three files under .devcontainer:

{
    "name": "Grok Build Dev ContainerEnvironment",
    "build": {
        "dockerfile": "Dockerfile"
    },
    "features": {
        "ghcr.io/devcontainers/features/git:1": {},
        "ghcr.io/devcontainers/features/github-cli:1": {},
        "ghcr.io/devcontainers/features/docker-in-docker:4.0.0": {},
        "ghcr.io/devcontainers/features/node:2.1.0": {
            "version": "22",
            "nodeGypDependencies": true
        }
    },
    "postCreateCommand": "sh .devcontainer/postCreate.sh",
    "remoteUser": "vscode",
    "customizations": {
        "vscode": {
            "extensions": [
                "PawelHuryn.grok-vscode-phuryn"
            ],
            "settings": {
                "editor.formatOnSave": true,
                "editor.defaultFormatter": "esbenp.prettier-vscode",
                "typescript.tsdk": "node_modules/typescript/lib"
            }
        }
    },
    "forwardPorts": [
        3000,
        3333,
        8000
    ],
    "portsAttributes": {
        "3000": {
            "label": "App",
            "onAutoForward": "notify"
        },
        "8000": {
            "label": "API",
            "onAutoForward": "notify"
        }
    },
    "mounts": [
        // Uncomment to use host SSH keys for git remotes
        // "source=${localEnv:HOME}/.ssh,target=/home/vscode/.ssh,readonly,type=bind,consistency=cached"
    ]
}

FROM mcr.microsoft.com/devcontainers/base:ubuntu-24.04

RUN apt-get update && apt-get install -y \
    build-essential \
    curl \
    wget \
    vim \
    sudo \
    python3 \
    python3-pip \
    && rm -rf /var/lib/apt/lists/*

RUN echo "vscode ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers.d/vscode \
    && chmod 0440 /etc/sudoers.d/vscode

#! /bin/bash

curl -fsSL https://x.ai/cli/install.sh | bash
npm install -g vercel

Starting the DevContainer

1. Click the gear icon in the lower left of the VS Code window.
2. Select Command Palette... from the menu that appears.
3. From the command candidates at the top of the VS Code window, select Dev Containers: Rebuild and Reopen in Container.
4. When Done. Press any key to close the terminal. appears, press any key to finish preparation. (The first time it may take several to more than ten minutes.)

Click to enlarge

Click to enlarge

Logging In to Grok Build

1. Type grok in the VS Code terminal.
2. When “Do you want Code to open the external website?” appears, click the Open button.
3. Complete authentication in the browser that opens.

Checkpoints

1. Select GROK in the Chat window. Selecting CHAT will force you into coding with Copilot.
2. Confirm that Grok Build shows as Connected.
3. Model should be Grok Build 4.5.
4. Confirm that you can switch between Agent Mode and Plan Mode.

Your First App

As a way to verify that everything works, let’s build a very simple app. Switch to Plan mode and give it an instruction like the following:

For practice with Grok Build, please create a plan to build the following app.
- An app that “divines” numbers for the American lottery “Powerball”
- It is fortune-telling only, not an attempt to predict winning numbers.
- It should work in a PC or mobile browser
- Flashy presentation similar to a slot machine
- Deployment target is assumed to be Vercel

Please propose three possible implementation approaches, compare their pros and cons, and also explain how to test locally after implementation and how to deploy to Vercel from the command line.

Development then proceeds through dialogue with Grok along the following flow.

Once everything is finished, the necessary files and a README.md are generated. The README.md also contains instructions for running locally and deploying to Vercel.

Deploying to Vercel

The generated README.md also introduces the steps for deploying to the Vercel environment. Try the following procedure:

# A browser authentication screen will appear — select Allow

npx vercel

# Select Create a new project
# Then choose the defaults for the rest

Access the URL shown under Aliased and you should see the app you just developed running.

Summary and Preview of the Next Article

This article introduced the environment setup steps for operating Grok Build from VS Code and the process of building a very simple app. The app itself is just a “lottery number fortune-telling” tool, but did you notice that non-functional requirements such as the disclaimer “This is just fortune-telling — do not take it seriously” (to avoid legal risk) were defined and implemented?

This is an example of the “systems consulting capability” of Grok that was explained at the beginning. Even with more complex systems, it will propose these kinds of insights.

In the next article, I will explain a deployment pipeline that efficiently repeats the develop → deploy → fix → deploy loop.