Docs/Claude Code CLI

Claude Code CLI

Set up and use the Claude Code CLI directly in your Codespace terminal for AI-powered coding assistance.

Claude Code CLI

Claude Code is Anthropic's command-line tool that lets you interact with Claude directly from the terminal. If you have a Claude subscription (Pro, Max, or Team), you can use it inside your PhantomWP Codespace at no extra cost -- it's included with your subscription.

Why Use Claude Code in Your Codespace?

While PhantomWP already includes a built-in AI assistant, Claude Code CLI gives you a different workflow:

Terminal-native -- works right in your terminal, no separate panel needed
Full project context -- Claude can read, create, and edit files across your entire project
Agentic coding -- Claude can run commands, install packages, and make multi-file changes autonomously
Included with your Claude subscription -- no separate API keys or billing

Opening the Terminal

First, open the terminal in the PhantomWP IDE. Click the Terminal icon in the top header bar -- it looks like a command prompt icon (>_).

The terminal panel opens at the bottom of the IDE. This is a full Linux terminal running inside your GitHub Codespace.

Installing Claude Code

If Claude Code isn't installed yet, you'll see an Install Claude button in the terminal header bar. Click it and the installation runs automatically.

💡

You only need to install Claude Code once per Codespace. If your Codespace is stopped and restarted, the installation persists. However, if your Codespace is deleted and recreated, you will need to install it again.

Launching Claude Code

After installation, start Claude Code by typing:

claude

The first time you run it, Claude Code will ask you to authenticate.

Authentication Steps

Run claude in the terminal
Claude Code displays an authentication URL and a one-time code
Select the full URL -- it will likely span two lines in the terminal, so make sure you select it completely from https:// to the very end
Paste the URL into your browser
Log in with your Claude account (the same one you use for claude.ai)
Authorize the connection when prompted
Claude Code will display a confirmation code -- copy it
Paste the code back into the terminal to complete the authentication

💡

The authentication URL often wraps across two lines in the terminal. Double-check that you've selected the entire URL before pasting it into your browser. If the page doesn't load, you're probably missing the end of the URL.

Once authenticated, Claude Code remembers your session within your Codespace. You won't need to log in again unless the Codespace is deleted. Claude Code is installed and authorized only on your own Codespace -- it does not affect other users or projects.

Using Claude Code

Once launched, you'll see the Claude Code prompt. You can ask Claude to do anything in your project:

Reading and Understanding Code

> What files make up the homepage?

> Explain how the navigation component works

> Find all places where the WordPress API is called

Making Changes

> Add a dark mode toggle to the header

> Create a new blog post template with a sidebar

> Fix the mobile layout on the footer -- the columns should stack vertically

Running Commands

> Install the Astro sitemap integration and configure it

> Run the dev server and check if there are any errors

> Update all npm packages to their latest versions

Multi-file Operations

> Refactor the color scheme across all components to use CSS variables

> Add TypeScript types to all the utility functions

> Create a contact form page with validation

The Open Button and Permissions

When Claude Code wants to perform an action (create a file, edit code, run a command), it will ask for your permission. You'll see a prompt like:

Claude wants to edit src/components/Header.astro
[Allow] [Deny] [Allow All]

Clicking Allow All (or pressing a) tells Claude to proceed with all actions without asking again for the current session. This is useful when you trust Claude to make a series of changes -- for example, refactoring a component across multiple files.

⚠️

"Allow All" only lasts for the current Claude Code session. The next time you run claude, it will ask for permissions again. Review the first few changes carefully before enabling it.

Skipping Permissions Entirely

If you want Claude to run without any permission prompts at all, you can launch it with:

claude --dangerously-skip-permissions

This gives Claude full control to create, edit, and delete files without asking. It's useful when you want a fully hands-off experience, but the flag name is intentionally a warning -- use it only when you're comfortable with Claude making changes on its own. Since your Codespace is an isolated environment, the risk is limited to your project files.

Useful Commands

Inside Claude Code, you can use these built-in commands:

Command	What It Does
`/help`	Show available commands
`/clear`	Clear conversation history
`/compact`	Summarize conversation to save context
`/cost`	Show token usage and cost
`/plugin`	Manage and run plugins
`/quit`	Exit Claude Code

Tips for Best Results

Be Specific About Your Project

Claude Code can see your project files, but giving context helps:

Instead of: "Fix the styling"

Try: "The hero section on the homepage has too much padding on mobile. Reduce the top and bottom padding to 2rem on screens smaller than 768px."

Use It for Multi-step Tasks

Claude Code excels at tasks that span multiple files:

"Add a new 'Team' page with cards for each team member, pulling data from WordPress custom fields"
"Set up a blog section with pagination, categories, and an RSS feed"
"Create a reusable Button component and replace all existing buttons with it"

Combine with the Built-in AI

Use both tools for different workflows:

Claude Code CLI -- for large, multi-file changes and terminal-based workflows
PhantomWP AI Chat -- for quick questions, single-file edits, and visual editor assistance

Troubleshooting

"command not found: claude"

The CLI isn't installed yet. Click the Install Claude button in the terminal header bar to install it.

Authentication Failed

Make sure you have an active Claude subscription (Pro, Max, or Team)
Try running claude again -- it will restart the auth flow
Check that your browser isn't blocking popups from the authentication page

Claude Can't See My Files

Make sure you're running claude from the project root directory. Run pwd to verify you're in /workspaces/your-project-name.

Slow Responses

Claude Code uses your Claude subscription's quota. If responses are slow:

Check your subscription tier -- higher tiers have higher rate limits
Use /compact to reduce context size if the conversation is long
Start a new session with claude if context has grown too large

Next Steps

AI Assistant -- Learn about the built-in AI chat and inline AI
Understanding Codespaces -- Learn more about how Codespaces work
Working with Files -- Create and manage project files

AI Assistant

Connecting WordPress