本文へスキップ
Masa Nakamura Blog
Grok Build Logo over San Francisco Bay Bridge

Grok Build 101: 環境設定と簡単アプリ構築

公開日
カテゴリ
タグ

Grok BuildをコマンドラインからではなくVisual Studio Editorから実行するための環境設定。DevContainerを使うことで、誤操作などでの被害を最小限に食い止める安全志向。最後に超簡単なアプリを開発し、Vercelにデプロイ。

この記事の目的

想定読者層

以下のような読者層を想定しています。

  • Grok Buildに興味があるけど、設定が大変そう。
  • Grok Buildを使ってみたけど、ターミナルモードが使いにくい。
  • Claude + Cursorを使ってきたけど、Grok Buildも評価したい。

Grok Buildって何者？

Grok BuildはxAIが開発したAIコーディングエージェントですが、以下のように例えるとわかりやすいでしょう。

  • あなたとの対話を通じて以下を実行
    • 開発対象の要件を提案するシステムコンサルタント
    • 開発対象のアーキテクチャを提案するシステムアーキテクト
    • 段階的に開発する計画を立案するスクラムマスター
    • 各段階での確認事項を立案するテストエンジニア
    • 計画に沿って実装・テストを実行するエンジニア群
      • 追加料金なしで8並列まで可能
    • 途中の確認ポイントで不具合があったら、見直し可能
Grok Buildイラスト

要はシステムインテグレータの機能をすべて含んでいます。しかも、人間ではなくAIなので、各ステップの開発時間はせいぜい1時間。つかいこなせば、従来とは全く別次元のシステム開発が実現できます。

でもGrok Buildって ...

Grok Buildはとっつきにくい、という声が多いのも事実です。Grok Build自体はターミナルで動くコマンドベースのシステムで、Visual Studio Codeなどに慣れた人には使いづらいかもしれません。その解決策の一つを紹介するのが今回の記事です。

Grok Build TUI操作動画・要はとっつきにくい

VS Code + Grok Build拡張 + DevContainer

Grok Build単体のとっつきにくさを解決するために、本記事では以下の設定を紹介します。

  • エディタにVisual Studio Codeを利用。
    • コマンドでファイルやGitを操作するのが苦手な人も安心。
  • VS CodeのGrok Build拡張を導入
    • VS CodeのチャットウィンドウからGrok Buildを操作できる
    • 現在どのモードにいるのかなどが簡単に把握できる
  • DevContainerで開発環境を隔離
    • 万一、Grok Buildの操作ミスをしてもパソコン側の設定が破壊されるリスクはほぼなくなる
    • チーム開発する場合、同じ環境を簡単にコピーできる

環境設定

事前準備

Grok Buildに必要なサブスクリプション

以下のどちらかが必要

  • SuperGrok
  • X Premium+
    • X Premium+に入っている人は、SuperGrokも使えます！
    • X Premiumだけの人はPremium+にアップグレードしてください。

パソコン

以下のOSなら使えます。iPadからは使えないです。

  • Mac
  • Windows
    • 後述のコンテナ環境のために、WSL2が必須です
  • Linux

コンテナ環境

まだの人は以下のいずれかをインストールする必要あり。

Visual Studio Code

Vercelアカウント取得

  • 構築したアプリをVercelにデプロイします。
  • アカウントを持ってない人はSign-upしてください。無料。

作業ディレクトリの設定

  • 適切なディレクトリを作成
    • 例: $HOME/Documents/Grok/evaluation
  • VS Codeでそのディレクトリを開く
  • そのディレクトリ配下に .devcontainer というディレクトリを作成
  • .devcontainer 配下に以下の3つのファイルを作成
devcontainer.json
{
    "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"
    ]
}
Dockerfile
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
postCreate.sh
#! /bin/bash

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

DevContainerの起動

  1. VS Codeウィンドウ左下にある歯車アイコンをクリック
  2. でてくるメニューからCommand Palette... を選択
  3. VS Codeウィンドウ上部のコマンド候補から Dev Containers: Rebuild and Reopen in Container を選択
  4. Done. Press any key to close the terminal.　が表示されたら、なにかキーを押して準備完了。
    1. 初回は数分から10数分時間がかかります
歯車アイコンをクリックして、Command Palette...を選択
Command Paletteから DevContainers: Rebuild and Reopen in Containerを選択

Grok Buildにログイン

  1. VSCodeのterminalに grok と入力。
  2. Do you want Code to open the external website? と表示されるので、Openボタンをクリック
  3. ブラウザで認証画面が開くので認証を完了
grok loginと入力し、Openボタンを押してブラウザを起動
ブラウザ画面で承認
Grokにログインした直後のVS Code画面

確認ポイント

  1. Chat窓のGROKを選択すること。CHATを選ぶとCopilotでコーディングする羽目になります。
  2. Grok BuildがConnectedになっていること。
  3. ModelはGrok Build 4.5
  4. Agent ModeとPlan Modeが選べること
CHATではなくGROKを選択
Grok 4.5が選択されていること
Plan ModeとAgent Modeを切り替えられることを確認。

最初のアプリ

動作確認を兼ねて、超簡単なアプリを作ってみます。　Planモードにして以下のような指示を与えてみます。

Grok Buildの練習のために、以下のようなアプリを構築する計画を立ててください。
- アメリカの宝くじ「Power Ball」の番号を占うアプリ
- 当選予想ではなく、あくまでも占い。
- パソコンや携帯のブラウザで動作
- 派手なパチンコみたいな演出
- デプロイ先はVercelを想定

どのような実装方法があるか、案を３つ出して、優劣の比較をしてください。また、実装後にローカルでテストする方法と、Vercelにコマンドラインからデプロイする方法を説明してください。

以下のような流れでGrokと対話しながら開発が進んでいきます。

プロンプト投入と開発実行

一通り終了すると、必要なファイルや説明書(README.md)が生成されます。ローカルでの実行手順やvercelへのデプロイ手順などもREADME.mdに記載されています。

サンプルアプリのローカル実行例

Vercelへのデプロイ

生成されたREADME.mdにはVercel環境へのデプロイ手順も紹介されています。以下の手順を試してみてください。

npx vercel login

# ブラウザで認証画面が出るのでAllowを選択

npx vercel

# Create a new projectを選択
# あとはデフォルトを選択

Aliasedで示されるURLにアクセスすると、今開発したアプリが動いていることがわかるはずです。

まとめと次回予告

Grok BuildをVS Codeから操作するための環境設定手順と、超簡単なアプリ開発手順を紹介しました。アプリ自身はただの「宝くじ番号占い」ですが、「占いだから信じないで」と法的リスクを回避するための文言のような「非機能要件」が定義されて実装されていることにお気づきでしょうか？

このあたりが、冒頭で解説したGrokの「システムコンサルティングの能力」に相当します。より複雑なシステムになっても、このような「気づき」を提案してくれます。

次回は、開発→デプロイ→修正→デプロイというループを効率よく繰り返すためのデプロイパイプラインについて解説します。

コメント