Prerequisites & Requirements
Relevant source files
The following files were used as context for generating this wiki page:
This document outlines the environment, configuration, and tools required to participate in the "Vibe Coding with Claude" session. The project is designed to be zero-install, leveraging cloud-based development environments and AI-assisted coding to build web applications directly in the browser.
The scope of these requirements covers the initial workspace setup, the authentication process for the Claude AI assistant, and the essential command-line interface (CLI) tools used to interact with the system.
Sources: README.md:1-6, index.html:18-20
Workspace Environment
The project utilizes GitHub Codespaces to provide a pre-configured, browser-based development environment. This eliminates the need for local software installations or environment configuration.
GitHub Codespaces
- Account: A free GitHub account is required for authentication.
- Infrastructure: The workspace is built using a
.devcontainer/configuration which pre-installs necessary tooling, including the Claude CLI and proxy settings. - Live Preview: The environment includes an automatic preview feature that reflects changes made to the codebase in real-time.
Sources: README.md:8-13, README.md:52-54
Environment Initialization Flow
The following diagram illustrates the process of initiating the cloud workspace and starting the AI-driven development cycle.
The diagram shows the sequential steps from clicking the launch button to entering the iterative development loop.
Sources: README.md:8-33
Configuration & Credentials
A valid API key is required to connect the workspace to the Claude AI engine. This key is provided by the instructor and must be set within the terminal session.
Environment Variables
The system relies on the ANTHROPIC_API_KEY environment variable to authenticate requests to the AI provider.
| Variable Name | Purpose | Scope |
|---|---|---|
ANTHROPIC_API_KEY | Authenticates the session with the AI assistant. | Current Terminal Session |
Sources: README.md:21-26
Authentication Sequence
The sequence below details how the user provides the session key to the Claude CLI.
This diagram depicts the manual input of the API key and the subsequent confirmation prompt within the terminal.
Sources: README.md:19-33
Software & Tools
The system uses specific CLI commands to manage the development lifecycle and serve the application.
CLI Commands Reference
| Command | Action |
|---|---|
claude | Launches the interactive AI assistant in the terminal. |
export ANTHROPIC_API_KEY=... | Sets the temporary authorization token for the session. |
serve . | Starts a local web server to host the project files for preview. |
Ctrl + C | Interrupts and stops the currently running process (e.g., the server). |
Sources: README.md:43-48
Core Files
index.html: The entry point for the web application. This file is automatically updated or replaced by Claude as the user describes their project.PROMPTS.md: A library of starter ideas and iteration prompts used to guide the AI assistant..devcontainer/: Contains the logic to pre-configure the Claude tooling and class proxy settings.
Sources: index.html:1-25, PROMPTS.md:1-5, README.md:52-54
Summary
To successfully run this starter project, users must have access to a GitHub account, a valid instructor-provided API key, and the ability to operate basic CLI commands within GitHub Codespaces. The environment is engineered to handle the underlying dependencies, allowing the user to focus on the "describe, look, refine" cycle.
Sources: README.md:31-33, index.html:22-24