Environment Variables & API Keys
Relevant source files
The following files were used as context for generating this wiki page:
- README.md
- PROMPTS.md
- index.html
- .devcontainer/devcontainer.json (Referenced via documentation)
- .devcontainer/Dockerfile (Referenced via documentation)
Introduction
In the "Vibe Coding with Claude" environment, configuration is primarily driven by environment variables that establish a secure connection between the local workspace and the Anthropic Claude API. These variables ensure that the command-line interface (CLI) tools can authenticate requests and manage the "describe → look → refine" development loop.
The primary mechanism for authentication is the ANTHROPIC_API_KEY, which is exported within the terminal session. This setup allows students to build real-time web applications directly in the browser without manual installation or complex configuration files.
Sources: README.md:1-15, index.html:15-22
Core Environment Variables
The system relies on a specific environment variable to facilitate the interaction between the student's terminal and the Claude AI engine.
ANTHROPIC_API_KEY
This variable holds the temporary class key provided by the instructor. It is used by the claude CLI tool to authorize code generation and modification requests.
- Scope: Terminal session specific.
- Persistence: Must be re-exported if the terminal is closed.
- Command:
export ANTHROPIC_API_KEY=PASTE-CLASS-KEY-HERE
Sources: README.md:20-27, README.md:46-47
Authentication and Tooling Workflow
The environment is pre-configured via container definitions to handle the Claude tooling and API routing. The following diagram illustrates the flow of setting up the API key and initiating the development session.
The diagram shows the sequential steps required to authenticate the workspace using environment variables before development can begin.
Sources: README.md:17-34
CLI Commands Summary
| Command | Purpose | Dependency |
|---|---|---|
export ANTHROPIC_API_KEY=... | Sets the authentication token for the session | Instructor-provided key |
claude | Launches the AI coding assistant | ANTHROPIC_API_KEY |
serve . | Starts a live preview of the project | Local directory files |
Sources: README.md:44-50
Backend Configuration and Proxying
While students interact primarily with the export command, the project includes underlying configuration to manage API limits and security.
Infrastructure Highlights
- Spend-capped Proxy: The API requests are routed through a class proxy that manages usage limits to prevent overages during the session.
- Pre-installed Tooling: The
.devcontainer/directory contains instructions to pre-install the Claude CLI and pre-answer setup prompts. - Local Storage: Applications built using the PROMPTS.md templates often utilize browser local storage for data persistence, which is independent of the server-side environment variables.
Sources: README.md:58-61, PROMPTS.md:38-40
Interaction Sequence
When a student provides a prompt, the CLI uses the environment variables to communicate with the model, which then updates the project files.
This sequence highlights how the ANTHROPIC_API_KEY environment variable acts as the gateway for the CLI to transform plain-language requests into file system changes.
Sources: README.md:32-34, index.html:24-25
Summary
The environment variable configuration in this project is designed for simplicity and immediate utility. By using export ANTHROPIC_API_KEY, the workspace bridges the gap between a standard web editor and a high-performance AI coding assistant. This architecture allows for a seamless "vibe coding" experience where the technical complexities of API authentication and proxying are abstracted away from the end user.