Developer Environment Setup

Start with your AI of choice — then grow into a full IDE only if you need to

Every Free For Charity volunteer developer works with an AI agent. The easiest way to start is the native desktop app for your AI. As you take on more advanced work, you can move into a full IDE like VS Code or Google Antigravity — but most charity website work never needs that.

Bring your own AIBeginner-friendly firstLast updated: June 2026

Step 1 — Start with your AI

Keep the AI you already use, or pick our recommendation

You do not need to learn a new AI to help Free For Charity. If you already pay for one of the major AI agents, keep using it — this page shows how to point your existing AI at our website template repositories. If you do not have one yet, we have a simple recommendation below.

Already pay for an AI? Use it.

Your paid AI should stay your primary AI. ChatGPT Plus/Pro → Codex. Claude Pro/Max → Claude. A Google AI / Gemini plan → Gemini. GitHub Copilot → VS Code. Set that one up for FFC and skip the rest.

No AI yet? Start with Claude.

Our recommendation for new developers is Claude at the personal Pro level, using Claude Desktop on your computer and Claude Mobile on your phone. It is the gentlest on-ramp to the FFC workflow.

The four primary AI agents

All four can do the job — pick by what you already have or prefer

Free For Charity supports four primary AI coding agents. In practice they work almost the same for our purposes: you describe a change in plain English, the agent edits the code, runs the checks, and opens a pull request. The main difference is which app you sign in to and where it runs.

AI agentEasiest start (native app)Advanced environmentAlready paying?
ClaudeAnthropicClaude Desktop + Claude MobileVS Code or Antigravity (run Claude as a CLI or plug-in)Have Claude Pro or Max? Use Claude.
OpenAI CodexOpenAICodex app (desktop)VS Code or Antigravity (run Codex as a CLI or extension)Have ChatGPT Plus or Pro? Use Codex.
Google GeminiGoogleGoogle Antigravity (agent-first IDE)AntigravityHave a Google AI / Gemini plan? Use Gemini.
GitHub CopilotGitHub / MicrosoftVS Code (agent mode)VS CodeHave GitHub Copilot? Use Copilot in VS Code.

No favoritism: we do not push one tool over another. Antigravity and VS Code are equally capable advanced environments, and you can run Claude or Codex in either one. Choose the path that fits the AI you already have.

Step 2 — Pick an environment by difficulty

Start easy. Move up only when a task needs it.

What “advanced” means — and why most people never need it

An honest look at when to graduate to an IDE

Beginner (native desktop app)

  • ✓Read issues, edit content, and open pull requests through the GitHub MCP server
  • ✓CI runs the build and tests for you — nothing to install locally
  • ✓Handles the large majority of charity website updates
  • ✓Works from your phone with Claude Mobile

Advanced (full IDE)

  • +Run builds, unit tests, and Playwright on your own machine before pushing
  • +Drive a real browser, debug failures, and iterate quickly
  • +Larger refactors, new pages from scratch, and work across many repos
  • +Run your AI as a CLI agent and as an in-editor plug-in

Important caveat: most charities will never require an advanced developer. The beginner path — your AI’s desktop app plus the GitHub MCP server, with CI validating every change — handles the vast majority of website work. Only move to an IDE when a specific task genuinely needs local builds, browser debugging, or a large refactor. Becoming “advanced” is a nice-to-have for ambitious volunteers, not a requirement for helping a charity.

Shared prerequisites

What every path needs (advanced paths need a little more)

Everyone needs

  • 1.A GitHub account, added to the FreeForCharity organization by a maintainer.
  • 2.An AI account — Claude, ChatGPT/Codex, Google/Gemini, or GitHub Copilot. Every one has a free tier that is enough to start; upgrade to a paid tier only if and when you hit usage limits.

Advanced (IDE) paths also need

  • +Git, Node.js 20+, and pnpm 9 (our repos pin pnpm 9 via package.json). Your AI can install these for you.
  • +The editor itself — VS Code or Antigravity.

MCP servers our template repositories use

The same connectors give every AI agent the abilities our workflow needs

MCP (Model Context Protocol) servers are small connectors that all four AI agents understand. At a minimum, enable GitHub. Add Playwright once you are working in an IDE and running browser tests. In most apps these come as ready-made plugins or connectors — you rarely install anything by hand; just ask your agent to enable what it needs.

MCP serverWhat it lets the agent doWhen
GitHubRead and create issues, open pull requests, review CI status, and mergeRequired (all paths)
PlaywrightDrive a real browser to run and debug our end-to-end testsAdvanced / IDE
FilesystemLet a desktop-app agent read and edit a local clone of the repoOptional
Cloudflare / Microsoft Learn / SentryDNS & Pages, Microsoft 365 docs, and production error trackingOptional

Security: MCP servers that reach GitHub, Cloudflare, or Sentry need an access token. Never paste a token into a file, a commit, or a chat message. Use the app’s secure credential prompt or an environment variable, scope it narrowly, and rotate it. See our security rules.

The contribution loop is the same

Whichever AI and environment you choose, every change follows four steps

1.Pick up an issue

Every change starts from a GitHub issue. Your agent reads it and plans the work.

2.Branch & change

The agent creates a branch and makes the change — on a beginner path, directly through the GitHub MCP server.

3.Open a pull request

The agent opens a PR linked to the issue. CI runs format, lint, build, tests, and Playwright.

4.Review & merge

You review the diff, the agent fixes any CI failures, and the change merges once checks pass.

Never push directly to main. Every change goes through a branch and a pull request, and CI must pass before merge. A correctly set-up agent follows this automatically.

Pick your guide