Quickstart
Welcome to Claude Code!
export const InstallConfigurator = ({defaultSurface = 'terminal'}) => {
const TERM = {
mac: {
label: 'macOS / Linux',
cmd: 'curl -fsSL https://claude.ai/install.sh | bash'
},
win: {
label: 'Windows'
},
brew: {
label: 'Homebrew',
cmd: 'brew install --cask claude-code'
},
winget: {
label: 'WinGet',
cmd: 'winget install Anthropic.ClaudeCode'
}
};
const WIN_VARIANTS = {
ps: 'irm https://claude.ai/install.ps1 | iex',
cmd: 'curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd'
};
const TABS = [{
key: 'terminal',
label: 'Terminal'
}, {
key: 'desktop',
label: 'Desktop'
}, {
key: 'vscode',
label: 'VS Code'
}, {
key: 'jetbrains',
label: 'JetBrains'
}];
const ALT_TARGETS = {
desktop: {
name: 'Desktop',
tagline: 'The full agent in a native app for macOS and Windows.',
installLabel: 'Download the app',
installHref: 'https://claude.com/download?utm_source=claude_code&utm_medium=docs&utm_content=configurator_desktop_download',
guideHref: '/en/desktop-quickstart'
},
vscode: {
name: 'VS Code',
tagline: 'Review diffs, manage context, and chat without leaving your editor.',
installLabel: 'Install from Marketplace',
installHref: 'https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code',
altCmd: 'code --install-extension anthropic.claude-code',
guideHref: '/en/vs-code'
},
jetbrains: {
name: 'JetBrains',
tagline: 'Native plugin for IntelliJ, PyCharm, WebStorm, and other JetBrains IDEs.',
installLabel: 'Install from Marketplace',
installHref: 'https://plugins.jetbrains.com/plugin/27310-claude-code-beta-',
guideHref: '/en/jetbrains'
}
};
const PROVIDERS = [{
key: 'anthropic',
label: 'Anthropic'
}, {
key: 'bedrock',
label: 'Amazon Bedrock'
}, {
key: 'foundry',
label: 'Microsoft Foundry'
}, {
key: 'vertex',
label: 'Google Vertex AI'
}];
const PROVIDER_NOTICE = {
bedrock: <>
Configure your AWS account first. Running on Bedrock
requires model access enabled in the AWS console and IAM credentials.{' '}
Bedrock setup guide →
</>,
vertex: <>
Configure your GCP project first. Running on Vertex AI
requires the Vertex API enabled and a service account with the right
permissions.{' '}
Vertex setup guide →
</>,
foundry: <>
Configure your Azure resources first. Running on
Microsoft Foundry requires an Azure subscription with a Foundry resource
and model deployments provisioned.{' '}
Foundry setup guide →
</>
};
const iconCheck = (size = 14) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
;
const iconCopy = (size = 14) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
;
const iconArrowRight = (size = 13) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
;
const iconArrowUpRight = (size = 14) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
;
const iconInfo = (size = 16) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
;
const [target, setTarget] = useState(defaultSurface);
const [team, setTeam] = useState(false);
const [provider, setProvider] = useState('anthropic');
const [pkg, setPkg] = useState(() => (/Win/).test(navigator.userAgent) ? 'win' : 'mac');
const [winCmd, setWinCmd] = useState(false);
const [copied, setCopied] = useState(null);
const copyTimer = useRef(null);
const handleCopy = async (text, key) => {
try {
await navigator.clipboard.writeText(text);
} catch {
const ta = document.createElement('textarea');
ta.value = text;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
}
clearTimeout(copyTimer.current);
setCopied(key);
copyTimer.current = setTimeout(() => setCopied(null), 1800);
};
const cardBodyCmd = (cmd, prompt) => {
const on = copied === 'term';
return <div className="cc-ic-card-body">
<span className="cc-ic-prompt">{prompt || '$'}
<div className="cc-ic-cmd">{cmd}
<button type="button" className={'cc-ic-copy' + (on ? ' cc-ic-copied' : '')} onClick={() => handleCopy(cmd, 'term')}>
{on ? iconCheck(13) : iconCopy(13)}
{on ? 'Copied' : 'Copy'}
;
};
const isWinInstaller = pkg === 'win';
const isWinPrompt = pkg === 'win' || pkg === 'winget';
const terminalCmd = isWinInstaller ? WIN_VARIANTS[winCmd ? 'cmd' : 'ps'] : TERM[pkg].cmd;
const alt = ALT_TARGETS[target];
const showNotice = team && provider !== 'anthropic';
const STYLES = `
.cc-ic {
--ic-slate: #141413;
--ic-clay: #d97757;
--ic-clay-deep: #c6613f;
--ic-gray-000: #ffffff;
--ic-gray-150: #f0eee6;
--ic-gray-550: #73726c;
--ic-gray-700: #3d3d3a;
--ic-border-subtle: rgba(31, 30, 29, 0.08);
--ic-border-default: rgba(31, 30, 29, 0.15);
--ic-border-strong: rgba(31, 30, 29, 0.3);
--ic-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
font-family: 'Anthropic Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px; line-height: 1.5; color: var(--ic-slate);
margin: 8px 0 32px;
}
.dark .cc-ic {
--ic-slate: #f0eee6;
--ic-gray-000: #262624;
--ic-gray-150: #1f1e1d;
--ic-gray-550: #91908a;
--ic-gray-700: #bfbdb4;
--ic-border-subtle: rgba(240, 238, 230, 0.08);
--ic-border-default: rgba(240, 238, 230, 0.14);
--ic-border-strong: rgba(240, 238, 230, 0.28);
}
.dark .cc-ic-check { background: transparent; }
.dark .cc-ic-card { border: 0.5px solid var(--ic-border-subtle); }
.dark .cc-ic-p-pill.cc-ic-active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.cc-ic *, .cc-ic *::before, .cc-ic *::after { box-sizing: border-box; }
.cc-ic a { text-decoration: none; }
.cc-ic a:not([class]) { color: inherit; }
.cc-ic button { font-family: inherit; cursor: pointer; }
.cc-ic-tab-strip {
display: inline-flex; gap: 2px;
padding: 4px; background: var(--ic-gray-150);
border-radius: 10px; overflow-x: auto;
max-width: 100%;
}
.cc-ic-tab {
appearance: none; background: none; border: none;
padding: 10px 18px; font-size: 15px; font-weight: 430;
color: var(--ic-gray-550); border-radius: 7px;
white-space: nowrap;
transition: color 0.12s, background-color 0.12s;
}
.cc-ic-tab:hover { color: var(--ic-gray-700); }
.cc-ic-tab.cc-ic-active {
color: var(--ic-slate); font-weight: 500;
background: var(--ic-gray-000);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.dark .cc-ic-tab.cc-ic-active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.cc-ic-team-wrap { padding: 16px 0 20px; }
.cc-ic-team-toggle {
display: flex; align-items: center; gap: 12px; font-family: inherit;
padding: 12px 16px; font-size: 14px; font-weight: 430;
color: var(--ic-gray-700); cursor: pointer; user-select: none;
width: fit-content; background: var(--ic-gray-150);
border: 0.5px solid var(--ic-border-subtle); border-radius: 8px;
transition: border-color 0.15s;
}
.cc-ic-team-toggle:hover { border-color: var(--ic-border-default); }
.cc-ic-team-toggle.cc-ic-checked {
background: rgba(217, 119, 87, 0.08);
border-color: rgba(217, 119, 87, 0.25);
}
.cc-ic-check {
width: 16px; height: 16px;
border: 1px solid var(--ic-border-strong); border-radius: 4px;
background: var(--ic-gray-000);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.cc-ic-check svg { color: #fff; display: none; }
.cc-ic-team-toggle.cc-ic-checked .cc-ic-check { background: var(--ic-clay-deep); border-color: var(--ic-clay-deep); }
.cc-ic-team-toggle.cc-ic-checked .cc-ic-check svg { display: block; }
.cc-ic-team-reveal { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.cc-ic-sales {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 14px 16px;
background: var(--ic-gray-000); border: 0.5px solid var(--ic-border-default);
border-radius: 8px; flex-wrap: wrap;
}
.cc-ic-sales-text { font-size: 13px; color: var(--ic-gray-700); line-height: 1.5; flex: 1; min-width: 200px; }
.cc-ic-sales-text strong { font-weight: 550; color: var(--ic-slate); }
.cc-ic-sales-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cc-ic-btn-clay {
display: inline-flex; align-items: center; gap: 8px;
background: var(--ic-clay-deep); color: #fff; border: none;
border-radius: 8px; padding: 8px 14px;
font-size: 13px; font-weight: 500;
transition: background-color 0.15s; white-space: nowrap;
}
.cc-ic-btn-clay:hover { background: var(--ic-clay); }
.cc-ic-btn-ghost {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; color: var(--ic-gray-700);
border: 0.5px solid var(--ic-border-default);
border-radius: 8px; padding: 8px 14px;
font-size: 13px; font-weight: 500;
}
.cc-ic-btn-ghost:hover { background: rgba(0, 0, 0, 0.04); }
.cc-ic-provider-bar {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; background: var(--ic-gray-150);
border-radius: 8px; font-size: 13px; flex-wrap: wrap;
}
.cc-ic-provider-bar .cc-ic-label { color: var(--ic-gray-550); flex-shrink: 0; }
.cc-ic-provider-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.cc-ic-p-pill {
appearance: none; border: none; background: transparent;
padding: 6px 12px; border-radius: 6px;
font-size: 13px; font-weight: 430; color: var(--ic-gray-700);
white-space: nowrap;
}
.cc-ic-p-pill:hover { background: rgba(0, 0, 0, 0.04); }
.cc-ic-p-pill.cc-ic-active {
background: var(--ic-gray-000); color: var(--ic-slate);
font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.cc-ic-provider-notice {
display: flex; padding: 16px 18px;
background: var(--ic-gray-000); border: 0.5px solid var(--ic-border-default);
border-radius: 8px; gap: 14px; align-items: flex-start;
}
.cc-ic-provider-notice > svg { color: var(--ic-gray-550); margin-top: 2px; flex-shrink: 0; }
.cc-ic-provider-notice-body { font-size: 14px; line-height: 1.55; color: var(--ic-gray-700); }
.cc-ic-provider-notice-body strong { font-weight: 550; color: var(--ic-slate); }
.cc-ic-provider-notice-body a { color: var(--ic-clay-deep); font-weight: 500; }
.cc-ic-provider-notice-body a:hover { text-decoration: underline; }
.cc-ic-card { background: #141413; border-radius: 12px; overflow: hidden; }
.cc-ic-subtabs {
display: flex; align-items: center;
background: #1a1918;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
padding: 0 8px; overflow-x: auto;
}
.cc-ic-subtab {
appearance: none; background: none; border: none;
padding: 12px 16px; font-size: 12px;
color: rgba(255, 255, 255, 0.5);
position: relative; white-space: nowrap;
}
.cc-ic-subtab:hover { color: rgba(255, 255, 255, 0.75); }
.cc-ic-subtab.cc-ic-active { color: #fff; }
.cc-ic-subtab.cc-ic-active::after {
content: ''; position: absolute;
left: 12px; right: 12px; bottom: -0.5px;
height: 2px; background: var(--ic-clay);
}
.cc-ic-shell-switch {
display: inline-flex; gap: 2px;
margin: 14px 26px 0; padding: 3px;
background: rgba(255, 255, 255, 0.06);
border: 0.5px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-family: inherit;
}
.cc-ic-shell-option {
font: inherit; font-size: 12px; font-weight: 500;
padding: 5px 12px; border-radius: 6px;
background: transparent; border: none;
color: rgba(255, 255, 255, 0.55);
cursor: pointer; user-select: none; white-space: nowrap;
transition: color 120ms ease, background-color 120ms ease;
}
.cc-ic-shell-option:hover { color: rgba(255, 255, 255, 0.85); }
.cc-ic-shell-option.cc-ic-active {
background: rgba(255, 255, 255, 0.12);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.cc-ic-card-body { padding: 24px 26px; display: flex; align-items: flex-start; gap: 14px; }
.cc-ic-prompt {
color: var(--ic-clay); font-family: var(--ic-font-mono);
font-size: 17px; user-select: none; padding-top: 2px;
}
.cc-ic-cmd {
flex: 1; font-family: var(--ic-font-mono);
font-size: 17px; color: #f0eee6;
line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.cc-ic-copy {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255, 255, 255, 0.08);
border: 0.5px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.85);
padding: 7px 13px; border-radius: 8px;
font-size: 13px; font-weight: 500; flex-shrink: 0;
}
.cc-ic-copy:hover { background: rgba(255, 255, 255, 0.14); }
.cc-ic-copy.cc-ic-copied { background: var(--ic-clay-deep); border-color: var(--ic-clay-deep); color: #fff; }
.cc-ic-below {
margin-top: 12px; font-size: 13px; color: var(--ic-gray-550);
display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline;
}
.cc-ic-below a { color: var(--ic-gray-700); border-bottom: 0.5px solid var(--ic-border-default); }
.cc-ic-below a:hover { color: var(--ic-clay-deep); border-bottom-color: var(--ic-clay-deep); }
.cc-ic-handoff {
padding: 22px 24px;
background: linear-gradient(180deg, #faf9f4 0%, #f3f1e9 100%);
border: 0.5px solid var(--ic-border-default);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(31, 30, 29, 0.04), 0 6px 16px -4px rgba(31, 30, 29, 0.06);
}
.dark .cc-ic-handoff {
background: linear-gradient(180deg, #262624 0%, #1f1e1d 100%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -4px rgba(0, 0, 0, 0.4);
}
.cc-ic-handoff-title {
font-size: 16px; font-weight: 550; color: var(--ic-slate);
letter-spacing: -0.01em; margin-bottom: 4px;
}
.cc-ic-handoff-sub {
font-size: 14px; line-height: 1.5; color: var(--ic-gray-700);
margin-bottom: 18px;
}
.cc-ic-handoff-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-ic-handoff-alt {
margin-top: 12px; font-size: 12px; color: var(--ic-gray-550);
}
.cc-ic-handoff-alt code {
font-family: var(--ic-font-mono); font-size: 11px;
background: var(--ic-gray-150); padding: 2px 6px;
border-radius: 4px; color: var(--ic-gray-700);
}
.cc-ic-copy-sm {
appearance: none; border: none;
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
margin-left: 4px; vertical-align: middle;
background: var(--ic-gray-150); color: var(--ic-gray-550);
border-radius: 4px;
transition: color 0.1s, background-color 0.1s;
}
.cc-ic-copy-sm:hover { color: var(--ic-gray-700); background: var(--ic-border-default); }
.cc-ic-copy-sm.cc-ic-copied { background: var(--ic-clay-deep); color: #fff; }
@media (max-width: 720px) {
.cc-ic-tab { padding: 12px 14px; font-size: 14px; }
.cc-ic-sales-actions { width: 100%; }
.cc-ic-card-body { padding: 20px; }
.cc-ic-cmd { font-size: 15px; }
}
`;
return <div className="cc-ic not-prose">
{}
<div className="cc-ic-tab-strip" role="tablist">
{TABS.map(t => <button key={t.key} type="button" role="tab" aria-selected={target === t.key} className={'cc-ic-tab' + (target === t.key ? ' cc-ic-active' : '')} onClick={() => setTarget(t.key)}>
{t.label}
</button>)}
</div>
{}
<div className="cc-ic-team-wrap">
<button type="button" role="switch" aria-checked={team} className={'cc-ic-team-toggle' + (team ? ' cc-ic-checked' : '')} onClick={() => setTeam(!team)}>
<span className="cc-ic-check">{iconCheck(11)}</span>
<span>
I’m buying for a team or company (SSO, AWS/Azure/GCP, central billing)
</span>
</button>
</div>
{}
{team && <div className="cc-ic-team-reveal">
<div className="cc-ic-sales">
<div className="cc-ic-sales-text">
<strong>Set up your team:</strong> self-serve or talk to sales.
</div>
<div className="cc-ic-sales-actions">
<a href="https://claude.ai/upgrade?initialPlanType=team&utm_source=claude_code&utm_medium=docs&utm_content=configurator_team_get_started" className="cc-ic-btn-ghost">
Get started
</a>
<a href="https://www.anthropic.com/contact-sales?utm_source=claude_code&utm_medium=docs&utm_content=configurator_team_contact_sales" className="cc-ic-btn-clay">
Contact sales {iconArrowRight()}
</a>
</div>
</div>
<div className="cc-ic-provider-bar">
<span className="cc-ic-label">Run on</span>
<div className="cc-ic-provider-pills" role="radiogroup" aria-label="Provider">
{PROVIDERS.map(p => <button key={p.key} type="button" role="radio" aria-checked={provider === p.key} className={'cc-ic-p-pill' + (provider === p.key ? ' cc-ic-active' : '')} onClick={() => setProvider(p.key)}>
{p.label}
</button>)}
</div>
</div>
{showNotice && <div className="cc-ic-provider-notice">
{iconInfo()}
<div className="cc-ic-provider-notice-body">
{PROVIDER_NOTICE[provider]}
</div>
</div>}
</div>}
{}
{target === 'terminal' && <div className="cc-ic-card">
<div className="cc-ic-subtabs" role="tablist" aria-label="Install method">
{Object.keys(TERM).map(k => <button key={k} type="button" role="tab" aria-selected={pkg === k} className={'cc-ic-subtab' + (pkg === k ? ' cc-ic-active' : '')} onClick={() => setPkg(k)}>
{TERM[k].label}
</button>)}
</div>
{isWinInstaller && <div className="cc-ic-shell-switch" role="tablist" aria-label="Shell">
{[{
k: 'ps',
label: 'PowerShell'
}, {
k: 'cmd',
label: 'CMD'
}].map(({k, label}) => {
const active = k === 'cmd' === winCmd;
return <button key={k} type="button" role="tab" aria-selected={active} className={'cc-ic-shell-option' + (active ? ' cc-ic-active' : '')} onClick={() => setWinCmd(k === 'cmd')}>
{label}
;
})}
}
{cardBodyCmd(terminalCmd, isWinPrompt ? '>' : '$')}
}
} : {}}>
{alt.installLabel} {iconArrowUpRight(13)}
<a href={alt.guideHref} className="cc-ic-btn-ghost">
{alt.name} guide {iconArrowRight(12)}
{alt.altCmd && <div className="cc-ic-handoff-alt">
or run {alt.altCmd}
<button type="button" className={'cc-ic-copy-sm' + (copied === 'alt' ? ' cc-ic-copied' : '')} onClick={() => handleCopy(alt.altCmd, 'alt')} aria-label="Copy command">
{copied === 'alt' ? iconCheck(11) : iconCopy(11)}
}
}
;
};
This quickstart guide will have you using AI-powered coding assistance in a few minutes. By the end, you'll understand how to use Claude Code for common development tasks.
Claude Code requires an account to use. When you start an interactive session with the claude command, you'll need to log in:
Once logged in, your credentials are stored and you won't need to log in again. To switch accounts later, use the /login command.
You'll see the Claude Code welcome screen with your session information, recent conversations, and latest updates. Type /help for available commands or /resume to continue a previous conversation.
Let's start with understanding your codebase. Try one of these commands:
Claude will analyze your files and provide a summary. You can also ask more specific questions:
Now let's make Claude Code do some actual coding. Try a simple task:
Claude is proficient at debugging and feature implementation.