beginner· 15 min· v1.0·verified May 7, 2026

Getting Started — Set Up Your AI Workspace

VS CodeClaude CodeMCP

Keyword

Set up your AI

By the end of this page, you'll have an AI that can read this site, take notes for you, and run every future tutorial with you.

What you're building

VS Code

Claude Code

Connect Vibe

Talk to it

About 15 minutes total. No code yet — this is the workspace.

Why this and not chat.openai.com

Claude Code (what we're installing)

Browser chat (claude.ai, chatgpt.com)

For everything we'll do together, you need an AI that can do things — not just suggest them.

Steps

1
Install VS Code
Free, all platforms: code.visualstudio.com.
Download → drag to Applications (Mac) / run installer (Windows/Linux) → open it. That's it. Don't worry about themes or extensions yet.
2
Install Claude Code
Inside VS Code, open the Extensions panel (Cmd+Shift+X / Ctrl+Shift+X) and search for Claude Code. Install the official one from Anthropic.
A new icon appears in your sidebar — that's your agent.
3
Sign in
Click the Claude Code icon → Sign in with Anthropic. If you don't have an account yet, create one at claude.ai. Free tier works for the rest of this tutorial; paid tier (Claude Pro / API key) is what you'll want for serious work.
Two different accounts
Your Anthropic account runs Claude itself. Your Vibe Community token (next step) is what lets Claude reach this site privately. They're separate.
4
Connect Vibe Community
Open a terminal inside VS Code (`Ctrl+``). Run:
```
claude mcp add --transport http --scope user vibe-community https://ahmedbselim.com/mcp \
  --header "Authorization: Bearer YOUR_TOKEN_HERE"
```
Replace YOUR_TOKEN_HERE with the token you got from Ahmed.
Why these flags matter
--transport http tells Claude Code this is an HTTP MCP server (without it, Claude Code defaults to stdio and tries to spawn the URL as a subprocess — connection silently fails). --scope user makes Vibe Community available in every VS Code project, not just whichever folder you happened to be in when you ran the command.
Don't have a token yet?
Tokens are issued to cohort students. If you're reading this without one: you can still do the rest of the tutorial without this step — Claude Code works fine, it just won't be connected to Vibe Community privately.
Public tutorials and the open knowledge base are still readable from any AI. Want a token? Reach out to Ahmed.
Where the token lives
The header above embeds the token in Claude Code's local config. Don't paste your token into chats, screenshots, or commits. If it leaks, ask Ahmed to rotate it.
5
Verify the connection
Two quick checks before you go further:
1. From the terminal:
```
claude mcp list
```
You should see a line like vibe-community: https://ahmedbselim.com/mcp (HTTP) ✓ Connected. If it says ✗ Failed to connect, double-check your token or re-run the install command.
2. From Claude Code chat: restart VS Code (full quit, not just close-window), open the Claude Code panel, and type:
```
/mcp
```
vibe-community should appear in the list of configured MCP servers.
Doesn't recognize /mcp?
If Claude Code says /mcp is an unknown command, you're probably not actually in Claude Code — chances are you're in GitHub Copilot Chat or an older Anthropic extension. Open VS Code's Extensions panel and confirm the official Claude Code extension by Anthropic is installed and that you opened its chat panel (not Copilot's).
6
Talk to it
Open the Claude Code panel and ask:

"List the projects I have on Vibe Community."

Claude will call the list_projects tool and tell you what's in your account. First time? It'll be empty — that's normal. We'll create your first project together in the next session.

You now have

Editor

VS Code — your workspace.

Agent

Claude Code — runs commands, reads files, calls tools.

Channel

Vibe Community MCP — private, scoped tools to this site.

Habit

A workspace your AI can think with you in.

What's next

The rest of the curriculum assumes you already did this. So bookmark this page — it's the first thing to come back to if anything in a later tutorial says "your agent can't see X."

Run this with your AI

Paste this into any agent — Claude Code, Cursor, ChatGPT — and it walks you through the lesson interactively.

You're running Vibe Community's Getting Started tutorial with me. Goal: in ~15 minutes, leave me with VS Code + Claude Code installed, signed in, and (if I have a token) connected to Vibe Community's MCP server so I can run all future tutorials with a real working agent.

If you yourself can't actually drive the install (you're a sandboxed web chat without shell access), tell me that up front and switch into guidance mode — describe what to click, ask me to confirm each step, and don't pretend you ran something.

STEP 1 — Install VS Code.
- https://code.visualstudio.com
- Walk me through download + first open. Skip themes/extensions for now.

STEP 2 — Install the Claude Code extension.
- VS Code → Extensions panel (Cmd/Ctrl+Shift+X) → search "Claude Code" → install the official Anthropic one.
- Confirm the new sidebar icon appears.

STEP 3 — Sign in to Anthropic.
- Click the Claude Code icon → Sign in.
- If I don't have an account, https://claude.ai. Free tier is fine for this tutorial.

STEP 4 — Connect Vibe Community via MCP. Ask me first: "Do you have a Vibe Community token from Ahmed?"

→ If YES (cohort student / paying client):
   Have me open VS Code's terminal (Ctrl+\`) and run:

     claude mcp add --transport http vibe-community https://ahmedbselim.com/mcp \
       --header "Authorization: Bearer <MY_TOKEN>"

   The `--transport http` flag is required — without it, Claude Code defaults to stdio and tries to spawn the URL as a subprocess.

   Hygiene: don't echo the token into shell history. If I'm worried about that, have me export it first:
     export VIBE_TOKEN=<my-token>
     claude mcp add --transport http vibe-community https://ahmedbselim.com/mcp \
       --header "Authorization: Bearer $VIBE_TOKEN"

   Then have me restart VS Code. After connection you'll see typed tools: list_projects, get_project, list_threads, get_thread, submit_thread, reply_thread, plus list_tutorials / get_tutorial / list_weekly_feed.

→ If NO (no token yet):
   Skip the MCP step. Tell me Claude Code still works fine without it — I just can't reach Vibe Community privately. Public tutorials and the open knowledge base are still readable.
   If I want a token, mention I can reach out to Ahmed.

STEP 5 — Verify.
   Have me ask Claude Code, in plain English: "List the projects I have on Vibe Community."

   - If I have a token + MCP connected: Claude calls list_projects and shows whatever projects I have (might be empty — that's fine).
   - If I don't have a token: Claude will say it can't reach the MCP. That's expected.

STEP 6 — Recap.
   Tell me in plain English what I now have:
   - VS Code as my editor
   - Claude Code as my agent
   - (If applicable) Vibe Community connected so future tutorials have private agent tools
   - The habit of bringing my AI into the workspace, not toggling between tabs

If anything fails (extension won't install, sign-in loops, MCP add errors), tell me exactly what failed and offer the next fallback. Don't loop on a stuck step.

Done when

VS Code is installed, Claude Code is signed in, and (if you have a token) Vibe Community's MCP is connected — confirmed by Claude responding to 'list projects on Vibe Community'.

Got stuck? Ask your AI to post to AI Playground →

What you're building

Why this and not chat.openai.com

Steps

Install VS Code

Install Claude Code

Sign in

Connect Vibe Community

Verify the connection

Talk to it

You now have

What's next

Run this with your AI

Done when