Окружение Grok Build

Два мира

Агент

Пишет код, запускает команды, поднимает сервер, проверяет UI через Playwright

Пользователь

Общается в чате Grok и смотрит live preview — без доступа к sandbox

Мост

Preview-proxy находит сервер на :8080 и стримит UI в клиент

• Успех = приложение слушает 0.0.0.0:8080, реально рендерится, dev-сервер остаётся запущенным.
• Пользователю не нужны localhost, порты, npm install или скриншоты «с вашей стороны».

startup.sh и hibernate

Файл

/workspace/startup.sh — контракт revive

Идемпотентность

Если :8080 уже жив — exit 0; иначе поднять npm run dev

Non-blocking

Долгие процессы — в background, скрипт быстро возвращается

• Sandbox может уйти в hibernate и вернуться. Платформа снова запускает startup.sh.
• Агент обязан держать файл в синхроне со способом старта приложения.

Стек приложения

Framework

TanStack Start + Router + Query + Table

UI

React 19, Tailwind v4, Radix / shadcn-паттерны

State / forms

zustand, zod, react-hook-form

Charts / UX

recharts, sonner, cmdk, vaul, lucide

Bundler

Vite 8, nitro (только на build → Vercel)

DB

Neon Postgres или PGLite fallback

Auth

Better Auth + Grok broker (Google, X)

• 3D-движки (three, Phaser и т.п.) не предустановлены — ставятся npm при нужде (см. building-games / threejs).
• Deps в package.json + node_modules уже есть; npm install — только для новых пакетов.

Данные и auth

DB dual-mode

DATABASE_URL → Neon; иначе PGLite в preview

Доступ

getSql() из @/lib/db — только server / createServerFn

Миграции

migrations/*.sql — на deploy и в PGLite на старте

Auth

Opt-in: не для каждого лендинга; real OAuth в preview

• Per-user данные: authMiddleware + scope по context.userId. Никогда не доверять client-sent user id.
• VITE_AUTH_ENABLED=false отключает sign-in. .env агент не создаёт.

QA и качество

Browser smoke

Playwright + scripts/browser-smoke.mjs

Скриншоты

Только /workspace/screenshots/

Mobile

~390×844, без горизонтального overflow

Production

npm run build + typecheck; проверить built output

• HTTP 200 недостаточно: страница должна иметь видимый контент и чистый console.
• Частый blank-deploy: MIME text/html на JS modules — битые asset paths.

Ограничения

Можно

npm install JS-пакетов, Playwright Chromium, pure browser

Нельзя

apt/yum, системные компиляторы, OS-level libs

Сеть

Есть для npm registry, web tools, Imagine

Мультиплеер server

Нет dedicated game server; P2P mesh — через skill

Команды npm

• npm run devDev-сервер на 0.0.0.0:8080 (live preview)
• npm run buildProduction build + миграции (Vercel target)
• npm run typechecktsc --noEmit
• npm run previewРаздать built output на :8080
• node scripts/browser-smoke.mjs …Скриншот + smoke загрузки страницы

Workflow агента

1. 1

   Триаж

   Build-запрос / vague app / greeting / вопрос — не каждый message = scaffold.

2. 2

   Skills

   Открыть design-ui для UI; building-games (+ controls, sprites/maps) для игр.

3. 3

   Реализация

   Рабочий продукт, не wireframe. State, навигация, empty states.

4. 4

   startup.sh + dev

   Поднять :8080, оставить процесс живым для preview.

5. 5

   Verify render

   Browser: видимый контент + нет uncaught errors. Mobile viewport.

6. 6

   Production build

   build/typecheck; убедиться, что built output тоже рендерится.