Claude Code overview
Claude Code is an agentic coding tool that reads your codebase, edits files, runs commands, and integrates with your development tools. Available in your terminal, IDE, desktop app, and browser.
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) => ; const iconCopy = (size = 14) => ; const iconArrowRight = (size = 13) => ; const iconArrowUpRight = (size = 14) => ; const iconInfo = (size = 16) => ; 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
.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-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} ; })}