Mac Setup & Daily Life: v0, GitHub, Vercel, Claude

Emergency: 3 Steps (Take Photos)

Quick Check

1. Facts in text & image? → Cockpit (make stuff up nowhere else).
2. Layout / code file changed? → In GitHub Desktop: first Fetch (others) → work → Save with short note → Push.
3. Red alert, conflict, nothing works? → Don't guess: IT (or B7 Help below). No force on main branch.

Details behind, see: Part 2, Table.

First, a Brief in everyday language, then Step by Step — for setuppers and for editors separately. Abbreviations are listed in the table, only those who wish can use Terminal lines (below, after the Simple Path).

Company Rule: One Center = one code location (GitHub) + one live site (Vercel) — sawmuedev. F2, detailed.

The Simplest Way (Brief)

Who	Focus in Sentences
You are setting up (once / per computer)	Your own logins, no one shares passwords. Properly invited to the one GitHub project (repo) for this center. Ideally, use GitHub Desktop for clicks instead of typing secrets. Vercel linked once with the same GitHub project + enter data source. v0: Instructions A+B+C, then tell in chat in sentences what it should build.
You work in daily life (editor)	Cockpit = facts + publications. v0 = Describe (image, colors, “a carousel under the news”). If your workflow pushes code: GitHub Desktop = Fetch → work → Save → Upload (Technical: pull → commit → push). Claude = ask instead of manual, only if IT allows: MCP – Instructions — not mandatory.

Note: Cockpit = content. GitHub = programming code of the website. Vercel = where the site runs for the public.

---

Terms (for technical talk only)

Term	Means as much as
Repository (Repo)	A project folder with a version history — usually one per center website for you.
Clone	Load the state from GitHub once onto your computer (copy with history).
Pull (fetch)	Fetches the latest changes from GitHub to your computer — before working almost always!
Commit	A save point with a short explanation (“what have I changed?”) — locally, not necessarily online yet.
Push (upload)	Pushes commits to GitHub — from then on, others see it (and possibly Vercel rebuilds new).
Branch (branch)	A fork for testing or big constructions — optional; beginners can stay on one common branch if your IT prefers it that way.
v0	Tool in browser for layout/code design (Next.js) — Cockpit data via API; A–Z for editors.
Vercel	Hosting — builds your website from the GitHub repo; Setting NEXT_PUBLIC_DASHBOARD_URL must match.

Memory Phrase for Daily Life: Cockpit = Content (news, shops, …). GitHub = Code of the page. Both must fit but are two places.

---

Part 1 — Setting Up Once (if you are preparing the computers)

Idea in one sentence: Each affected person can individually (with help) maintain Cockpit content, build in v0 in natural sentences, and leave code in one clear GitHub folder; Vercel handles the live site — all clearly separated.

On any Mac that is meant to actively work with code: better set up correctly once than guessing every time.

1.0 — Prerequisites

• Permission to install programs on the Mac — or IT will complete it together with you.
• An email address for GitHub — usually the work email according to company policy.
• Clarify briefly: Who needs v0? Who needs read access in Vercel? Who only needs access to GitHub? Who is Claude?

1.1 — Easiest: Git first with the mouse (GitHub Desktop)

For most teams, this is the most convenient way. Colloquially, this means:

1. “Fetch what is already newer online” (technically: pull)
2. Change something in files (e.g., in Cursor, VS Code, …)
3. Create a backup — with a short sentence about what has changed (technically: commit)
4. Push it over so everyone and Vercel can see it (technically: push)

Install (once, on the Mac): download GitHub Desktop for Mac, start it, sign in with your own GitHub account (the browser may open automatically — read sentences, agree, done). Then choose the correct repository (or Clone via the menu) — your IT will give you the exact https://github.com/sawmuedev/… address. Done — a black terminal is often not needed for this; only if your policy differs.

Reminder: No shared password; one person = one invitation to the correct GitHub project.

1.2 — Then: Sentences, no manuals (v0)

1. v0 in the browser, select account (company license).
2. Copy Instructions A, B, C — Step D in A–Z explains where the three blocks go.
3. Replace Cockpit slug and API URL only in the designated places (don’t invent).
4. In the v0 chat, express in simple sentences what should happen — e.g., “Homepage with a large photo, below 6 cards for the shops, all mobile-friendly” — instead of pre-made programming language.

1.3 — Set Up Vercel + Claude

• Vercel: Create a separate project per center that is linked to the exact corresponding GitHub repo in sawmuedev. In the project settings under Environment Variables, enter NEXT_PUBLIC_DASHBOARD_URL once — this is your Cockpit API address, without / at the end. Afterwards, Vercel will automatically rebuild the website with each push. More detailed: F2.
• Claude can read Cockpit data in normal sentences and submit content for approval. Simplest way: Enter remote URL in Claude — no Node.js, no installation, 2 minutes. IT will provide the URL + Secret. Full instructions: Connecting Claude & Cockpit → (there: Path A = Remote URL first). Claude can also directly edit website files (see 1.3a below).

1.3a — Claude: Set Up File Access (so Claude can directly edit website files)

