Unsure how to use Claude Code? This tutorial guides you from scratch to configure your AI programming environment. Learn how to write
CLAUDE.mdto establish project memory, manage context tokens, and use Plan Mode to safely refactor code to improve your development workflow.
With AI agents emerging everywhere, are you still using AI as just a chat tool? If your current workflow involves copying your code, pasting it into a browser, asking a question, and then pasting the generated code back into your editor—you might be hitting some roadblocks. The problem with this approach is that every new query starts a brand-new conversation. The AI has no knowledge of your project's overall directory structure, your team's coding conventions, or the fact that a specific module has been undergoing refactoring for three days.
To truly unlock the productivity of AI, you need to treat it as a development environment that seamlessly integrates with your local engineering workspace. For developers, Anthropic's Claude Code—often viewed as a powerful alternative to GitHub Copilot—is an excellent tool for this task.
This article is the first part of our comprehensive guide. We will walk beginners through setting up and using the Claude Code CLI, turning it into a local programming assistant that understands your codebase. (If you are already an advanced user, you may find this guide covers familiar ground.)
1. Prerequisites and Environment Integration
To integrate AI into your local workflow, the first step is to wake it up inside your terminal—much like your morning alarm clock waking you up for work.
Claude Code Installation Steps
Before running this tool, you must have a local Node.js environment. For developers who prefer not to struggle with managing nvm or system environment variables, using ServBay for deployment is a highly efficient choice.
As an integrated local development environment manager, ServBay provides a graphical user interface that supports one-click installations of various language runtimes. Simply select your desired Node.js version within the application to complete the setup in seconds, entirely bypassing the hassle of manual environment configuration.
Once your environment is ready via ServBay, open your terminal and run the following command for a global installation:
npm i -g @anthropic-ai/claude-code
After the installation completes, verify it by running claude --version. The first time you run the tool, a window will pop up requesting your Anthropic API key or Claude Pro subscription authorization.
Once initialized, specific configuration files will be generated in both your current project and global directories. Understanding this file hierarchy helps with team collaboration and personalization:
- The
.claude/folder at your project root containssettings.json(which can be committed to Git for team sharing) andsettings.local.json(locally ignored, used for personal overrides). - The system user directory
~/.claude/stores globally shared configuration preferences.
This separation mechanism ensures that the team remains aligned on coding standards while allowing individual developers to retain their personal terminal preferences.
2. Establishing Global Project Context
Getting an AI programmer to retain project context is a common challenge. If you have to repeatedly explain your business logic, development efficiency drops—much like having to re-explain the project to your colleagues every single day. Claude Code addresses this issue by establishing project memory.
In your terminal, navigate to the project's root directory, run claude to launch the interface, and then type the /init command.
The tool will scan your local codebase, analyze dependencies in package.json, inspect the directory structure, identify the current tech stack, and generate a CLAUDE.md file in the root directory.
How to Write CLAUDE.md
This file serves as the brain of your entire workflow. Before starting any conversation, the program prioritizes reading the instructions inside it. A cleanly structured configuration can dramatically reduce communication overhead. Below is an example tailored for a full-stack project:
# Project Name: SaaS Dashboard
## Architecture
- Frontend: React 18 + Vite
- State Management: Zustand
- Backend: NestJS + TypeScript
- Database: MySQL + TypeORM
## Directory Conventions
- `/frontend/src/views` stores page-level components
- `/frontend/src/shared` stores shared helper functions and Hooks
- `/backend/src/modules` organizes backend logic by business module
## Coding Constraints
- Frontend components must uniformly use arrow functions and destructuring assignment
- API response formats must adhere to the `{ code, data, message }` structure
- Strictly prohibit the use of `any` in TypeScript; define interfaces for complex types
- All date handling must use the `dayjs` library instead of native `Date`
## Common Scripts
- `npm run dev:all` starts both frontend and backend local services
- `npm run lint` runs style and linter checks
With these rules clearly documented, the next time you request a new data display API, the tool will automatically format the response according to your standards and place the file in the designated /backend/src/modules directory.
Important Caution: Never write database passwords or API keys inside this file, as it will be committed to version control alongside your codebase.
3. Memory Management: Preventing Context Bloat
The terminal interface includes a context indicator that reflects the memory usage of your current conversation.
As the conversation deepens and more files are referenced, the context window gradually fills up. When usage exceeds 75%, response speed may drop noticeably, and the tool might even begin forgetting earlier instructions. This is understandable—after all, even humans struggle to remember everything at once. Consequently, blindly expanding context isn't a sustainable solution; fine-grained management is the correct path forward.
Precise File Referencing
A common mistake is feeding the entire src directory to the program all at once. The correct approach is on-demand loading. By using the @ symbol followed by a filename, you can precisely load target files.
For instance, you might write a prompt like: "Check the form validation logic in @frontend/src/views/Login.tsx and fix the password length validation error." This selective reading approach significantly saves token usage.
Conversation Compacting
If you are halfway through a feature module and the context indicator turns red, you can run the /compact command.
Once executed, the program condenses the lengthy chat history into a summary, preserving critical technical decisions, current task progress, and file modification states, while discarding conversational clutter from trial-and-error.
If you are starting a completely unrelated task, simply run the /clear command to wipe the conversation history. The project memories in CLAUDE.md will remain active, but the current chat history will be reset.
4. Maintaining Execution Control: Preventing Code Corruption
In real-world development, you must be cautious of the AI making unwanted modifications, especially during refactoring tasks involving multiple files. Uncontrolled edits can easily lead to a cascade of errors.
Claude Code offers different interaction modes to handle tasks of varying complexity.
Plan Mode
Pressing Shift+Tab toggles Plan Mode. This is an incredibly valuable feature when dealing with complex development.
Once you input your requirements in this mode, the program won't start writing code right away. Instead, it generates a detailed step-by-step execution plan.
For example, if you ask to refactor existing session-based authentication to JWT, the tool might lay out the following plan:
- Install the relevant
jsonwebtokendependencies. - Create token generation and parsing utilities in the utils directory.
- Update the backend login endpoint, replacing session logic with JWT.
- Update the frontend interceptor to include the token in request headers.
Developers can review this plan first, make changes, or approve it. This functions like a design review before writing any code, preventing extensive damage to the codebase.
Extended Thinking Mode
When encountering complex, sporadic bugs or designing architectures that require careful trade-offs, you can enable Extended Thinking mode. This consumes more computational resources but allows the program to perform deeper reasoning before producing a final answer. It is best reserved for hard-to-diagnose issues rather than typical CRUD tasks.
5. Permissions and Security Boundaries
As a locally run command-line utility, Claude Code has the capability to read files, modify code, and even execute shell scripts. Adhering to the principle of least privilege, the tool prompts for authorization before performing sensitive actions.
Developers can customize these permission boundaries based on the project's trust level. This control is configured by modifying the local settings.json file:
{
"permissions": {
"allowedTools": ["Read", "Write", "Glob", "Bash(npm run dev)"],
"blockedTools": ["Bash(rm *)", "Bash(git push -f)"],
"autoApprove": ["Write(frontend/src/views/*)"]
}
}
In the above configuration, allowedTools defines the whitelist, blockedTools locks out hazardous commands, and autoApprove permits code modifications in specific directories without prompting. Avoid adding overly broad terminal execution permissions to the auto-approve list.
Part 1 Summary & Next Time
In this first part, we completed the foundational setup. By utilizing ServBay to deploy our Node.js environment, generating a structured CLAUDE.md file for project memory, mastering context management, and using Plan Mode and permission controls, we successfully established a secure local development workflow.
With this system established, the command-line AI programming assistant is fully integrated into your environment.
In the upcoming Part 2, we will explore advanced capabilities, including configuring MCP (Model Context Protocol) to connect external databases and documentation, and writing custom skills for Claude to further enhance your productivity.




Top comments (0)