6 6
7> Добро пожаловать в Claude Code!7> Добро пожаловать в Claude Code!
8 8
9export const InstallConfigurator = ({defaultSurface = 'terminal'}) => {
10 const TERM = {
11 mac: {
12 label: 'macOS / Linux',
13 cmd: 'curl -fsSL https://claude.ai/install.sh | bash'
14 },
15 win: {
16 label: 'Windows'
17 },
18 brew: {
19 label: 'Homebrew',
20 cmd: 'brew install --cask claude-code'
21 },
22 winget: {
23 label: 'WinGet',
24 cmd: 'winget install Anthropic.ClaudeCode'
25 }
26 };
27 const WIN_VARIANTS = {
28 ps: 'irm https://claude.ai/install.ps1 | iex',
29 cmd: 'curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd'
30 };
31 const TABS = [{
32 key: 'terminal',
33 label: 'Terminal'
34 }, {
35 key: 'desktop',
36 label: 'Desktop'
37 }, {
38 key: 'vscode',
39 label: 'VS Code'
40 }, {
41 key: 'jetbrains',
42 label: 'JetBrains'
43 }];
44 const ALT_TARGETS = {
45 desktop: {
46 name: 'Desktop',
47 tagline: 'The full agent in a native app for macOS and Windows.',
48 installLabel: 'Download the app',
49 installHref: 'https://claude.com/download?utm_source=claude_code&utm_medium=docs&utm_content=configurator_desktop_download',
50 guideHref: '/en/desktop-quickstart'
51 },
52 vscode: {
53 name: 'VS Code',
54 tagline: 'Review diffs, manage context, and chat without leaving your editor.',
55 installLabel: 'Install from Marketplace',
56 installHref: 'https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code',
57 altCmd: 'code --install-extension anthropic.claude-code',
58 guideHref: '/en/vs-code'
59 },
60 jetbrains: {
61 name: 'JetBrains',
62 tagline: 'Native plugin for IntelliJ, PyCharm, WebStorm, and other JetBrains IDEs.',
63 installLabel: 'Install from Marketplace',
64 installHref: 'https://plugins.jetbrains.com/plugin/27310-claude-code-beta-',
65 guideHref: '/en/jetbrains'
66 }
67 };
68 const PROVIDERS = [{
69 key: 'anthropic',
70 label: 'Anthropic'
71 }, {
72 key: 'bedrock',
73 label: 'Amazon Bedrock'
74 }, {
75 key: 'foundry',
76 label: 'Microsoft Foundry'
77 }, {
78 key: 'vertex',
79 label: 'Google Vertex AI'
80 }];
81 const PROVIDER_NOTICE = {
82 bedrock: <>
83 <strong>Configure your AWS account first.</strong> Running on Bedrock
84 requires model access enabled in the AWS console and IAM credentials.{' '}
85 <a href="/en/amazon-bedrock">Bedrock setup guide →</a>
86 </>,
87 vertex: <>
88 <strong>Configure your GCP project first.</strong> Running on Vertex AI
89 requires the Vertex API enabled and a service account with the right
90 permissions.{' '}
91 <a href="/en/google-vertex-ai">Vertex setup guide →</a>
92 </>,
93 foundry: <>
94 <strong>Configure your Azure resources first.</strong> Running on
95 Microsoft Foundry requires an Azure subscription with a Foundry resource
96 and model deployments provisioned.{' '}
97 <a href="/en/microsoft-foundry">Foundry setup guide →</a>
98 </>
99 };
100 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">
101 <polyline points="20 6 9 17 4 12" />
102 </svg>;
103 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">
104 <rect x="9" y="9" width="13" height="13" rx="2" />
105 <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
106 </svg>;
107 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">
108 <line x1="5" y1="12" x2="19" y2="12" />
109 <polyline points="12 5 19 12 12 19" />
110 </svg>;
111 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">
112 <line x1="7" y1="17" x2="17" y2="7" />
113 <polyline points="7 7 17 7 17 17" />
114 </svg>;
115 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">
116 <circle cx="12" cy="12" r="10" />
117 <line x1="12" y1="16" x2="12" y2="12" />
118 <line x1="12" y1="8" x2="12.01" y2="8" />
119 </svg>;
120 const [target, setTarget] = useState(defaultSurface);
121 const [team, setTeam] = useState(false);
122 const [provider, setProvider] = useState('anthropic');
123 const [pkg, setPkg] = useState(() => (/Win/).test(navigator.userAgent) ? 'win' : 'mac');
124 const [winCmd, setWinCmd] = useState(false);
125 const [copied, setCopied] = useState(null);
126 const copyTimer = useRef(null);
127 const handleCopy = async (text, key) => {
128 try {
129 await navigator.clipboard.writeText(text);
130 } catch {
131 const ta = document.createElement('textarea');
132 ta.value = text;
133 document.body.appendChild(ta);
134 ta.select();
135 document.execCommand('copy');
136 document.body.removeChild(ta);
137 }
138 clearTimeout(copyTimer.current);
139 setCopied(key);
140 copyTimer.current = setTimeout(() => setCopied(null), 1800);
141 };
142 const cardBodyCmd = (cmd, prompt) => {
143 const on = copied === 'term';
144 return <div className="cc-ic-card-body">
145 <span className="cc-ic-prompt">{prompt || '$'}</span>
146 <div className="cc-ic-cmd">{cmd}</div>
147 <button type="button" className={'cc-ic-copy' + (on ? ' cc-ic-copied' : '')} onClick={() => handleCopy(cmd, 'term')}>
148 {on ? iconCheck(13) : iconCopy(13)}
149 <span>{on ? 'Copied' : 'Copy'}</span>
150 </button>
151 </div>;
152 };
153 const isWinInstaller = pkg === 'win';
154 const isWinPrompt = pkg === 'win' || pkg === 'winget';
155 const terminalCmd = isWinInstaller ? WIN_VARIANTS[winCmd ? 'cmd' : 'ps'] : TERM[pkg].cmd;
156 const alt = ALT_TARGETS[target];
157 const showNotice = team && provider !== 'anthropic';
158 const STYLES = `
159.cc-ic {
160 --ic-slate: #141413;
161 --ic-clay: #d97757;
162 --ic-clay-deep: #c6613f;
163 --ic-gray-000: #ffffff;
164 --ic-gray-150: #f0eee6;
165 --ic-gray-550: #73726c;
166 --ic-gray-700: #3d3d3a;
167 --ic-border-subtle: rgba(31, 30, 29, 0.08);
168 --ic-border-default: rgba(31, 30, 29, 0.15);
169 --ic-border-strong: rgba(31, 30, 29, 0.3);
170 --ic-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
171 font-family: 'Anthropic Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
172 font-size: 14px; line-height: 1.5; color: var(--ic-slate);
173 margin: 8px 0 32px;
174}
175.dark .cc-ic {
176 --ic-slate: #f0eee6;
177 --ic-gray-000: #262624;
178 --ic-gray-150: #1f1e1d;
179 --ic-gray-550: #91908a;
180 --ic-gray-700: #bfbdb4;
181 --ic-border-subtle: rgba(240, 238, 230, 0.08);
182 --ic-border-default: rgba(240, 238, 230, 0.14);
183 --ic-border-strong: rgba(240, 238, 230, 0.28);
184}
185.dark .cc-ic-check { background: transparent; }
186.dark .cc-ic-card { border: 0.5px solid var(--ic-border-subtle); }
187.dark .cc-ic-p-pill.cc-ic-active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
188.cc-ic *, .cc-ic *::before, .cc-ic *::after { box-sizing: border-box; }
189.cc-ic a { text-decoration: none; }
190.cc-ic a:not([class]) { color: inherit; }
191.cc-ic button { font-family: inherit; cursor: pointer; }
192
193.cc-ic-tab-strip {
194 display: inline-flex; gap: 2px;
195 padding: 4px; background: var(--ic-gray-150);
196 border-radius: 10px; overflow-x: auto;
197 max-width: 100%;
198}
199.cc-ic-tab {
200 appearance: none; background: none; border: none;
201 padding: 10px 18px; font-size: 15px; font-weight: 430;
202 color: var(--ic-gray-550); border-radius: 7px;
203 white-space: nowrap;
204 transition: color 0.12s, background-color 0.12s;
205}
206.cc-ic-tab:hover { color: var(--ic-gray-700); }
207.cc-ic-tab.cc-ic-active {
208 color: var(--ic-slate); font-weight: 500;
209 background: var(--ic-gray-000);
210 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
211}
212.dark .cc-ic-tab.cc-ic-active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
213
214.cc-ic-team-wrap { padding: 16px 0 20px; }
215.cc-ic-team-toggle {
216 display: flex; align-items: center; gap: 12px; font-family: inherit;
217 padding: 12px 16px; font-size: 14px; font-weight: 430;
218 color: var(--ic-gray-700); cursor: pointer; user-select: none;
219 width: fit-content; background: var(--ic-gray-150);
220 border: 0.5px solid var(--ic-border-subtle); border-radius: 8px;
221 transition: border-color 0.15s;
222}
223.cc-ic-team-toggle:hover { border-color: var(--ic-border-default); }
224.cc-ic-team-toggle.cc-ic-checked {
225 background: rgba(217, 119, 87, 0.08);
226 border-color: rgba(217, 119, 87, 0.25);
227}
228.cc-ic-check {
229 width: 16px; height: 16px;
230 border: 1px solid var(--ic-border-strong); border-radius: 4px;
231 background: var(--ic-gray-000);
232 display: flex; align-items: center; justify-content: center;
233 flex-shrink: 0;
234}
235.cc-ic-check svg { color: #fff; display: none; }
236.cc-ic-team-toggle.cc-ic-checked .cc-ic-check { background: var(--ic-clay-deep); border-color: var(--ic-clay-deep); }
237.cc-ic-team-toggle.cc-ic-checked .cc-ic-check svg { display: block; }
238
239.cc-ic-team-reveal { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
240.cc-ic-sales {
241 display: flex; align-items: center; justify-content: space-between;
242 gap: 16px; padding: 14px 16px;
243 background: var(--ic-gray-000); border: 0.5px solid var(--ic-border-default);
244 border-radius: 8px; flex-wrap: wrap;
245}
246.cc-ic-sales-text { font-size: 13px; color: var(--ic-gray-700); line-height: 1.5; flex: 1; min-width: 200px; }
247.cc-ic-sales-text strong { font-weight: 550; color: var(--ic-slate); }
248.cc-ic-sales-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
249.cc-ic-btn-clay {
250 display: inline-flex; align-items: center; gap: 8px;
251 background: var(--ic-clay-deep); color: #fff; border: none;
252 border-radius: 8px; padding: 8px 14px;
253 font-size: 13px; font-weight: 500;
254 transition: background-color 0.15s; white-space: nowrap;
255}
256.cc-ic-btn-clay:hover { background: var(--ic-clay); }
257.cc-ic-btn-ghost {
258 display: inline-flex; align-items: center; gap: 8px;
259 background: transparent; color: var(--ic-gray-700);
260 border: 0.5px solid var(--ic-border-default);
261 border-radius: 8px; padding: 8px 14px;
262 font-size: 13px; font-weight: 500;
263}
264.cc-ic-btn-ghost:hover { background: rgba(0, 0, 0, 0.04); }
265
266.cc-ic-provider-bar {
267 display: flex; align-items: center; gap: 12px;
268 padding: 14px 16px; background: var(--ic-gray-150);
269 border-radius: 8px; font-size: 13px; flex-wrap: wrap;
270}
271.cc-ic-provider-bar .cc-ic-label { color: var(--ic-gray-550); flex-shrink: 0; }
272.cc-ic-provider-pills { display: flex; gap: 4px; flex-wrap: wrap; }
273.cc-ic-p-pill {
274 appearance: none; border: none; background: transparent;
275 padding: 6px 12px; border-radius: 6px;
276 font-size: 13px; font-weight: 430; color: var(--ic-gray-700);
277 white-space: nowrap;
278}
279.cc-ic-p-pill:hover { background: rgba(0, 0, 0, 0.04); }
280.cc-ic-p-pill.cc-ic-active {
281 background: var(--ic-gray-000); color: var(--ic-slate);
282 font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
283}
284.cc-ic-provider-notice {
285 display: flex; padding: 16px 18px;
286 background: var(--ic-gray-000); border: 0.5px solid var(--ic-border-default);
287 border-radius: 8px; gap: 14px; align-items: flex-start;
288}
289.cc-ic-provider-notice > svg { color: var(--ic-gray-550); margin-top: 2px; flex-shrink: 0; }
290.cc-ic-provider-notice-body { font-size: 14px; line-height: 1.55; color: var(--ic-gray-700); }
291.cc-ic-provider-notice-body strong { font-weight: 550; color: var(--ic-slate); }
292.cc-ic-provider-notice-body a { color: var(--ic-clay-deep); font-weight: 500; }
293.cc-ic-provider-notice-body a:hover { text-decoration: underline; }
294
295.cc-ic-card { background: #141413; border-radius: 12px; overflow: hidden; }
296.cc-ic-subtabs {
297 display: flex; align-items: center;
298 background: #1a1918;
299 border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
300 padding: 0 8px; overflow-x: auto;
301}
302.cc-ic-subtab {
303 appearance: none; background: none; border: none;
304 padding: 12px 16px; font-size: 12px;
305 color: rgba(255, 255, 255, 0.5);
306 position: relative; white-space: nowrap;
307}
308.cc-ic-subtab:hover { color: rgba(255, 255, 255, 0.75); }
309.cc-ic-subtab.cc-ic-active { color: #fff; }
310.cc-ic-subtab.cc-ic-active::after {
311 content: ''; position: absolute;
312 left: 12px; right: 12px; bottom: -0.5px;
313 height: 2px; background: var(--ic-clay);
314}
315.cc-ic-shell-switch {
316 display: inline-flex; gap: 2px;
317 margin: 14px 26px 0; padding: 3px;
318 background: rgba(255, 255, 255, 0.06);
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);
328 cursor: pointer; user-select: none; white-space: nowrap;
329 transition: color 120ms ease, background-color 120ms ease;
330}
331.cc-ic-shell-option:hover { color: rgba(255, 255, 255, 0.85); }
332.cc-ic-shell-option.cc-ic-active {
333 background: rgba(255, 255, 255, 0.12);
334 color: #fff;
335 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
336}
337
338.cc-ic-card-body { padding: 24px 26px; display: flex; align-items: flex-start; gap: 14px; }
339.cc-ic-prompt {
340 color: var(--ic-clay); font-family: var(--ic-font-mono);
341 font-size: 17px; user-select: none; padding-top: 2px;
342}
343.cc-ic-cmd {
344 flex: 1; font-family: var(--ic-font-mono);
345 font-size: 17px; color: #f0eee6;
346 line-height: 1.55; white-space: pre-wrap; word-break: break-word;
347}
348.cc-ic-copy {
349 display: inline-flex; align-items: center; gap: 6px;
350 background: rgba(255, 255, 255, 0.08);
351 border: 0.5px solid rgba(255, 255, 255, 0.12);
352 color: rgba(255, 255, 255, 0.85);
353 padding: 7px 13px; border-radius: 8px;
354 font-size: 13px; font-weight: 500; flex-shrink: 0;
355}
356.cc-ic-copy:hover { background: rgba(255, 255, 255, 0.14); }
357.cc-ic-copy.cc-ic-copied { background: var(--ic-clay-deep); border-color: var(--ic-clay-deep); color: #fff; }
358
359.cc-ic-below {
360 margin-top: 12px; font-size: 13px; color: var(--ic-gray-550);
361 display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline;
362}
363.cc-ic-below a { color: var(--ic-gray-700); border-bottom: 0.5px solid var(--ic-border-default); }
364.cc-ic-below a:hover { color: var(--ic-clay-deep); border-bottom-color: var(--ic-clay-deep); }
365.cc-ic-handoff {
366 padding: 22px 24px;
367 background: linear-gradient(180deg, #faf9f4 0%, #f3f1e9 100%);
368 border: 0.5px solid var(--ic-border-default);
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);
371}
372.dark .cc-ic-handoff {
373 background: linear-gradient(180deg, #262624 0%, #1f1e1d 100%);
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;
383}
384.cc-ic-handoff-actions { display: flex; gap: 10px; flex-wrap: wrap; }
385.cc-ic-handoff-alt {
386 margin-top: 12px; font-size: 12px; color: var(--ic-gray-550);
387}
388.cc-ic-handoff-alt code {
389 font-family: var(--ic-font-mono); font-size: 11px;
390 background: var(--ic-gray-150); padding: 2px 6px;
391 border-radius: 4px; color: var(--ic-gray-700);
392}
393.cc-ic-copy-sm {
394 appearance: none; border: none;
395 display: inline-flex; align-items: center; justify-content: center;
396 width: 22px; height: 22px;
397 margin-left: 4px; vertical-align: middle;
398 background: var(--ic-gray-150); color: var(--ic-gray-550);
399 border-radius: 4px;
400 transition: color 0.1s, background-color 0.1s;
401}
402.cc-ic-copy-sm:hover { color: var(--ic-gray-700); background: var(--ic-border-default); }
403.cc-ic-copy-sm.cc-ic-copied { background: var(--ic-clay-deep); color: #fff; }
404
405@media (max-width: 720px) {
406 .cc-ic-tab { padding: 12px 14px; font-size: 14px; }
407 .cc-ic-sales-actions { width: 100%; }
408 .cc-ic-card-body { padding: 20px; }
409 .cc-ic-cmd { font-size: 15px; }
410}
411`;
412 return <div className="cc-ic not-prose">
413 <style>{STYLES}</style>
414
415 {}
416 <div className="cc-ic-tab-strip" role="tablist">
417 {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)}>
418 {t.label}
419 </button>)}
420 </div>
421
422 {}
423 <div className="cc-ic-team-wrap">
424 <button type="button" role="switch" aria-checked={team} className={'cc-ic-team-toggle' + (team ? ' cc-ic-checked' : '')} onClick={() => setTeam(!team)}>
425 <span className="cc-ic-check">{iconCheck(11)}</span>
426 <span>
427 I’m buying for a team or company (SSO, AWS/Azure/GCP, central billing)
428 </span>
429 </button>
430 </div>
431
432 {}
433 {team && <div className="cc-ic-team-reveal">
434 <div className="cc-ic-sales">
435 <div className="cc-ic-sales-text">
436 <strong>Set up your team:</strong> self-serve or talk to sales.
437 </div>
438 <div className="cc-ic-sales-actions">
439 <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">
440 Get started
441 </a>
442 <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">
443 Contact sales {iconArrowRight()}
444 </a>
445 </div>
446 </div>
447
448 <div className="cc-ic-provider-bar">
449 <span className="cc-ic-label">Run on</span>
450 <div className="cc-ic-provider-pills" role="radiogroup" aria-label="Provider">
451 {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)}>
452 {p.label}
453 </button>)}
454 </div>
455 </div>
456
457 {showNotice && <div className="cc-ic-provider-notice">
458 {iconInfo()}
459 <div className="cc-ic-provider-notice-body">
460 {PROVIDER_NOTICE[provider]}
461 </div>
462 </div>}
463 </div>}
464
465 {}
466 {target === 'terminal' && <div className="cc-ic-card">
467 <div className="cc-ic-subtabs" role="tablist" aria-label="Install method">
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)}>
469 {TERM[k].label}
470 </button>)}
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>}
486 {cardBodyCmd(terminalCmd, isWinPrompt ? '>' : '$')}
487 </div>}
488
489 {}
490 {target === 'terminal' && <div className="cc-ic-below">
491 {isWinInstaller && <span>
492 <a href="https://git-scm.com/downloads/win" target="_blank" rel="noopener">
493 Git for Windows
494 </a>{' '}
495 recommended. PowerShell is used if Git Bash is absent.
496 </span>}
497 {(pkg === 'brew' || pkg === 'winget') && <span>
498 Does not auto-update. Run{' '}
499 <code>{pkg === 'brew' ? 'brew upgrade claude-code' : 'winget upgrade Anthropic.ClaudeCode'}</code>{' '}
500 periodically.
501 </span>}
502 <a href="/en/troubleshoot-install">Installation troubleshooting</a>
503 </div>}
504
505 {alt && <div className="cc-ic-handoff">
506 <div className="cc-ic-handoff-title">Claude Code for {alt.name}</div>
507 <div className="cc-ic-handoff-sub">{alt.tagline}</div>
508 <div className="cc-ic-handoff-actions">
509 <a href={alt.installHref} className="cc-ic-btn-clay" {...alt.installHref.startsWith('http') ? {
510 target: '_blank',
511 rel: 'noopener'
512 } : {}}>
513 {alt.installLabel} {iconArrowUpRight(13)}
514 </a>
515 <a href={alt.guideHref} className="cc-ic-btn-ghost">
516 {alt.name} guide {iconArrowRight(12)}
517 </a>
518 </div>
519 {alt.altCmd && <div className="cc-ic-handoff-alt">
520 or run <code>{alt.altCmd}</code>
521 <button type="button" className={'cc-ic-copy-sm' + (copied === 'alt' ? ' cc-ic-copied' : '')} onClick={() => handleCopy(alt.altCmd, 'alt')} aria-label="Copy command">
522 {copied === 'alt' ? iconCheck(11) : iconCopy(11)}
523 </button>
524 </div>}
525 </div>}
526 </div>;
527};
528
529export const Experiment = ({flag, treatment, children}) => {
530 const VID_KEY = 'exp_vid';
531 const CONSENT_COUNTRIES = new Set(['AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE', 'RE', 'GP', 'MQ', 'GF', 'YT', 'BL', 'MF', 'PM', 'WF', 'PF', 'NC', 'AW', 'CW', 'SX', 'FO', 'GL', 'AX', 'GB', 'UK', 'AI', 'BM', 'IO', 'VG', 'KY', 'FK', 'GI', 'MS', 'PN', 'SH', 'TC', 'GG', 'JE', 'IM', 'CA', 'BR', 'IN']);
532 const fnv1a = s => {
533 let h = 0x811c9dc5;
534 for (let i = 0; i < s.length; i++) {
535 h ^= s.charCodeAt(i);
536 h += (h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24);
537 }
538 return h >>> 0;
539 };
540 const bucket = (seed, vid) => fnv1a(fnv1a(seed + vid) + '') % 10000 < 5000 ? 'control' : 'treatment';
541 const [decision] = useState(() => {
542 const params = new URLSearchParams(location.search);
543 const preBucketed = document.documentElement.dataset['gb_' + flag.replace(/-/g, '_')];
544 const force = params.get('gb-force');
545 if (force) {
546 for (const p of force.split(',')) {
547 const [k, v] = p.split(':');
548 if (k === flag) return {
549 variant: v || 'treatment',
550 track: false
551 };
552 }
553 }
554 if (navigator.globalPrivacyControl) {
555 return {
556 variant: 'control',
557 track: false
558 };
559 }
560 const prefsMatch = document.cookie.match(/(?:^|; )anthropic-consent-preferences=([^;]+)/);
561 if (prefsMatch) {
562 try {
563 if (JSON.parse(decodeURIComponent(prefsMatch[1])).analytics !== true) {
564 return {
565 variant: 'control',
566 track: false
567 };
568 }
569 } catch {
570 return {
571 variant: 'control',
572 track: false
573 };
574 }
575 } else {
576 const country = params.get('country')?.toUpperCase() || (document.cookie.match(/(?:^|; )cf_geo=([A-Z]{2})/) || [])[1];
577 if (!country || CONSENT_COUNTRIES.has(country)) {
578 return {
579 variant: 'control',
580 track: false
581 };
582 }
583 }
584 let vid;
585 try {
586 const ajsMatch = document.cookie.match(/(?:^|; )ajs_anonymous_id=([^;]+)/);
587 if (ajsMatch) {
588 vid = decodeURIComponent(ajsMatch[1]).replace(/^"|"$/g, '');
589 } else {
590 vid = localStorage.getItem(VID_KEY);
591 if (!vid) {
592 vid = crypto.randomUUID();
593 }
594 document.cookie = `ajs_anonymous_id=${vid}; domain=.claude.com; path=/; Secure; SameSite=Lax; max-age=31536000`;
595 }
596 try {
597 localStorage.setItem(VID_KEY, vid);
598 } catch {}
599 } catch {
600 return {
601 variant: 'control',
602 track: false
603 };
604 }
605 const variant = preBucketed === '1' ? 'treatment' : preBucketed === '0' ? 'control' : bucket(flag, vid);
606 return {
607 variant,
608 track: true,
609 vid
610 };
611 });
612 useEffect(() => {
613 if (!decision.track) return;
614 fetch('https://api.anthropic.com/api/event_logging/v2/batch', {
615 method: 'POST',
616 headers: {
617 'Content-Type': 'application/json',
618 'x-service-name': 'claude_code_docs'
619 },
620 body: JSON.stringify({
621 events: [{
622 event_type: 'GrowthbookExperimentEvent',
623 event_data: {
624 device_id: decision.vid,
625 anonymous_id: decision.vid,
626 timestamp: new Date().toISOString(),
627 experiment_id: flag,
628 variation_id: decision.variant === 'treatment' ? 1 : 0,
629 environment: 'production'
630 }
631 }]
632 }),
633 keepalive: true
634 }).catch(() => {});
635 }, []);
636 return decision.variant === 'treatment' ? treatment : children;
637};
638
639Это руководство по быстрому старту позволит вам использовать AI-powered кодирование всего за несколько минут. К концу вы поймёте, как использовать Claude Code для типичных задач разработки.9Это руководство по быстрому старту позволит вам использовать AI-powered кодирование всего за несколько минут. К концу вы поймёте, как использовать Claude Code для типичных задач разработки.
640 10
641<Experiment flag="quickstart-install-configurator" treatment={<InstallConfigurator />} />
642
643## Перед началом11## Перед началом
644 12
645Убедитесь, что у вас есть:13Убедитесь, что у вас есть:
647* Открытый терминал или командная строка15* Открытый терминал или командная строка
648 * Если вы никогда раньше не использовали терминал, ознакомьтесь с [руководством по терминалу](/ru/terminal-guide)16 * Если вы никогда раньше не использовали терминал, ознакомьтесь с [руководством по терминалу](/ru/terminal-guide)
649* Проект кода для работы17* Проект кода для работы
650* [Подписка Claude](https://claude.com/pricing?utm_source=claude_code\&utm_medium=docs\&utm_content=quickstart_prereq) (Pro, Max, Teams или Enterprise), учётная запись [Claude Console](https://console.anthropic.com/) или доступ через [поддерживаемого облачного провайдера](/ru/third-party-integrations)18* [Подписка Claude](https://claude.com/pricing?utm_source=claude_code\&utm_medium=docs\&utm_content=quickstart_prereq) (Pro, Max, Team или Enterprise), учётная запись [Claude Console](https://console.anthropic.com/) или доступ через [поддерживаемого облачного провайдера](/ru/third-party-integrations)
651 19
652<Note>20<Note>
653 Это руководство охватывает CLI терминала. Claude Code также доступен в [веб-версии](https://claude.ai/code), как [настольное приложение](/ru/desktop), в [VS Code](/ru/vs-code) и [JetBrains IDE](/ru/jetbrains), в [Slack](/ru/slack) и в CI/CD с [GitHub Actions](/ru/github-actions) и [GitLab](/ru/gitlab-ci-cd). Смотрите [все интерфейсы](/ru/overview#use-claude-code-everywhere).21 Это руководство охватывает CLI терминала. Claude Code также доступен в [веб-версии](https://claude.ai/code), как [настольное приложение](/ru/desktop), в [VS Code](/ru/vs-code) и [JetBrains IDEs](/ru/jetbrains), в [Slack](/ru/slack) и в CI/CD с [GitHub Actions](/ru/github-actions) и [GitLab](/ru/gitlab-ci-cd). Смотрите [все интерфейсы](/ru/overview#use-claude-code-everywhere).
654</Note>22</Note>
655 23
656## Шаг 1: Установите Claude Code24## Шаг 1: Установите Claude Code
727 95
728Вы можете войти, используя любой из этих типов учётных записей:96Вы можете войти, используя любой из этих типов учётных записей:
729 97
730* [Claude Pro, Max, Teams или Enterprise](https://claude.com/pricing?utm_source=claude_code\&utm_medium=docs\&utm_content=quickstart_login) (рекомендуется)98* [Claude Pro, Max, Team или Enterprise](https://claude.com/pricing?utm_source=claude_code\&utm_medium=docs\&utm_content=quickstart_login) (рекомендуется)
731* [Claude Console](https://console.anthropic.com/) (доступ к API с предоплаченными кредитами). При первом входе рабочее пространство "Claude Code" автоматически создаётся в Console для централизованного отслеживания затрат.99* [Claude Console](https://console.anthropic.com/) (доступ к API с предоплаченными кредитами). При первом входе рабочее пространство "Claude Code" автоматически создаётся в Console для централизованного отслеживания затрат.
732* [Amazon Bedrock, Google Vertex AI или Microsoft Foundry](/ru/third-party-integrations) (облачные провайдеры для предприятий)100* [Amazon Bedrock, Google Vertex AI или Microsoft Foundry](/ru/third-party-integrations) (облачные провайдеры для предприятий)
733 101
899| `claude -p "query"` | Запустить одноразовый запрос, затем выйти | `claude -p "explain this function"` |267| `claude -p "query"` | Запустить одноразовый запрос, затем выйти | `claude -p "explain this function"` |
900| `claude -c` | Продолжить самый последний разговор в текущем каталоге | `claude -c` |268| `claude -c` | Продолжить самый последний разговор в текущем каталоге | `claude -c` |
901| `claude -r` | Возобновить предыдущий разговор | `claude -r` |269| `claude -r` | Возобновить предыдущий разговор | `claude -r` |
902| `claude commit` | Создать коммит Git | `claude commit` |
903| `/clear` | Очистить историю разговора | `/clear` |270| `/clear` | Очистить историю разговора | `/clear` |
904| `/help` | Показать доступные команды | `/help` |271| `/help` | Показать доступные команды | `/help` |
905| `exit` или Ctrl+C | Выйти из Claude Code | `exit` |272| `exit` или Ctrl+D | Выйти из Claude Code | `exit` |
906 273
907Смотрите [справочник CLI](/ru/cli-reference) для полного списка команд.274Смотрите [справочник CLI](/ru/cli-reference) для полного списка команд.
908 275