← Back to daily report
+0 lines added
-422 lines removed
> ## Documentation Index¶
> Fetch the complete documentation index at: https://code.claude.com/docs/llms.txt¶
> Use this file to discover all available pages before exploring further.¶
¶
# 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: <>¶
<strong>Configure your AWS account first.</strong> Running on Bedrock¶
requires model access enabled in the AWS console and IAM credentials.{' '}¶
<a href="/en/amazon-bedrock">Bedrock setup guide →</a>¶
</>,¶
vertex: <>¶
<strong>Configure your GCP project first.</strong> Running on Vertex AI¶
requires the Vertex API enabled and a service account with the right¶
permissions.{' '}¶
<a href="/en/google-vertex-ai">Vertex setup guide →</a>¶
</>,¶
foundry: <>¶
<strong>Configure your Azure resources first.</strong> Running on¶
Microsoft Foundry requires an Azure subscription with a Foundry resource¶
and model deployments provisioned.{' '}¶
<a href="/en/microsoft-foundry">Foundry setup guide →</a>¶
</>¶
};¶
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">¶
<polyline points="20 6 9 17 4 12" />¶
</svg>;¶
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">¶
<rect x="9" y="9" width="13" height="13" rx="2" />¶
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />¶
</svg>;¶
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">¶
<line x1="5" y1="12" x2="19" y2="12" />¶
<polyline points="12 5 19 12 12 19" />¶
</svg>;¶
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">¶
<line x1="7" y1="17" x2="17" y2="7" />¶
<polyline points="7 7 17 7 17 17" />¶
</svg>;¶
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">¶
<circle cx="12" cy="12" r="10" />¶
<line x1="12" y1="16" x2="12" y2="12" />¶
<line x1="12" y1="8" x2="12.01" y2="8" />¶
</svg>;¶
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 || '$'}</span>¶
<div className="cc-ic-cmd">{cmd}</div>¶
<button type="button" className={'cc-ic-copy' + (on ? ' cc-ic-copied' : '')} onClick={() => handleCopy(cmd, 'term')}>¶
{on ? iconCheck(13) : iconCopy(13)}¶
<span>{on ? 'Copied' : 'Copy'}</span>¶
</button>¶
</div>;¶
};¶
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">¶
<style>{STYLES}</style>¶
¶
{}¶
<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}¶
</button>;¶
})}¶
</div>}¶
{cardBodyCmd(terminalCmd, isWinPrompt ? '>' : '$')}¶
</div>}¶
¶
{}¶
{target === 'terminal' && <div className="cc-ic-below">¶
{isWinInstaller && <span>¶
<a href="https://git-scm.com/downloads/win" target="_blank" rel="noopener">¶
Git for Windows¶
</a>{' '}¶
recommended. PowerShell is used if Git Bash is absent.¶
</span>}¶
{(pkg === 'brew' || pkg === 'winget') && <span>¶
Does not auto-update. Run{' '}¶
<code>{pkg === 'brew' ? 'brew upgrade claude-code' : 'winget upgrade Anthropic.ClaudeCode'}</code>{' '}¶
periodically.¶
</span>}¶
<a href="/en/troubleshoot-install">Installation troubleshooting</a>¶
</div>}¶
¶
{alt && <div className="cc-ic-handoff">¶
<div className="cc-ic-handoff-title">Claude Code for {alt.name}</div>¶
<div className="cc-ic-handoff-sub">{alt.tagline}</div>¶
<div className="cc-ic-handoff-actions">¶
<a href={alt.installHref} className="cc-ic-btn-clay" {...alt.installHref.startsWith('http') ? {¶
target: '_blank',¶
rel: 'noopener'¶
} : {}}>¶
{alt.installLabel} {iconArrowUpRight(13)}¶
</a>¶
<a href={alt.guideHref} className="cc-ic-btn-ghost">¶
{alt.name} guide {iconArrowRight(12)}¶
</a>¶
</div>¶
{alt.altCmd && <div className="cc-ic-handoff-alt">¶
or run <code>{alt.altCmd}</code>¶
<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)}¶
</button>¶
</div>}¶
</div>}¶
</div>;¶
};¶
¶
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.¶
¶
<div className="install-configurator-slot">¶
<InstallConfigurator />¶
</div>¶
¶
## Before you begin¶
¶
Make sure you have:¶
¶
* A terminal or command prompt open¶
* If you've never used the terminal before, check out the [terminal guide](/en/terminal-guide)¶
* A code project to work with¶
* A [Claude subscription](https://claude.com/pricing?utm_source=claude_code\&utm_medium=docs\&utm_content=quickstart_prereq) (Pro, Max, Team, or Enterprise), [Claude Console](https://console.anthropic.com/) account, or access through a [supported cloud provider](/en/third-party-integrations)¶
¶
<Note>¶
This guide covers the terminal CLI. Claude Code is also available on the [web](https://claude.ai/code), as a [desktop app](/en/desktop), in [VS Code](/en/vs-code) and [JetBrains IDEs](/en/jetbrains), in [Slack](/en/slack), and in CI/CD with [GitHub Actions](/en/github-actions) and [GitLab](/en/gitlab-ci-cd). See [all interfaces](/en/overview#use-claude-code-everywhere).¶
</Note>¶
¶
## Step 1: Install Claude Code¶
¶
To install Claude Code, use one of the following methods:¶
¶
<Tabs>¶
<Tab title="Native Install (Recommended)">¶
**macOS, Linux, WSL:**¶
¶
```bash theme={null}¶
curl -fsSL https://claude.ai/install.sh | bash¶
```¶
¶
**Windows PowerShell:**¶
¶
```powershell theme={null}¶
irm https://claude.ai/install.ps1 | iex¶
```¶
¶
**Windows CMD:**¶
¶
```batch theme={null}¶
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd¶
```¶
¶
If you see `The token '&&' is not a valid statement separator`, you're in PowerShell, not CMD. If you see `'irm' is not recognized as an internal or external command`, you're in CMD, not PowerShell. Your prompt shows `PS C:\` when you're in PowerShell and `C:\` without the `PS` when you're in CMD.¶
¶
[Git for Windows](https://git-scm.com/downloads/win) is recommended on native Windows so Claude Code can use the Bash tool. If Git for Windows is not installed, Claude Code uses PowerShell as the shell tool instead. WSL setups do not need Git for Windows.¶
¶
<Info>¶
Native installations automatically update in the background to keep you on the latest version.¶
</Info>¶
</Tab>¶
¶
<Tab title="Homebrew">¶
```bash theme={null}¶
brew install --cask claude-code¶
```¶
¶
Homebrew offers two casks. `claude-code` tracks the stable release channel, which is typically about a week behind and skips releases with major regressions. `claude-code@latest` tracks the latest channel and receives new versions as soon as they ship.¶
¶
<Info>¶
Homebrew installations do not auto-update. Run `brew upgrade claude-code` or `brew upgrade claude-code@latest`, depending on which cask you installed, to get the latest features and security fixes.¶
</Info>¶
</Tab>¶
¶
<Tab title="WinGet">¶
```powershell theme={null}¶
winget install Anthropic.ClaudeCode¶
```¶
¶
<Info>¶
WinGet installations do not auto-update. Run `winget upgrade Anthropic.ClaudeCode` periodically to get the latest features and security fixes.¶
</Info>¶
</Tab>¶
</Tabs>¶
¶
You can also install with [apt, dnf, or apk](/en/setup#install-with-linux-package-managers) on Debian, Fedora, RHEL, and Alpine.¶
¶
## Step 2: Log in to your account¶
¶
Claude Code requires an account to use. When you start an interactive session with the `claude` command, you'll need to log in:¶
¶
```bash theme={null}¶
claude¶
# You'll be prompted to log in on first use¶
```¶
¶
```bash theme={null}¶
/login¶
# Follow the prompts to log in with your account¶
```¶
¶
You can log in using any of these account types:¶
¶
* [Claude Pro, Max, Team, or Enterprise](https://claude.com/pricing?utm_source=claude_code\&utm_medium=docs\&utm_content=quickstart_login) (recommended)¶
* [Claude Console](https://console.anthropic.com/) (API access with pre-paid credits). On first login, a "Claude Code" workspace is automatically created in the Console for centralized cost tracking.¶
* [Amazon Bedrock, Google Vertex AI, or Microsoft Foundry](/en/third-party-integrations) (enterprise cloud providers)¶
¶
Once logged in, your credentials are stored and you won't need to log in again. To switch accounts later, use the `/login` command.¶
¶
## Step 3: Start your first session¶
¶
Open your terminal in any project directory and start Claude Code:¶
¶
```bash theme={null}¶
cd /path/to/your/project¶
claude¶
```¶
¶
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.¶
¶
<Tip>¶
After logging in (Step 2), your credentials are stored on your system. Learn more in [Credential Management](/en/authentication#credential-management).¶
</Tip>¶
¶
## Step 4: Ask your first question¶
¶
Let's start with understanding your codebase. Try one of these commands:¶
¶
```text theme={null}¶
what does this project do?¶
```¶
¶
Claude will analyze your files and provide a summary. You can also ask more specific questions:¶
¶
```text theme={null}¶
what technologies does this project use?¶
```¶
¶
```text theme={null}¶
where is the main entry point?¶
```¶
¶
```text theme={null}¶
explain the folder structure¶
```¶
¶
You can also ask Claude about its own capabilities:¶
¶
```text theme={null}¶
what can Claude Code do?¶
```¶
¶
```text theme={null}¶
how do I create custom skills in Claude Code?¶
```¶
¶
```text theme={null}¶
can Claude Code work with Docker?¶
```¶
¶
<Note>¶
Claude Code reads your project files as needed. You don't have to manually add context.¶
</Note>¶
¶
## Step 5: Make your first code change¶
¶
Now let's make Claude Code do some actual coding. Try a simple task:¶
¶
```text theme={null}¶
add a hello world function to the main file¶
```¶
¶
Claude Code will:¶
¶
1. Find the appropriate file¶
2. Show you the proposed changes¶
3. Ask for your approval¶
4. Make the edit¶
¶
<Note>¶
Claude Code always asks for permission before modifying files. You can approve individual changes or enable "Accept all" mode for a session.¶
</Note>¶
¶
## Step 6: Use Git with Claude Code¶
¶
Claude Code makes Git operations conversational:¶
¶
```text theme={null}¶
what files have I changed?¶
```¶
¶
```text theme={null}¶
commit my changes with a descriptive message¶
```¶
¶
You can also prompt for more complex Git operations:¶
¶
```text theme={null}¶
create a new branch called feature/quickstart¶
```¶
¶
```text theme={null}¶
show me the last 5 commits¶
```¶
¶
```text theme={null}¶
help me resolve merge conflicts¶
```¶
¶
## Step 7: Fix a bug or add a feature¶
¶
Claude is proficient at debugging and feature implementation.¶
¶
Describe what you want in natural language:¶
¶
```text theme={null}¶
add input validation to the user registration form¶
```¶
¶
Or fix existing issues:¶
¶
```text theme={null}¶
there's a bug where users can submit empty forms - fix it¶
```¶
¶
Claude Code will:¶
¶
* Locate the relevant code¶
* Understand the context¶
* Implement a solution¶
* Run tests if available¶
¶
## Step 8: Test out other common workflows¶
¶
There are a number of ways to work with Claude:¶
¶
**Refactor code**¶
¶
```text theme={null}¶
refactor the authentication module to use async/await instead of callbacks¶
```¶
¶
**Write tests**¶
¶
```text theme={null}¶
write unit tests for the calculator functions¶
```¶
¶
**Update documentation**¶
¶
```text theme={null}¶
update the README with installation instructions¶
```¶
¶
**Code review**¶
¶
```text theme={null}¶
review my changes and suggest improvements¶
```¶
¶
<Tip>¶
Talk to Claude like you would a helpful colleague. Describe what you want to achieve, and it will help you get there.¶
</Tip>¶
¶
## Essential commands¶
¶
Here are the most important commands for daily use:¶
¶
| Command | What it does | Example |¶
| ------------------- | ------------------------------------------------------ | ----------------------------------- |¶
| `claude` | Start interactive mode | `claude` |¶
| `claude "task"` | Run a one-time task | `claude "fix the build error"` |¶
| `claude -p "query"` | Run one-off query, then exit | `claude -p "explain this function"` |¶
| `claude -c` | Continue most recent conversation in current directory | `claude -c` |¶
| `claude -r` | Resume a previous conversation | `claude -r` |¶
| `/clear` | Clear conversation history | `/clear` |¶
| `/help` | Show available commands | `/help` |¶
| `exit` or Ctrl+D | Exit Claude Code | `exit` |¶
¶
See the [CLI reference](/en/cli-reference) for a complete list of commands.¶
¶
## Pro tips for beginners¶
¶
For more, see [best practices](/en/best-practices) and [common workflows](/en/common-workflows).¶
¶
<AccordionGroup>¶
<Accordion title="Be specific with your requests">¶
Instead of: "fix the bug"¶
¶
Try: "fix the login bug where users see a blank screen after entering wrong credentials"¶
</Accordion>¶
¶
<Accordion title="Use step-by-step instructions">¶
Break complex tasks into steps:¶
¶
```text theme={null}¶
1. create a new database table for user profiles¶
2. create an API endpoint to get and update user profiles¶
3. build a webpage that allows users to see and edit their information¶
```¶
</Accordion>¶
¶
<Accordion title="Let Claude explore first">¶
Before making changes, let Claude understand your code:¶
¶
```text theme={null}¶
analyze the database schema¶
```¶
¶
```text theme={null}¶
build a dashboard showing products that are most frequently returned by our UK customers¶
```¶
</Accordion>¶
¶
<Accordion title="Save time with shortcuts">¶
* Press `?` to see all available keyboard shortcuts¶
* Use Tab for command completion¶
* Press ↑ for command history¶
* Type `/` to see all commands and skills¶
</Accordion>¶
</AccordionGroup>¶
¶
## What's next?¶
¶
Now that you've learned the basics, explore more advanced features:¶
¶
<CardGroup cols={2}>¶
<Card title="How Claude Code works" icon="microchip" href="/en/how-claude-code-works">¶
Understand the agentic loop, built-in tools, and how Claude Code interacts with your project¶
</Card>¶
¶
<Card title="Best practices" icon="star" href="/en/best-practices">¶
Get better results with effective prompting and project setup¶
</Card>¶
¶
<Card title="Common workflows" icon="graduation-cap" href="/en/common-workflows">¶
Step-by-step guides for common tasks¶
</Card>¶
¶
<Card title="Extend Claude Code" icon="puzzle-piece" href="/en/features-overview">¶
Customize with CLAUDE.md, skills, hooks, MCP, and more¶
</Card>¶
</CardGroup>¶
¶
## Getting help¶
¶
* **In Claude Code**: Type `/help` or ask "how do I..."¶
* **Documentation**: You're here! Browse other guides¶
* **Community**: Join our [Discord](https://www.anthropic.com/discord) for tips and support¶
Unified Diff
--- a/quickstart.md
+++ b/quickstart.md
@@ -6,531 +6,7 @@
> 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: <>
- <strong>Configure your AWS account first.</strong> Running on Bedrock
- requires model access enabled in the AWS console and IAM credentials.{' '}
- <a href="/en/amazon-bedrock">Bedrock setup guide →</a>
- </>,
- vertex: <>
- <strong>Configure your GCP project first.</strong> Running on Vertex AI
- requires the Vertex API enabled and a service account with the right
- permissions.{' '}
- <a href="/en/google-vertex-ai">Vertex setup guide →</a>
- </>,
- foundry: <>
- <strong>Configure your Azure resources first.</strong> Running on
- Microsoft Foundry requires an Azure subscription with a Foundry resource
- and model deployments provisioned.{' '}
- <a href="/en/microsoft-foundry">Foundry setup guide →</a>
- </>
- };
- 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">
- <polyline points="20 6 9 17 4 12" />
- </svg>;
- 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">
- <rect x="9" y="9" width="13" height="13" rx="2" />
- <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
- </svg>;
- 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">
- <line x1="5" y1="12" x2="19" y2="12" />
- <polyline points="12 5 19 12 12 19" />
- </svg>;
- 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">
- <line x1="7" y1="17" x2="17" y2="7" />
- <polyline points="7 7 17 7 17 17" />
- </svg>;
- 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">
- <circle cx="12" cy="12" r="10" />
- <line x1="12" y1="16" x2="12" y2="12" />
- <line x1="12" y1="8" x2="12.01" y2="8" />
- </svg>;
- 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 || '$'}</span>
- <div className="cc-ic-cmd">{cmd}</div>
- <button type="button" className={'cc-ic-copy' + (on ? ' cc-ic-copied' : '')} onClick={() => handleCopy(cmd, 'term')}>
- {on ? iconCheck(13) : iconCopy(13)}
- <span>{on ? 'Copied' : 'Copy'}</span>
- </button>
- </div>;
- };
- 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">
- <style>{STYLES}</style>
-
- {}
- <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}
- </button>;
- })}
- </div>}
- {cardBodyCmd(terminalCmd, isWinPrompt ? '>' : '$')}
- </div>}
-
- {}
- {target === 'terminal' && <div className="cc-ic-below">
- {isWinInstaller && <span>
- <a href="https://git-scm.com/downloads/win" target="_blank" rel="noopener">
- Git for Windows
- </a>{' '}
- recommended. PowerShell is used if Git Bash is absent.
- </span>}
- {(pkg === 'brew' || pkg === 'winget') && <span>
- Does not auto-update. Run{' '}
- <code>{pkg === 'brew' ? 'brew upgrade claude-code' : 'winget upgrade Anthropic.ClaudeCode'}</code>{' '}
- periodically.
- </span>}
- <a href="/en/troubleshoot-install">Installation troubleshooting</a>
- </div>}
-
- {alt && <div className="cc-ic-handoff">
- <div className="cc-ic-handoff-title">Claude Code for {alt.name}</div>
- <div className="cc-ic-handoff-sub">{alt.tagline}</div>
- <div className="cc-ic-handoff-actions">
- <a href={alt.installHref} className="cc-ic-btn-clay" {...alt.installHref.startsWith('http') ? {
- target: '_blank',
- rel: 'noopener'
- } : {}}>
- {alt.installLabel} {iconArrowUpRight(13)}
- </a>
- <a href={alt.guideHref} className="cc-ic-btn-ghost">
- {alt.name} guide {iconArrowRight(12)}
- </a>
- </div>
- {alt.altCmd && <div className="cc-ic-handoff-alt">
- or run <code>{alt.altCmd}</code>
- <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)}
- </button>
- </div>}
- </div>}
- </div>;
-};
-
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.
-
-<div className="install-configurator-slot">
- <InstallConfigurator />
-</div>
## Before you begin