This prepares for the workflow “editor builds and edits websites directly with Claude” — without v0, in normal sentences.

Complete guide with all steps: Build & Edit Website with Claude

Summary (IT, once per Mac):

1. Install Node.js — nodejs.org/en → download and install “LTS” (just click through).
2. Claude Desktop must already be installed and signed in (see A7).
3. The repo must be located as a folder on the Mac (see 1.1).
4. Create or adjust the file ~/Library/Application Support/Claude/claude_desktop_config.json — with the following entry (adjust the path):

 {
   "mcpServers": {
     "filesystem": {
       "command": "npx",
       "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/NAME/Documents/Work/Center-Webs"]
     }
   }
 }

5. Completely quit Claude Desktop and restart.
6. Check: in Claude type “List all files in my website folder” — if file names appear, it works.

1.4 — (Optional) Only for typing pros / IT requirement: Terminal + Git Basics

For those who do not want GitHub Desktop, start with: small tools for git — Apple Command Line Tools (part of the Xcode tools), so the same commands run in the Terminal:

A1 — Apple Developer Tools for Git (Command Line Tools)

1. Open Terminal (Applications → Utilities → Terminal).
2. Type: git --version and Enter.

• Is it installing? A dialog appears at that point → select Install, wait, done.
• If a version is shown (e.g., git version 2.x) — it’s already there.

If xcode-select: note: no developer tools — wait for installation from the dialog. Then check git --version again.

A2 — Git Name and Email (once per Mac user login)

Every person who commits needs a visible identity in the history:

git config --global user.name "First Last Name"
git config --global user.email "your@company.com"

Important: user.email is ideally exactly the email that is also used for your GitHub account (or your official No-Reply address if you operate that way — coordinate uniformly with IT).

Check:

git config --global --list

A3 — GitHub Account for each employee

1. https://github.com — create an account (if missing) or company SSO if your organization uses GitHub Enterprise.
2. Two-Factor Authentication (2FA) recommended (security standard).
3. Admin in the organization sawmuedev invites each person (Organization invite) or adds them as Collaborators in the respective center repos — see F2, Access.

Never use a shared password for everyone — every person must have their own GitHub login.

A4 — Sign in to GitHub on Mac for git (HTTPS, recommended for beginners)

Two common ways — choose one and document it uniformly in the company:

Variant 1 — GitHub in the browser (Credential Helper)
On the first git push / git pull, the browser login may appear — sign in, done.

Variant 2 — GitHub CLI (optional, clearer for many)
After installation: gh auth login — instructions on the screen.

If “Authentication failed”: in GitHub → Settings → Developer settings → Personal access tokens (classical Fine-grained or classic according to IT specification) — never in screenshots in group chats, only in secure password managers / IT processes.

A5 — Vercel (in detail; summary was already in 1.3)

1. Vercel account/team — your company workflow (invitation, role).
2. Per center, one project — linked to exactly one sawmuedev/… repo (F2).
3. In Project Settings → Environment Variables:

