6 6
7> Welcome to Claude Code!7> Welcome to Claude Code!
8 8
9export const InstallConfigurator = () => {9export const InstallConfigurator = ({defaultSurface = 'terminal'}) => {
10 const TERM = {10 const TERM = {
11 mac: {11 mac: {
12 label: 'macOS / Linux',12 label: 'macOS / Linux',
44 const ALT_TARGETS = {44 const ALT_TARGETS = {
45 desktop: {45 desktop: {
46 name: 'Desktop',46 name: 'Desktop',
47 tagline: 'The full agent in a native app for macOS and Windows.',
47 installLabel: 'Download the app',48 installLabel: 'Download the app',
48 installHref: 'https://claude.com/download?utm_source=claude_code&utm_medium=docs&utm_content=configurator_desktop_download',49 installHref: 'https://claude.com/download?utm_source=claude_code&utm_medium=docs&utm_content=configurator_desktop_download',
49 guideHref: '/en/desktop-quickstart'50 guideHref: '/en/desktop-quickstart'
50 },51 },
51 vscode: {52 vscode: {
52 name: 'VS Code',53 name: 'VS Code',
54 tagline: 'Review diffs, manage context, and chat without leaving your editor.',
53 installLabel: 'Install from Marketplace',55 installLabel: 'Install from Marketplace',
54 installHref: 'https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code',56 installHref: 'https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code',
55 altCmd: 'code --install-extension anthropic.claude-code',57 altCmd: 'code --install-extension anthropic.claude-code',
57 },59 },
58 jetbrains: {60 jetbrains: {
59 name: 'JetBrains',61 name: 'JetBrains',
62 tagline: 'Native plugin for IntelliJ, PyCharm, WebStorm, and other JetBrains IDEs.',
60 installLabel: 'Install from Marketplace',63 installLabel: 'Install from Marketplace',
61 installHref: 'https://plugins.jetbrains.com/plugin/27310-claude-code-beta-',64 installHref: 'https://plugins.jetbrains.com/plugin/27310-claude-code-beta-',
62 guideHref: '/en/jetbrains'65 guideHref: '/en/jetbrains'
114 <line x1="12" y1="16" x2="12" y2="12" />117 <line x1="12" y1="16" x2="12" y2="12" />
115 <line x1="12" y1="8" x2="12.01" y2="8" />118 <line x1="12" y1="8" x2="12.01" y2="8" />
116 </svg>;119 </svg>;
117 const [target, setTarget] = useState('terminal');120 const [target, setTarget] = useState(defaultSurface);
118 const [team, setTeam] = useState(false);121 const [team, setTeam] = useState(false);
119 const [provider, setProvider] = useState('anthropic');122 const [provider, setProvider] = useState('anthropic');
120 const [pkg, setPkg] = useState(() => (/Win/).test(navigator.userAgent) ? 'win' : 'mac');123 const [pkg, setPkg] = useState(() => (/Win/).test(navigator.userAgent) ? 'win' : 'mac');
296 border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);299 border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
297 padding: 0 8px; overflow-x: auto;300 padding: 0 8px; overflow-x: auto;
298}301}
299.cc-ic-subtab-spacer { flex: 1; }
300.cc-ic-subtab {302.cc-ic-subtab {
301 appearance: none; background: none; border: none;303 appearance: none; background: none; border: none;
302 padding: 12px 16px; font-size: 12px;304 padding: 12px 16px; font-size: 12px;
310 left: 12px; right: 12px; bottom: -0.5px;312 left: 12px; right: 12px; bottom: -0.5px;
311 height: 2px; background: var(--ic-clay);313 height: 2px; background: var(--ic-clay);
312}314}
313.cc-ic-cmd-toggle {315.cc-ic-shell-switch {
314 display: flex; align-items: center; gap: 8px; font-family: inherit;316 display: inline-flex; gap: 2px;
315 background: none; border: none;317 margin: 14px 26px 0; padding: 3px;
316 padding: 0 12px; font-size: 11px;318 background: rgba(255, 255, 255, 0.06);
317 color: rgba(255, 255, 255, 0.5);319 border: 0.5px solid rgba(255, 255, 255, 0.08);
320 border-radius: 8px;
321 font-family: inherit;
322}
323.cc-ic-shell-option {
324 font: inherit; font-size: 12px; font-weight: 500;
325 padding: 5px 12px; border-radius: 6px;
326 background: transparent; border: none;
327 color: rgba(255, 255, 255, 0.55);
318 cursor: pointer; user-select: none; white-space: nowrap;328 cursor: pointer; user-select: none; white-space: nowrap;
329 transition: color 120ms ease, background-color 120ms ease;
319}330}
320.cc-ic-cmd-toggle:hover { color: rgba(255, 255, 255, 0.75); }331.cc-ic-shell-option:hover { color: rgba(255, 255, 255, 0.85); }
321.cc-ic-mini-check {332.cc-ic-shell-option.cc-ic-active {
322 width: 12px; height: 12px;333 background: rgba(255, 255, 255, 0.12);
323 border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 3px;334 color: #fff;
324 display: flex; align-items: center; justify-content: center;335 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
325 flex-shrink: 0;
326}336}
327.cc-ic-mini-check svg { color: #fff; display: none; }
328.cc-ic-cmd-toggle.cc-ic-checked .cc-ic-mini-check { background: var(--ic-clay-deep); border-color: var(--ic-clay-deep); }
329.cc-ic-cmd-toggle.cc-ic-checked .cc-ic-mini-check svg { display: block; }
330 337
331.cc-ic-card-body { padding: 24px 26px; display: flex; align-items: flex-start; gap: 14px; }338.cc-ic-card-body { padding: 24px 26px; display: flex; align-items: flex-start; gap: 14px; }
332.cc-ic-prompt {339.cc-ic-prompt {
356.cc-ic-below a { color: var(--ic-gray-700); border-bottom: 0.5px solid var(--ic-border-default); }363.cc-ic-below a { color: var(--ic-gray-700); border-bottom: 0.5px solid var(--ic-border-default); }
357.cc-ic-below a:hover { color: var(--ic-clay-deep); border-bottom-color: var(--ic-clay-deep); }364.cc-ic-below a:hover { color: var(--ic-clay-deep); border-bottom-color: var(--ic-clay-deep); }
358.cc-ic-handoff {365.cc-ic-handoff {
359 padding: 20px 22px;366 padding: 22px 24px;
360 background: var(--ic-gray-000);367 background: linear-gradient(180deg, #faf9f4 0%, #f3f1e9 100%);
361 border: 0.5px solid var(--ic-border-default);368 border: 0.5px solid var(--ic-border-default);
362 border-radius: 12px;369 border-radius: 12px;
370 box-shadow: 0 1px 2px rgba(31, 30, 29, 0.04), 0 6px 16px -4px rgba(31, 30, 29, 0.06);
363}371}
364.cc-ic-handoff-head {372.dark .cc-ic-handoff {
365 font-size: 14px; line-height: 1.55; color: var(--ic-gray-700);373 background: linear-gradient(180deg, #262624 0%, #1f1e1d 100%);
366 margin-bottom: 14px;374 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -4px rgba(0, 0, 0, 0.4);
375}
376.cc-ic-handoff-title {
377 font-size: 16px; font-weight: 550; color: var(--ic-slate);
378 letter-spacing: -0.01em; margin-bottom: 4px;
379}
380.cc-ic-handoff-sub {
381 font-size: 14px; line-height: 1.5; color: var(--ic-gray-700);
382 margin-bottom: 18px;
367}383}
368.cc-ic-handoff-head strong { font-weight: 550; color: var(--ic-slate); }
369.cc-ic-handoff-actions { display: flex; gap: 10px; flex-wrap: wrap; }384.cc-ic-handoff-actions { display: flex; gap: 10px; flex-wrap: wrap; }
370.cc-ic-handoff-alt {385.cc-ic-handoff-alt {
371 margin-top: 12px; font-size: 12px; color: var(--ic-gray-550);386 margin-top: 12px; font-size: 12px; color: var(--ic-gray-550);
453 {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)}>468 {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)}>
454 {TERM[k].label}469 {TERM[k].label}
455 </button>)}470 </button>)}
456 <span className="cc-ic-subtab-spacer" />
457 {isWinInstaller && <button type="button" role="switch" aria-checked={winCmd} className={'cc-ic-cmd-toggle' + (winCmd ? ' cc-ic-checked' : '')} onClick={() => setWinCmd(!winCmd)}>
458 <span className="cc-ic-mini-check">{iconCheck(9)}</span>
459 <span>CMD instead of PowerShell</span>
460 </button>}
461 </div>471 </div>
472 {isWinInstaller && <div className="cc-ic-shell-switch" role="tablist" aria-label="Shell">
473 {[{
474 k: 'ps',
475 label: 'PowerShell'
476 }, {
477 k: 'cmd',
478 label: 'CMD'
479 }].map(({k, label}) => {
480 const active = k === 'cmd' === winCmd;
481 return <button key={k} type="button" role="tab" aria-selected={active} className={'cc-ic-shell-option' + (active ? ' cc-ic-active' : '')} onClick={() => setWinCmd(k === 'cmd')}>
482 {label}
483 </button>;
484 })}
485 </div>}
462 {cardBodyCmd(terminalCmd, isWinPrompt ? '>' : '$')}486 {cardBodyCmd(terminalCmd, isWinPrompt ? '>' : '$')}
463 </div>}487 </div>}
464 488
479 </div>}503 </div>}
480 504
481 {alt && <div className="cc-ic-handoff">505 {alt && <div className="cc-ic-handoff">
482 <div className="cc-ic-handoff-head">506 <div className="cc-ic-handoff-title">Claude Code for {alt.name}</div>
483 <strong>The steps below use the command line.</strong>{' '}507 <div className="cc-ic-handoff-sub">{alt.tagline}</div>
484 Prefer {alt.name}? Install here, then follow the {alt.name} guide instead.
485 </div>
486 <div className="cc-ic-handoff-actions">508 <div className="cc-ic-handoff-actions">
487 <a href={alt.installHref} className="cc-ic-btn-clay" {...alt.installHref.startsWith('http') ? {509 <a href={alt.installHref} className="cc-ic-btn-clay" {...alt.installHref.startsWith('http') ? {
488 target: '_blank',510 target: '_blank',
518 const bucket = (seed, vid) => fnv1a(fnv1a(seed + vid) + '') % 10000 < 5000 ? 'control' : 'treatment';540 const bucket = (seed, vid) => fnv1a(fnv1a(seed + vid) + '') % 10000 < 5000 ? 'control' : 'treatment';
519 const [decision] = useState(() => {541 const [decision] = useState(() => {
520 const params = new URLSearchParams(location.search);542 const params = new URLSearchParams(location.search);
543 const preBucketed = document.documentElement.dataset['gb_' + flag.replace(/-/g, '_')];
521 const force = params.get('gb-force');544 const force = params.get('gb-force');
522 if (force) {545 if (force) {
523 for (const p of force.split(',')) {546 for (const p of force.split(',')) {
579 track: false602 track: false
580 };603 };
581 }604 }
605 const variant = preBucketed === '1' ? 'treatment' : preBucketed === '0' ? 'control' : bucket(flag, vid);
582 return {606 return {
583 variant: bucket(flag, vid),607 variant,
584 track: true,608 track: true,
585 vid609 vid
586 };610 };
614 638
615This 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.639This 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.
616 640
617<Experiment flag="quickstart-install-configurator" treatment={<InstallConfigurator />} />641<div className="install-configurator-slot">
642 <Experiment flag="install-configurator-default-surface" treatment={<InstallConfigurator defaultSurface="desktop" />}>
643 <InstallConfigurator />
644 </Experiment>
645</div>
618 646
619## Before you begin647## Before you begin
620 648
