Stage 1: The Easy Way
Stage 2: Level Up
Build websites by describing what you want. No experience needed.
Start building on your own machine in minutes, then level up to deploying to the world when you're ready.
Get Started ↓Everything you need to start vibe coding on your own machine
Get the AI-powered coding tools on your machine
These are xAI tools that can read your files, write code, run commands, and help you build entire projects through natural conversation. They come in two flavors:
Both do the same job — pick whichever feels more comfortable. You can always switch later.
The app gives you a familiar chat interface — just like messaging, but you're talking to an AI that can write code.
Open your terminal and run:
curl -fsSL https://x.ai/cli/install.sh | bashNavigate to your project folder and launch Grok Build:
cd your-project-folder
grokOn first launch, it will ask you to authenticate. Follow the prompts to sign in with your xAI / Grok account.
Both Grok Bot and Grok Build read your project files to understand your codebase. Always open or navigate to your project folder first — this gives Grok the context it needs to give you better results.
Let Grok see and interact with your browser
Grok can connect to extra tools so it isn't stuck in a text box. Browser tools let it open your website, take screenshots, click elements, and read page content.
This means Grok can build your site and visually check its own work, catching layout issues and fixing them without you switching windows.
Once connected, just ask Grok to interact with your browser:
Open my index.html in Chrome and tell me how it looks
I'll open your site in Chrome and take a screenshot to review the layout...
Grok can also:
Browser tools are optional but highly recommended. Without them, you can still build sites — you'll just preview them manually by opening the HTML file in your browser.
The secret weapon for effective vibe coding
An AGENTS.md file in your project root tells Grok Bot and Grok Build how to behave. Think of it as a set of instructions that makes Grok smarter, more consistent, and aligned with your workflow. It's the difference between a good AI assistant and a great one.
Copy this into a file called AGENTS.md in your project root:
# Workflow Orchestration
### 1. Plan Mode Default
- Enter plan mode for ANY non-trivial task (3+ steps or architectural decisions)
- If something goes sideways, STOP and re-plan immediately — don't keep pushing
- Use plan mode for verification steps, not just building
- Write detailed specs upfront to reduce ambiguity
### 2. Subagent Strategy
- Use subagents liberally to keep main context window clean
- Offload research, exploration, and parallel analysis to subagents
- For complex problems, throw more compute at it via subagents
- One task per subagent for focused execution
### 3. Self-Improvement Loop
- After ANY correction from the user: update `tasks/lessons.md` with the pattern
- Write rules for yourself that prevent the same mistake
- Ruthlessly iterate on these lessons until mistake rate drops
- Review lessons at session start for relevant project
### 4. Verification Before Done
- Never mark a task complete without proving it works
- Diff behavior between main and your changes when relevant
- Ask yourself: "Would a staff engineer approve this?"
- Run tests, check logs, demonstrate correctness
### 5. Demand Elegance (Balanced)
- For non-trivial changes: pause and ask "is there a more elegant way?"
- If a fix feels hacky: "Knowing everything I know now, implement the elegant solution"
- Skip this for simple, obvious fixes — don't over-engineer
- Challenge your own work before presenting it
### 6. Autonomous Bug Fixing
- When given a bug report: just fix it. Don't ask for hand-holding
- Point at logs, errors, failing tests — then resolve them
- Zero context switching required from the user
- Go fix failing CI tests without being told how
# Task Management
1. **Plan First**: Write plan to `tasks/todo.md` with checkable items
2. **Verify Plan**: Check in before starting implementation
3. **Track Progress**: Mark items complete as you go
4. **Explain Changes**: High-level summary at each step
5. **Document Results**: Add review section to `tasks/todo.md`
6. **Capture Lessons**: Update `tasks/lessons.md` after corrections
# Core Principles
- **Simplicity First**: Make every change as simple as possible. Impact minimal code.
- **No Laziness**: Find root causes. No temporary fixes. Senior developer standards.
- **Minimal Impact**: Changes should only touch what's necessary. Avoid introducing bugs.No accounts, no deploys — just build stuff
Just make a folder anywhere on your machine. That's your project.
my-first-siteThen open this folder in Grok Bot by clicking "Open Folder" or dragging it onto the window.
mkdir my-first-site
cd my-first-sitegrokIn the terminal, run grok. If you already opened the folder in Grok Bot, skip this and type in the chat box. Then just tell Grok what you want in plain English. Grok will create the files, write the code, and you can see the results by opening index.html in your browser.
Preview by opening the file in your browser, or ask Grok to use browser tools
You don't need GitHub, Cloudflare, or any extra accounts to start building. Just a folder plus Grok Bot or Grok Build. You can always add version control and deployment later when you're ready.
Common mistakes to avoid as a beginner
If you ever need to run a local server (like python3 -m http.server), always do it from inside your project folder. Running it from / or your home directory exposes ALL your personal files to anyone on your network.
cd my-project
python3 -m http.server 8080# DANGER: exposes everything!
cd /
python3 -m http.server 8080Don't put your xAI API key, passwords, or tokens directly in your code. If you push to GitHub later, they become public. Instead:
.env file.env to your .gitignore fileGrok is powerful but not perfect. Always review its output, especially:
rm -rf, sudo, or anything modifying system filesCreate a dedicated folder for each project. Don't build sites directly in your Documents, Desktop, or home folder root. This keeps things organized and prevents Grok from accidentally reading or modifying unrelated files.
Your ~/.grok folder may contain authentication tokens and session data. Never share it, commit it to git, or upload it anywhere.
Follow along and see vibe coding in action
my-coffee-siteThen open this folder in Grok Bot by clicking "Open Folder" or dragging it onto the window.
mkdir my-coffee-site
cd my-coffee-sitegrokIf you already opened the folder in Grok Bot, skip this and type in the chat box.
Build me a single-page website for a coffee shop called "Bean There". Include a hero section with a warm brown gradient, a menu section with 6 drinks and prices, an about section, and a contact form. Use clean HTML and CSS, no frameworks.
I'll create a beautiful coffee shop website for Bean There. Let me plan this out and build it step by step...
Once Grok is done, open your site:
open index.htmlOpen my site in Chrome and tell me how it looks
Make the menu cards have rounded corners and a hover shadow effect. Add a dark footer with social media links.
Keep refining until you're happy. Each iteration takes seconds.
You just built a website by describing what you wanted. No templates, no drag-and-drop builders, no manual coding.
That's it. That's vibe coding.
Ready to share your creation with the world?
Version control & collaboration home base
GitHub stores your code in the cloud, tracks every change you make, and connects to services like Cloudflare for automatic deployments. It's the backbone of modern development.
my-first-vibe-siteIn Grok Bot, just tell Grok to set things up:
Clone my GitHub repo https://github.com/YOUR-USERNAME/my-first-vibe-site and open it
I'll clone that repository and set up the project folder for you...
Or use GitHub Desktop: click "Clone a repository", paste your repo URL, and choose where to save it.
When you're ready to save your work to GitHub, just ask Grok:
Commit my changes and push to GitHub
I'll stage your changes, create a commit, and push to GitHub...
Grok handles all the git commands behind the scenes. You can also use GitHub Desktop to visually see your changes, write a commit message, and click "Push origin".
Copy your repo URL and clone it to your machine:
git clone https://github.com/YOUR-USERNAME/my-first-vibe-site.git
cd my-first-vibe-siteThese are the commands you'll use daily:
# Check what changed
git status
# Stage all changes
git add .
# Commit with a message
git commit -m "describe what you changed"
# Push to GitHub
git pushWhether you use Grok Bot or Grok Build, Grok can run git commands for you! Just ask: "commit my changes" or "push to GitHub" and it'll handle the rest.
Free hosting with automatic deploys
Cloudflare Pages gives you free, fast hosting that automatically deploys your site every time you push to GitHub. No server setup, no complex configuration — just push and it's live.
Your site will be available at your-project.pages.dev. You can add a custom domain later in Cloudflare settings if you want.
Everything connected, from idea to live site
Here's what your complete workflow looks like now:
You now have the complete vibe coding workflow. Write code by describing what you want, let Grok build it, preview in the browser, push to GitHub, and Cloudflare deploys it automatically.
Welcome to the future of development!