3. First Experience with Claude Code

This chapter finally introduces you to using Claude Code to edit Streamlit applications.

Claude Code - The Era of Programming Just by Talking to AI

Claude Code functions as a "chatbot that can talk to your computer files."

Just like ChatGPT, you simply give instructions in natural language, and Claude Code writes code for you.

Even without knowing technical details, you get an experience like having an experienced engineer by your side, supportively helping you.

Claude Code isn't just a simple code generation tool. It supports all development-related tasks including code creation, bug discovery, explanations, refactoring, and test creation.

Let's launch Claude Code and actually use it.

Launching Claude Code

In the Codespaces environment, open the terminal. First, execute the following commands to launch Claude Code. When Claude Code gives operation instructions, you can operate using arrow keys and return (enter).

npm install -g @anthropic-ai/claude-code
claude

After executing the commands, complete the setup following these steps:

Select your preferred UI theme and press return.

Select "Claude account with subscription" and press return.

Instructions for external site transition will appear, but connection will be refused, so cancel here.

Return to the terminal and click the displayed link.

Press Authorize.

An Authentication Code will be displayed. Copy that code, return to the Codespaces screen, paste it, and press return. If login succeeds, the following screen will appear.

Follow the instructions to proceed with the operation. When you see the following screen, Claude Code is ready to run.

Practical Exercise - Let's Run Claude Code

One of Claude Code's most convenient features is file referencing using @ notation.

When you type @ in Claude Code, a list of files in the current project appears. When you select a file you want to reference, Claude Code automatically incorporates the file's contents into context.

For example, typing @Home.py loads the contents of the Home.py file into Claude Code, allowing you to ask questions or give editing instructions about that file.

In this chapter, let's have Claude Code explain the Home.py code.

@Home.py What kind of processing is performed in this file? Please explain.

When executed, an answer like the following returns after a few seconds.

Basic Principles for Communicating with Claude Code

There are basic principles for communicating more effectively with Claude Code.

The most important principle is setting clear goals. The official documentation states, "Claude performs best when it has a clear target to iterate against."

Rather than vague instructions, specific instructions like "Display sales data in a bar chart with months on the X-axis and sales amounts on the Y-axis" will get Claude Code to provide superior results.

Utilizing CLAUDE.md files is also an important element.

This file is a configuration file that Claude Code automatically loads at startup, serving to convey project context to the AI.

In the CLAUDE.md file, first write the tech stack (libraries and versions used). Next, explain project structure (directory configuration and file roles), and it's effective to include commonly used commands and code style rules.

What's important is writing "only necessary things concisely." Too much information might cause Claude Code to ignore important content.

By giving clear and specific instructions, Claude Code provides results that meet expectations.

Review and Next Steps

So far, you've mastered the basic usage of Claude Code.

You've overcome fear of the terminal interface and learned effective communication methods with your AI development partner. You've utilized integration features with the editor and become able to edit programs using natural language.

Basic skills learned this time:

• Launching Claude Code
• File referencing functionality using @ notation
• How to give clear instructions

These skills form the foundation for future learning.

In the next chapter, we'll have Claude Code generate code to build basic dashboards. Let's use this knowledge to take on more practical development challenges.