• NEXT_PUBLIC_DASHBOARD_URL = your API base (e.g., https://dashboard.cockpit-os.de) without slash at the end.

4. Production deploy after every important change on main (or whatever your branch standard is) — Vercel usually builds automatically after push.

Editors only need Vercel if they want to see preview links — usually read access or links from IT are enough. Not every person needs to be a Vercel admin.

A7 — Claude (App) + optional Cockpit via MCP (go through with IT!)

• Claude as App (Desktop) from Anthropic / your procurement channel — company policy for AI data applies.
• Should work with Cockpit data: Connecting Claude & Cockpit (Instructions) → — Path A (recommended): Remote URL + Secret in Claude, done. No Node.js, no installation. Path B (Fallback): pnpm mcp:init in the repo (needs Node.js). Be cautious when pushing into the system.
• Only for those who are trained and approved — not mandatory for pure content maintenance.

A8 — Editor for code (recommended, not mandatory)

• Cursor, Visual Studio Code or similar — File → Open Folder → cloned repo root.

A9 — Setup Checklist (check off, then inform editors)

• git works, name/email set
• Every working person invited and visible in sawmuedev / in the necessary repos
• v0-Instructions A+B+C in the project, HERE_ placeholders replaced
• Vercel-project + **NEXT_PUBLIC_DASHBOARD_URL**
• (Optional) Claude + (optional) MCP according to documentation, only with approval
• (Optional, if editors are using Claude for editing) File access for Claude set up and checked — Instructions 1.3a
• Send the editors the Simple Path: Part 2 — First GitHub Desktop (Table) — Terminal only for those who want / IT says so

---

Part 2 — Daily Life: Maintain Code, Without Secret Language

Cockpit = facts (news, shops …). Here = files for the website (look, v0 export, settings) — in one GitHub folder, which you have already learned about in 1.1.

2.1 — Simplest Daily Routine: GitHub Desktop (recommended)

This is how it can feel (menu names slightly different, depending on the version):

You want …	Colloquially	Approximately in GitHub Desktop
The project the first time	“Save the folder for me”	File → Clone repository (URL from IT) → choose destination folder, Clone
Before working	“Pull what others pushed already”	Fetch origin or Pull origin (if suggested)
After changing in Cursor/Editor	“Save this change with a short note”	Fill in Summary at the bottom, Description optional, Commit to main (or your branch), then Push
Ready for others / live build	“Push it over”	Push origin — Vercel usually builds by itself

Example of a commit message (usable in daily life): “Header: Make logo a bit bigger for mobile” — no riddle next Monday.

New center, completely own address: no “clone from old and rename” — your process F2 / IT; at the existing repo, the Simple daily routine is: Fetch → change → Save → Upload, as shown in the table.

2.2 — (Optional) The same for typing pros: Terminal

B0 — Preparation: in which folder?

Create a clear folder for each clone, e.g., Documents/Work/Center-Webs — no mixing with photos or email downloads.

In the Terminal (example):

cd ~/Documents/Work/Center-Webs

B1 — Clone the repository (if it already exists on GitHub)

1. Open the repo in GitHub in the browser, e.g., https://github.com/sawmuedev/website-your-center-slug
2. Green button Code — copy the HTTPS URL (looks like https://github.com/sawmuedev/website-....git).

Terminal:

git clone https://github.com/sawmuedev/website-your-center-slug.git
cd website-your-center-slug

For the first time: possibly sign in (browser/token) — see A4.

Done? You are in the folder of the project. You can open it in Cursor/VS Code.

B2 — Before typing: always fetch the latest state (pull)

If others have already pushed — otherwise, conflicts arise.

cd /path/to/website-your-center-slug
git pull

If Already up to date — good. If many files come — wait, done, then continue typing.

B3 — Make changes and commit (save locally with a comment)

1. Save one or more files in your editor (typical save).
2. Open Terminal in the project folder:

git status

• red / untracked = Git sees something new; red modified = changed.

Stage everything important (mark for commit):

git add -A

(If you want only one file: git add path/to/file.tsx)

1. Commit with a short, understandable message — one line, what + roughly why:

git commit -m "Homepage: Adjust teaser spacing for mobile"

If nothing to commit — nothing was changed or forgot to save.

B4 — Upload to GitHub (push)

git push

• First time on a new branch: git push -u origin branchname may be necessary (see B5).

Then: Vercel usually builds automatically (if linked to main/master or your standard) — know the preview URL for your team.

B5 — (Optional) Branch for testing / draft

If you don’t want to touch the main line directly (clarify policy with IT):

git pull
git checkout -b draft/example-layout
# … work, commit …
git push -u origin draft/example-layout

Merging into the main line is done by IT / PR in GitHub — not necessary if you can work on main (small teams often work this way).

B6 — Create a new “something” from an existing Center-Webs (properly sort)

What you want	Correct	Wrong / only with IT
Content (news, prices, new shop)	Cockpit	Not make up in v0
Develop layout/code for this center	In the same repo: clone, pull, change, commit, push (possibly branch)	Change ownership of the repo
Completely new center, own URL	New repo + new Vercel project — F2	Copy-paste from old repo and register twice (drift)
Build on existing code (template)	Only according to IT guidelines: e.g., GitHub “Use this template” / empty repo from template	“Repo rename” or Dual Vercel → one repo without coordination

Simplest daily routine for your old, existing repo: git pull → change → git add → git commit → git push. Done.

B7 — If it hangs (Frequent Messages, Brief)

Message (in essence)	Usually Means
Permission denied / 403	No access to this repo in sawmuedev — Admin asks to invite (or wrong account in Git).
Please commit your changes before git pull	You have changed something locally. Check in (commit) or tidy up with Stash/Reset (with IT), then git pull.
CONFLICT	Two people, the same spot. Do not just “save away” — [ask IT about conflicts] or in Git manuals: resolve conflicts in files via editor (remove markers <<<<, then commit).
rejected: non-fast-forward	Someone else was faster. Before another push: git pull (or git pull --rebase according to IT standard), resolve conflicts, then git push.

Generally: If unclear, no git push --force on main branch without IT — this can be destructive for others.

---

Part 3 — Quick Checklists (Bookmarks / Print)

Editors (Daily Life, Mouse First)

• Facts in Cockpit (not make up in v0)
• When working on code files: in GitHub Desktop (or learned in: Terminal) first fetch what others did yesterday
• Then build/save, short text for your backup, then push
• If anything hangs or is unclear: ask IT or B7 — frequent messages — no force on main branch without IT
• Entirely new center with a new domain = F2 / IT, no silent double-repo

One-Time Setup (check off by the person preparing the Macs)

• GitHub Desktop (or: terminal path) + access to sawmuedev / suitable repo per center
• v0-Instructions + replace Cockpit data (v0 A–Z)
• Vercel-Project + **NEXT_PUBLIC_DASHBOARD_URL**
• (If intended) Claude + possibly MCP
• Link to the editor: Part 2 — Table (GitHub Desktop)

Deepening v0 (without code stress): v0 Website A–Z
For much technical detail of the API: Public API – Contract

---

Status: content aligned with the company rule one center = one repo = one Vercel (sawmuedev, F2).