> ## Documentation Index
> Fetch the complete documentation index at: https://docs.teamsoclo.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Вступ

> Налаштуйте Codex, Claude Code та 20+ інструментів ШІ для кодингу з ключем TeamSocLo — однією командою або застосунком

export const InstallBox = ({lang = "vi", tools = ["codex", "claude"]}) => {
  const T = ({
    vi: {
      label: "API key hoặc mã CDK",
      ph: "sk-... hoặc TSL-XXXX-XXXX-XXXX",
      note: "Key chỉ được chèn vào lệnh ngay trên trình duyệt. Mã CDK được đổi qua trang Đổi mã CDK để lấy key, giống khi bạn tự đổi mã.",
      copy: "Copy",
      copied: "Đã copy",
      run: "Mở Terminal (macOS, Linux) hoặc PowerShell (Windows), dán lệnh rồi Enter.",
      redeeming: "Đang đổi mã CDK lấy key...",
      okTitle: "Đã đổi mã CDK. Key của bạn:",
      save: "Lưu key này lại. Đổi lại cùng mã luôn ra đúng key này, lệnh bên dưới đã điền sẵn key.",
      fail: "Không đổi được mã:",
      retry: "Thử lại",
      copyKey: "Copy key",
      pkg: "Gói"
    },
    en: {
      label: "API key or CDK code",
      ph: "sk-... or TSL-XXXX-XXXX-XXXX",
      note: "A key is only inserted into the command in your browser. A CDK code is redeemed through the CDK redeem page to get your key, the same as redeeming it yourself.",
      copy: "Copy",
      copied: "Copied",
      run: "Open Terminal (macOS, Linux) or PowerShell (Windows), paste the command and press Enter.",
      redeeming: "Redeeming the CDK code...",
      okTitle: "CDK code redeemed. Your key:",
      save: "Save this key. Redeeming the same code always returns this key; the command below already uses it.",
      fail: "Could not redeem the code:",
      retry: "Retry",
      copyKey: "Copy key",
      pkg: "Package"
    },
    zh: {
      label: "API 密钥或 CDK 码",
      ph: "sk-... 或 TSL-XXXX-XXXX-XXXX",
      note: "密钥只在浏览器中插入命令。CDK 码会通过兑换页面兑换出密钥，与你自己兑换相同。",
      copy: "复制",
      copied: "已复制",
      run: "打开终端（macOS、Linux）或 PowerShell（Windows），粘贴命令后回车。",
      redeeming: "正在兑换 CDK 码...",
      okTitle: "CDK 码已兑换。你的密钥：",
      save: "请保存此密钥。同一个码再次兑换总是得到这个密钥，下方命令已自动填入。",
      fail: "无法兑换：",
      retry: "重试",
      copyKey: "复制密钥",
      pkg: "套餐"
    },
    "zh-TW": {
      label: "API 金鑰或 CDK 碼",
      ph: "sk-... 或 TSL-XXXX-XXXX-XXXX",
      note: "金鑰只在瀏覽器中插入指令。CDK 碼會透過兌換頁面兌換出金鑰，與你自行兌換相同。",
      copy: "複製",
      copied: "已複製",
      run: "開啟終端機（macOS、Linux）或 PowerShell（Windows），貼上指令後按 Enter。",
      redeeming: "正在兌換 CDK 碼...",
      okTitle: "CDK 碼已兌換。你的金鑰：",
      save: "請保存此金鑰。同一個碼再次兌換總是得到這個金鑰，下方指令已自動填入。",
      fail: "無法兌換：",
      retry: "重試",
      copyKey: "複製金鑰",
      pkg: "方案"
    },
    ja: {
      label: "API キーまたは CDK コード",
      ph: "sk-... または TSL-XXXX-XXXX-XXXX",
      note: "キーはブラウザ内でコマンドに挿入されるだけです。CDK コードは交換ページを通じてキーに交換されます（自分で交換するのと同じです）。",
      copy: "コピー",
      copied: "コピーしました",
      run: "ターミナル（macOS、Linux）または PowerShell（Windows）を開き、コマンドを貼り付けて Enter。",
      redeeming: "CDK コードを交換しています...",
      okTitle: "CDK コードを交換しました。あなたのキー：",
      save: "このキーを保存してください。同じコードを再交換すると常にこのキーになります。下のコマンドには記入済みです。",
      fail: "交換できません：",
      retry: "再試行",
      copyKey: "キーをコピー",
      pkg: "パッケージ"
    },
    fr: {
      label: "Clé API ou code CDK",
      ph: "sk-... ou TSL-XXXX-XXXX-XXXX",
      note: "Une clé est seulement insérée dans la commande, dans votre navigateur. Un code CDK est échangé via la page d’échange pour obtenir votre clé, comme si vous l’échangiez vous-même.",
      copy: "Copier",
      copied: "Copié",
      run: "Ouvrez le Terminal (macOS, Linux) ou PowerShell (Windows), collez la commande et appuyez sur Entrée.",
      redeeming: "Échange du code CDK...",
      okTitle: "Code CDK échangé. Votre clé :",
      save: "Conservez cette clé. Le même code renvoie toujours cette clé ; la commande ci-dessous l’utilise déjà.",
      fail: "Échange impossible :",
      retry: "Réessayer",
      copyKey: "Copier la clé",
      pkg: "Forfait"
    },
    ru: {
      label: "API-ключ или код CDK",
      ph: "sk-... или TSL-XXXX-XXXX-XXXX",
      note: "Ключ только подставляется в команду в браузере. Код CDK активируется через страницу активации, чтобы получить ключ, — так же, как вручную.",
      copy: "Копировать",
      copied: "Скопировано",
      run: "Откройте Терминал (macOS, Linux) или PowerShell (Windows), вставьте команду и нажмите Enter.",
      redeeming: "Активация кода CDK...",
      okTitle: "Код CDK активирован. Ваш ключ:",
      save: "Сохраните этот ключ. Повторная активация того же кода всегда возвращает этот ключ; команда ниже уже его использует.",
      fail: "Не удалось активировать код:",
      retry: "Повторить",
      copyKey: "Копировать ключ",
      pkg: "Пакет"
    },
    ar: {
      label: "مفتاح API أو كود CDK",
      ph: "sk-... أو TSL-XXXX-XXXX-XXXX",
      note: "المفتاح يُدرج في الأمر في متصفحك فقط. كود CDK يُستبدل عبر صفحة الاستبدال للحصول على مفتاحك، كما لو استبدلته بنفسك.",
      copy: "نسخ",
      copied: "تم النسخ",
      run: "افتح الطرفية (macOS، Linux) أو PowerShell (Windows)، الصق الأمر واضغط Enter.",
      redeeming: "جارٍ استبدال كود CDK...",
      okTitle: "تم استبدال كود CDK. مفتاحك:",
      save: "احفظ هذا المفتاح. استبدال الكود ذاته دائماً يُعيد هذا المفتاح؛ الأمر أدناه يستخدمه بالفعل.",
      fail: "تعذَّر استبدال الكود:",
      retry: "إعادة المحاولة",
      copyKey: "نسخ المفتاح",
      pkg: "الباقة"
    },
    cs: {
      label: "API klíč nebo CDK kód",
      ph: "sk-... nebo TSL-XXXX-XXXX-XXXX",
      note: "Klíč se jen vloží do příkazu ve vašem prohlížeči. CDK kód se uplatní přes stránku pro uplatnění CDK a získáte klíč, stejně jako kdybyste ho uplatnili sami.",
      copy: "Kopírovat",
      copied: "Zkopírováno",
      run: "Otevřete Terminál (macOS, Linux) nebo PowerShell (Windows), vložte příkaz a stiskněte Enter.",
      redeeming: "Uplatňuji CDK kód...",
      okTitle: "CDK kód uplatněn. Váš klíč:",
      save: "Tento klíč si uložte. Opětovné uplatnění stejného kódu vždy vrátí tento klíč; příkaz níže ho už používá.",
      fail: "Kód se nepodařilo uplatnit:",
      retry: "Zkusit znovu",
      copyKey: "Kopírovat klíč",
      pkg: "Balíček"
    },
    da: {
      label: "API-nøgle eller CDK-kode",
      ph: "sk-... or TSL-XXXX-XXXX-XXXX",
      note: "En nøgle indsættes kun i kommandoen i din browser. En CDK-kode indløses via CDK-indløsningssiden for at få din nøgle, på samme måde som hvis du indløste den selv.",
      copy: "Kopier",
      copied: "Kopieret",
      run: "Åbn Terminal (macOS, Linux) eller PowerShell (Windows), indsæt kommandoen og tryk Enter.",
      redeeming: "Indløser CDK-koden...",
      okTitle: "CDK-kode indløst. Din nøgle:",
      save: "Gem denne nøgle. Indløsning af den samme kode returnerer altid denne nøgle; kommandoen nedenfor bruger den allerede.",
      fail: "Kunne ikke indløse koden:",
      retry: "Prøv igen",
      copyKey: "Kopier nøgle",
      pkg: "Pakke"
    },
    de: {
      label: "API-Schlüssel oder CDK-Code",
      ph: "sk-... oder TSL-XXXX-XXXX-XXXX",
      note: "Ein Schlüssel wird nur im Browser in den Befehl eingefügt. Ein CDK-Code wird über die CDK-Einlöseseite in deinen Schlüssel umgewandelt, genauso wie wenn du ihn selbst einlöst.",
      copy: "Kopieren",
      copied: "Kopiert",
      run: "Öffne Terminal (macOS, Linux) oder PowerShell (Windows), füge den Befehl ein und drücke Enter.",
      redeeming: "CDK-Code wird eingelöst...",
      okTitle: "CDK-Code eingelöst. Dein Schlüssel:",
      save: "Speichere diesen Schlüssel. Das Einlösen desselben Codes gibt immer diesen Schlüssel zurück; der Befehl unten verwendet ihn bereits.",
      fail: "Code konnte nicht eingelöst werden:",
      retry: "Erneut versuchen",
      copyKey: "Schlüssel kopieren",
      pkg: "Paket"
    },
    es: {
      label: "Clave API o código CDK",
      ph: "sk-... o TSL-XXXX-XXXX-XXXX",
      note: "Una clave solo se inserta en el comando en tu navegador. Un código CDK se canjea a través de la página de canje para obtener tu clave, igual que si lo hicieras tú mismo.",
      copy: "Copiar",
      copied: "Copiado",
      run: "Abre Terminal (macOS, Linux) o PowerShell (Windows), pega el comando y presiona Enter.",
      redeeming: "Canjeando el código CDK...",
      okTitle: "Código CDK canjeado. Tu clave:",
      save: "Guarda esta clave. Canjear el mismo código siempre devuelve esta clave; el comando de abajo ya la usa.",
      fail: "No se pudo canjear el código:",
      retry: "Reintentar",
      copyKey: "Copiar clave",
      pkg: "Paquete"
    },
    fi: {
      label: "API-avain tai CDK-koodi",
      ph: "sk-... tai TSL-XXXX-XXXX-XXXX",
      note: "Avain lisätään komentoon vain selaimessasi. CDK-koodi lunastetaan CDK-lunastussivun kautta avaimeksi, aivan kuin lunastaisit sen itse.",
      copy: "Kopioi",
      copied: "Kopioitu",
      run: "Avaa Pääte (macOS, Linux) tai PowerShell (Windows), liitä komento ja paina Enter.",
      redeeming: "Lunastetaan CDK-koodia...",
      okTitle: "CDK-koodi lunastettu. Avaimesi:",
      save: "Tallenna tämä avain. Saman koodin lunastaminen uudelleen palauttaa aina tämän avaimen; alla oleva komento käyttää sitä jo.",
      fail: "Koodia ei voitu lunastaa:",
      retry: "Yritä uudelleen",
      copyKey: "Kopioi avain",
      pkg: "Paketti"
    },
    he: {
      label: "מפתח API או קוד CDK",
      ph: "sk-... או TSL-XXXX-XXXX-XXXX",
      note: "מפתח מוכנס רק לפקודה בדפדפן שלכם. קוד CDK ממומש דרך דף המימוש לקבלת המפתח שלכם, כמו מימוש ידני.",
      copy: "העתקה",
      copied: "הועתק",
      run: "פתחו Terminal (macOS, Linux) או PowerShell (Windows), הדביקו את הפקודה ולחצו Enter.",
      redeeming: "ממש את קוד CDK...",
      okTitle: "קוד CDK מומש. המפתח שלכם:",
      save: "שמרו את המפתח הזה. מימוש אותו קוד שוב תמיד מחזיר את אותו מפתח; הפקודה למטה כבר משתמשת בו.",
      fail: "לא ניתן לממש את הקוד:",
      retry: "נסו שוב",
      copyKey: "העתקת מפתח",
      pkg: "חבילה"
    },
    hi: {
      label: "API key या CDK code",
      ph: "sk-... or TSL-XXXX-XXXX-XXXX",
      note: "Key केवल browser में command में insert होती है. CDK code redeem page के ज़रिए key में convert होता है, जैसे आप खुद redeem करते हैं.",
      copy: "Copy",
      copied: "Copied",
      run: "Terminal (macOS, Linux) या PowerShell (Windows) खोलें, command paste करें और Enter दबाएं.",
      redeeming: "CDK code redeem हो रहा है...",
      okTitle: "CDK code redeem हो गया. आपकी key:",
      save: "यह key save करें. उसी code को दोबारा redeem करने पर हमेशा यही key मिलती है; नीचे की command में पहले से fill है.",
      fail: "Code redeem नहीं हो सका:",
      retry: "फिर कोशिश करें",
      copyKey: "Key copy करें",
      pkg: "Package"
    },
    id: {
      label: "API key atau kode CDK",
      ph: "sk-... or TSL-XXXX-XXXX-XXXX",
      note: "Key hanya disisipkan ke perintah di browser Anda. Kode CDK ditukarkan melalui halaman penukaran CDK untuk mendapatkan key, sama seperti menukarnya sendiri.",
      copy: "Salin",
      copied: "Disalin",
      run: "Buka Terminal (macOS, Linux) atau PowerShell (Windows), tempel perintah dan tekan Enter.",
      redeeming: "Menukarkan kode CDK...",
      okTitle: "Kode CDK berhasil ditukar. Key Anda:",
      save: "Simpan key ini. Menukarkan kode yang sama selalu menghasilkan key ini; perintah di bawah sudah menggunakannya.",
      fail: "Tidak bisa menukarkan kode:",
      retry: "Coba lagi",
      copyKey: "Salin key",
      pkg: "Paket"
    },
    it: {
      label: "Chiave API o codice CDK",
      ph: "sk-... o TSL-XXXX-XXXX-XXXX",
      note: "Una chiave viene solo inserita nel comando nel tuo browser. Un codice CDK viene riscattato tramite la pagina di riscatto per ottenere la tua chiave, come se lo facessi tu stesso.",
      copy: "Copia",
      copied: "Copiato",
      run: "Apri il Terminale (macOS, Linux) o PowerShell (Windows), incolla il comando e premi Invio.",
      redeeming: "Riscatto del codice CDK in corso...",
      okTitle: "Codice CDK riscattato. La tua chiave:",
      save: "Salva questa chiave. Riscattare lo stesso codice restituisce sempre questa chiave; il comando qui sotto la usa già.",
      fail: "Impossibile riscattare il codice:",
      retry: "Riprova",
      copyKey: "Copia chiave",
      pkg: "Pacchetto"
    },
    ko: {
      label: "API 키 또는 CDK 코드",
      ph: "sk-... or TSL-XXXX-XXXX-XXXX",
      note: "키는 브라우저에서 명령에만 삽입됩니다. CDK 코드는 CDK 교환 페이지를 통해 키로 교환됩니다. 직접 교환하는 것과 같습니다.",
      copy: "복사",
      copied: "복사됨",
      run: "Terminal (macOS, Linux) 또는 PowerShell (Windows)을 열고 명령을 붙여넣고 Enter를 누르세요.",
      redeeming: "CDK 코드 교환 중...",
      okTitle: "CDK 코드 교환 완료. 내 키:",
      save: "이 키를 저장하세요. 같은 코드를 다시 교환하면 항상 이 키가 반환됩니다; 아래 명령에 이미 입력되어 있습니다.",
      fail: "코드를 교환할 수 없습니다:",
      retry: "다시 시도",
      copyKey: "키 복사",
      pkg: "패키지"
    },
    nl: {
      label: "API-sleutel of CDK-code",
      ph: "sk-... of TSL-XXXX-XXXX-XXXX",
      note: "Een sleutel wordt alleen in de browser in het commando ingevoegd. Een CDK-code wordt via de inwisselpagina omgezet naar je sleutel, net zoals wanneer je het zelf inwisselt.",
      copy: "Kopiëren",
      copied: "Gekopieerd",
      run: "Open Terminal (macOS, Linux) of PowerShell (Windows), plak het commando en druk op Enter.",
      redeeming: "CDK-code wordt ingewisseld...",
      okTitle: "CDK-code ingewisseld. Jouw sleutel:",
      save: "Sla deze sleutel op. Dezelfde code inwisselen geeft altijd dezelfde sleutel; het commando hieronder gebruikt hem al.",
      fail: "Kon de code niet inwisselen:",
      retry: "Opnieuw proberen",
      copyKey: "Sleutel kopiëren",
      pkg: "Pakket"
    },
    no: {
      label: "API-nøkkel eller CDK-kode",
      ph: "sk-... or TSL-XXXX-XXXX-XXXX",
      note: "En nøkkel settes bare inn i kommandoen i nettleseren din. En CDK-kode løses inn via CDK-innløsningssiden for å få nøkkelen din, på samme måte som om du løste den inn selv.",
      copy: "Kopier",
      copied: "Kopiert",
      run: "Åpne Terminal (macOS, Linux) eller PowerShell (Windows), lim inn kommandoen og trykk Enter.",
      redeeming: "Løser inn CDK-koden...",
      okTitle: "CDK-kode innløst. Nøkkelen din:",
      save: "Lagre denne nøkkelen. Innløsning av den samme koden returnerer alltid denne nøkkelen; kommandoen nedenfor bruker den allerede.",
      fail: "Kunne ikke løse inn koden:",
      retry: "Prøv igjen",
      copyKey: "Kopier nøkkel",
      pkg: "Pakke"
    },
    pl: {
      label: "Klucz API lub kod CDK",
      ph: "sk-... lub TSL-XXXX-XXXX-XXXX",
      note: "Klucz jest wstawiany do polecenia tylko w przeglądarce. Kod CDK jest wymieniany przez stronę wymiany, aby uzyskać klucz, tak samo jak przy samodzielnej wymianie.",
      copy: "Kopiuj",
      copied: "Skopiowano",
      run: "Otwórz Terminal (macOS, Linux) lub PowerShell (Windows), wklej polecenie i naciśnij Enter.",
      redeeming: "Trwa wymiana kodu CDK...",
      okTitle: "Kod CDK wymieniony. Twój klucz:",
      save: "Zachowaj ten klucz. Wymiana tego samego kodu zawsze zwraca ten sam klucz; poniższe polecenie już go używa.",
      fail: "Nie udało się wymienić kodu:",
      retry: "Spróbuj ponownie",
      copyKey: "Kopiuj klucz",
      pkg: "Pakiet"
    },
    pt: {
      label: "Chave API ou código CDK",
      ph: "sk-... ou TSL-XXXX-XXXX-XXXX",
      note: "Uma chave só é inserida no comando no seu navegador. Um código CDK é resgatado pela página de resgate para obter sua chave, igual a fazer você mesmo.",
      copy: "Copiar",
      copied: "Copiado",
      run: "Abra o Terminal (macOS, Linux) ou PowerShell (Windows), cole o comando e pressione Enter.",
      redeeming: "Resgatando o código CDK...",
      okTitle: "Código CDK resgatado. Sua chave:",
      save: "Salve esta chave. Resgatar o mesmo código sempre retorna esta chave; o comando abaixo já a usa.",
      fail: "Não foi possível resgatar o código:",
      retry: "Tentar novamente",
      copyKey: "Copiar chave",
      pkg: "Pacote"
    },
    sv: {
      label: "API-nyckel eller CDK-kod",
      ph: "sk-... or TSL-XXXX-XXXX-XXXX",
      note: "En nyckel infogas bara i kommandot i din webbläsare. En CDK-kod löses in via CDK-inlösningssidan för att få din nyckel, på samma sätt som om du löser in den själv.",
      copy: "Kopiera",
      copied: "Kopierat",
      run: "Öppna Terminal (macOS, Linux) eller PowerShell (Windows), klistra in kommandot och tryck Enter.",
      redeeming: "Löser in CDK-koden...",
      okTitle: "CDK-kod inlöst. Din nyckel:",
      save: "Spara den här nyckeln. Inlösning av samma kod returnerar alltid den här nyckeln; kommandot nedan använder den redan.",
      fail: "Det gick inte att lösa in koden:",
      retry: "Försök igen",
      copyKey: "Kopiera nyckel",
      pkg: "Paket"
    },
    tr: {
      label: "API anahtarı veya CDK kodu",
      ph: "sk-... veya TSL-XXXX-XXXX-XXXX",
      note: "Anahtar yalnızca tarayıcınızda komuta eklenir. CDK kodu, kendiniz kullanmışsınız gibi CDK kullanım sayfası üzerinden anahtara dönüştürülür.",
      copy: "Kopyala",
      copied: "Kopyalandı",
      run: "Terminal'i (macOS, Linux) veya PowerShell'i (Windows) açın, komutu yapıştırıp Enter'a basın.",
      redeeming: "CDK kodu kullanılıyor...",
      okTitle: "CDK kodu kullanıldı. Anahtarınız:",
      save: "Bu anahtarı saklayın. Aynı kodu yeniden kullanmak her zaman bu anahtarı döndürür; aşağıdaki komut onu zaten kullanıyor.",
      fail: "Kod kullanılamadı:",
      retry: "Tekrar dene",
      copyKey: "Anahtarı kopyala",
      pkg: "Paket"
    },
    uk: {
      label: "API-ключ або код CDK",
      ph: "sk-... або TSL-XXXX-XXXX-XXXX",
      note: "Ключ лише підставляється в команду у вашому браузері. CDK-код активується через сторінку активації для отримання ключа — так само, як якщо б ви активували його самостійно.",
      copy: "Копіювати",
      copied: "Скопійовано",
      run: "Відкрийте Термінал (macOS, Linux) або PowerShell (Windows), вставте команду і натисніть Enter.",
      redeeming: "Активація CDK-коду...",
      okTitle: "CDK-код активовано. Ваш ключ:",
      save: "Збережіть цей ключ. Повторна активація того самого коду завжди повертає цей ключ; команда нижче вже використовує його.",
      fail: "Не вдалося активувати код:",
      retry: "Спробувати знову",
      copyKey: "Копіювати ключ",
      pkg: "Пакет"
    }
  })[lang] || ({});
  const NAMES = {
    codex: "Codex",
    claude: "Claude Code"
  };
  const [val, setVal] = useState("");
  const [tool, setTool] = useState(tools[0]);
  const [os, setOs] = useState("unix");
  const [copied, setCopied] = useState(false);
  const [rd, setRd] = useState({
    code: "",
    status: "",
    key: "",
    info: "",
    error: ""
  });
  const PRODUCTS = {
    gpt: "GPT",
    astra: "GPT Astra",
    claude: "Claude",
    grok: "Grok"
  };
  const raw = (val || "").trim().replace(/[^A-Za-z0-9_-]/g, "");
  const isCdk = (/^TSL(-[A-Za-z0-9]{4}){3,}$/i).test(raw);
  const redeem = code => {
    setRd({
      code: code,
      status: "loading",
      key: "",
      info: "",
      error: ""
    });
    fetch("https://redeem.teamsoclo.site/api/redeem", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        code: code
      })
    }).then(r => r.json()).then(d => {
      if (d && d.ok && d.key) setRd({
        code: code,
        status: "ok",
        key: d.key,
        info: (PRODUCTS[d.product] || d.product || "") + (d.tier ? " · " + ((/^\d+(\.\d+)?[MB]$/i).test(d.tier) ? "$" + (parseFloat(d.tier) * ((/B$/i).test(d.tier) ? 1000 : 1)).toLocaleString("en-US") : d.tier) : ""),
        error: ""
      }); else setRd({
        code: code,
        status: "err",
        key: "",
        info: "",
        error: d && d.error || "error"
      });
    }).catch(e => setRd({
      code: code,
      status: "err",
      key: "",
      info: "",
      error: String(e && e.message || e)
    }));
  };
  useEffect(() => {
    if (!isCdk) {
      if (rd.code) setRd({
        code: "",
        status: "",
        key: "",
        info: "",
        error: ""
      });
      return;
    }
    const code = raw.toUpperCase();
    if (rd.code === code) return;
    const t = setTimeout(() => redeem(code), 400);
    return () => clearTimeout(t);
  }, [raw]);
  const copyText = text => {
    try {
      navigator.clipboard.writeText(text);
    } catch (e) {}
  };
  useEffect(() => {
    try {
      if ((/Win/i).test(navigator.platform || navigator.userAgent)) setOs("win");
    } catch (e) {}
  }, []);
  const v = (isCdk && rd.status === "ok" ? rd.key : raw) || "sk-xxx";
  const base = "https://redeem.teamsoclo.site/install/" + tool;
  const cmd = os === "win" ? "$env:TSL_KEY=\"" + v + "\"; irm " + base + ".ps1 | iex" : "curl -fsSL " + base + ".sh | bash -s -- --key " + v;
  const copy = () => {
    try {
      navigator.clipboard.writeText(cmd);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch (e) {}
  };
  const tab = on => "rounded-lg px-3 py-1.5 text-sm font-medium transition " + (on ? "bg-primary text-white dark:bg-primary-light dark:text-zinc-950" : "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800");
  return <div className="not-prose my-6 rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
      <label className="block text-sm font-semibold text-zinc-900 dark:text-zinc-100">{T.label}</label>
      <input type="password" autoComplete="off" spellCheck={false} value={val} placeholder={T.ph} onChange={e => setVal(e.target.value)} className="mt-2 w-full rounded-xl border border-zinc-300 bg-white px-3 py-2.5 font-mono text-sm text-zinc-900 outline-none focus:border-primary dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 dark:focus:border-primary-light" />
      <div className="mt-2 text-xs text-zinc-500 dark:text-zinc-400">{T.note}</div>
      {isCdk && rd.status === "loading" && <div className="mt-3 rounded-xl border border-zinc-200 px-3 py-2 text-sm text-zinc-600 dark:border-zinc-700 dark:text-zinc-300">{T.redeeming}</div>}
      {isCdk && rd.status === "ok" && <div className="mt-3 rounded-xl border border-green-300 bg-green-50 p-3 dark:border-green-800 dark:bg-green-950/40">
          <div className="text-sm font-semibold text-green-800 dark:text-green-300">{T.okTitle}</div>
          <div className="mt-2 flex items-center gap-2">
            <code className="flex-1 break-all rounded-lg bg-white px-2 py-1 font-mono text-[13px] text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">{rd.key}</code>
            <button type="button" onClick={() => copyText(rd.key)} className="shrink-0 rounded-lg border border-green-400 px-3 py-1 text-xs font-semibold text-green-800 hover:bg-green-100 dark:border-green-700 dark:text-green-300 dark:hover:bg-green-900/40">{T.copyKey}</button>
          </div>
          {rd.info && <div className="mt-2 text-xs text-green-800 dark:text-green-300">{T.pkg}: {rd.info}</div>}
          <div className="mt-1 text-xs text-green-800/80 dark:text-green-300/80">{T.save}</div>
        </div>}
      {isCdk && rd.status === "err" && <div className="mt-3 flex items-center gap-3 rounded-xl border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-800 dark:border-red-800 dark:bg-red-950/40 dark:text-red-300">
          <span className="flex-1">{T.fail} {rd.error}</span>
          <button type="button" onClick={() => redeem(raw.toUpperCase())} className="shrink-0 rounded-lg border border-red-400 px-3 py-1 text-xs font-semibold">{T.retry}</button>
        </div>}
      <div className="mt-4 flex flex-wrap items-center gap-2">
        {tools.length > 1 && tools.map(x => <button key={x} type="button" className={tab(tool === x)} onClick={() => setTool(x)}>{NAMES[x] || x}</button>)}
        {tools.length > 1 && <span className="mx-1 h-5 w-px bg-zinc-200 dark:bg-zinc-700"></span>}
        <button type="button" className={tab(os === "unix")} onClick={() => setOs("unix")}>macOS / Linux</button>
        <button type="button" className={tab(os === "win")} onClick={() => setOs("win")}>Windows</button>
      </div>
      <div className="mt-3 flex items-start gap-2 rounded-xl bg-zinc-950 p-3">
        <code className="flex-1 whitespace-pre-wrap break-all bg-transparent p-0 font-mono text-[13px] leading-relaxed text-zinc-100" style={{
    background: "transparent",
    padding: 0,
    border: 0
  }}>{cmd}</code>
        <button type="button" onClick={copy} className="shrink-0 rounded-lg border border-zinc-700 px-3 py-1 text-xs font-semibold text-zinc-100 hover:bg-zinc-800">{copied ? T.copied : T.copy}</button>
      </div>
      <div className="mt-2 text-xs text-zinc-500 dark:text-zinc-400">{T.run}</div>
    </div>;
};

<div className="mx-auto max-w-5xl px-6 pb-24 pt-16 lg:pt-24">
  <div className="text-center">
    <span className="inline-block rounded-full border border-primary/30 bg-primary/5 px-3 py-1 text-xs font-semibold text-primary dark:border-primary-light/30 dark:bg-primary-light/10 dark:text-primary-light">Офіційна документація</span>
    <h1 className="mx-auto mt-6 max-w-3xl text-4xl font-bold tracking-tight text-zinc-900 sm:text-5xl lg:text-6xl dark:text-white">Налаштування інструментів ШІ для кодингу однією командою</h1>
    <p className="mx-auto mt-6 max-w-2xl text-lg text-zinc-600 dark:text-zinc-400">Отримайте API-ключ, перевірте квоту і встановіть Codex, Claude Code або зручний клієнт. Виконайте одну команду в терміналі або відкрийте застосунок і натисніть кнопку.</p>

    <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
      <a href="/uk/getting-started" className="inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold no-underline transition bg-primary text-white hover:opacity-90 dark:bg-primary-light dark:text-zinc-950">Крок 1: Отримати API-ключ</a>
      <a href="/uk/setup/codex" className="inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold no-underline transition border border-zinc-200 bg-white text-zinc-900 hover:border-zinc-400 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:border-zinc-500">Встановити Codex</a>
      <a href="/uk/setup/claude-code" className="inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold no-underline transition border border-zinc-200 bg-white text-zinc-900 hover:border-zinc-400 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:border-zinc-500">Встановити Claude Code</a>
      <a href="/uk/quickstart" className="inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold no-underline transition border border-zinc-200 bg-white text-zinc-900 hover:border-zinc-400 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:border-zinc-500">Завантажити застосунок</a>
    </div>
  </div>

  <div className="mx-auto mt-10 max-w-3xl text-left">
    <InstallBox lang="uk" tools={["codex", "claude"]} />
  </div>

  <h2 className="mt-24 text-center text-2xl font-bold text-zinc-900 sm:text-3xl dark:text-white">Два способи встановлення — обирайте</h2>
  <p className="mx-auto mt-3 max-w-2xl text-center text-zinc-600 dark:text-zinc-400">Обидва способи перевіряють ключ, зберігають старі налаштування та направляють інструменти на потрібний шлюз. Результат однаковий.</p>

  <div className="mx-auto mt-10 grid max-w-3xl gap-6">
    <div className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
      <div className="text-xs font-semibold uppercase tracking-wide text-primary dark:text-primary-light">Встановлення командою</div>
      <div className="mt-2 text-xl font-semibold text-zinc-900 dark:text-white">Один рядок у терміналі</div>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">Скористайтеся полем для ключа / коду CDK вгорі сторінки, щоб отримати готову команду. Скрипт запитає мову, активує CDK-код, перевірить ключ, дозволить вибрати модель і встановить Codex або Claude Code.</p>

      <div className="mt-5 flex flex-wrap gap-3">
        <a href="/uk/setup/codex" className="text-sm font-semibold text-primary no-underline dark:text-primary-light">Подробиці Codex →</a>
        <a href="/uk/setup/claude-code" className="text-sm font-semibold text-primary no-underline dark:text-primary-light">Подробиці Claude Code →</a>
      </div>
    </div>

    <div className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
      <div className="text-xs font-semibold uppercase tracking-wide text-primary dark:text-primary-light">Встановлення застосунком</div>
      <div className="mt-2 text-xl font-semibold text-zinc-900 dark:text-white">TeamSocLo Key Tool</div>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">Застосунок для Windows і macOS для тих, хто не хоче використовувати термінал. Вставте ключ один раз і натисніть кнопку.</p>

      <ul className="mt-4 space-y-2 pl-0 text-sm text-zinc-700 dark:text-zinc-300" style={{listStyle:"none"}}>
        <li>✓ Налаштовує Claude Code, Codex, Claude Desktop та 20+ інструментів</li>
        <li>✓ Показує, який шлюз використовує кожен інструмент, модель для кожного</li>
        <li>✓ Завжди зберігає старі файли, видалити можна будь-коли</li>
        <li>✓ 7 мов, світла і темна тема</li>
      </ul>

      <div className="mt-5 flex flex-wrap gap-3">
        <a href="https://redeem.teamsoclo.site/install/TeamSocLoKeyTool.exe" className="inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold no-underline transition bg-primary text-white hover:opacity-90 dark:bg-primary-light dark:text-zinc-950">Завантажити для Windows</a>
        <a href="https://www.dropbox.com/scl/fo/01mhuuc1euaciw0ykx1xx/AAa8f8OXyhmw22fjJtGfuGU?rlkey=xeshttafgwkb3dtv5tk0s95tw&st=9v4uv79j&dl=0" className="inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold no-underline transition border border-zinc-200 bg-white text-zinc-900 hover:border-zinc-400 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:border-zinc-500">Всі завантаження (Windows, macOS)</a>
      </div>

      <div className="mt-5 text-sm font-semibold text-zinc-900 dark:text-white">macOS · встановлення застосунку однією командою</div>

      ```bash theme={null}
      curl -fsSL https://redeem.teamsoclo.site/install/keytool-mac.sh | bash
      ```

      <a href="/uk/quickstart" className="mt-4 inline-block text-sm font-semibold text-primary no-underline dark:text-primary-light">Посібник з застосунку →</a>
    </div>
  </div>

  <div className="mt-16 grid gap-6 md:grid-cols-2">
    <a href="/uk/setup/codex" className="block rounded-2xl border border-zinc-200 bg-white p-6 no-underline transition hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-600">
      <div className="text-lg font-semibold text-zinc-900 dark:text-white">Codex</div>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">Codex CLI, розширення VS Code і застосунок Codex: одне налаштування для всіх трьох. Моделі gpt-5.6-sol, gpt-6-sol, gpt-astra залежно від пакету.</p>
      <div className="mt-4 text-sm font-semibold text-primary dark:text-primary-light">Встановити однією командою →</div>
    </a>

    <a href="/uk/setup/claude-code" className="block rounded-2xl border border-zinc-200 bg-white p-6 no-underline transition hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-600">
      <div className="text-lg font-semibold text-zinc-900 dark:text-white">Claude Code</div>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">Claude Code CLI, розширення VS Code і JetBrains. Всі моделі Claude: Fable, Opus, Sonnet. Ключі GPT-пакету теж працюють.</p>
      <div className="mt-4 text-sm font-semibold text-primary dark:text-primary-light">Встановити однією командою →</div>
    </a>
  </div>

  <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
    <span className="mr-1 text-sm text-zinc-500">Інші клієнти:</span>
    <a href="/uk/setup/cursor" className="rounded-full border border-zinc-200 px-3 py-1 text-sm text-zinc-700 no-underline hover:border-zinc-400 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-500">Cursor</a>
    <a href="/uk/setup/cline" className="rounded-full border border-zinc-200 px-3 py-1 text-sm text-zinc-700 no-underline hover:border-zinc-400 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-500">Cline / Roo</a>
    <a href="/uk/setup/chatbox" className="rounded-full border border-zinc-200 px-3 py-1 text-sm text-zinc-700 no-underline hover:border-zinc-400 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-500">Chatbox</a>
    <a href="/uk/setup/api" className="rounded-full border border-zinc-200 px-3 py-1 text-sm text-zinc-700 no-underline hover:border-zinc-400 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-500">cURL / Python</a>
  </div>

  <h2 className="mt-24 text-center text-2xl font-bold text-zinc-900 sm:text-3xl dark:text-white">Почніть за 3 кроки</h2>

  <div className="mt-10 grid gap-6 md:grid-cols-3">
    <div className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-bold text-primary dark:bg-primary-light/15 dark:text-primary-light">1</div>
      <div className="mt-3 font-semibold text-zinc-900 dark:text-zinc-100">Отримайте API-ключ</div>
      <div className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">Купіть CDK-код і активуйте його, щоб отримати ключ sk-...</div>
    </div>

    <div className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-bold text-primary dark:bg-primary-light/15 dark:text-primary-light">2</div>
      <div className="mt-3 font-semibold text-zinc-900 dark:text-zinc-100">Виконайте команду або відкрийте застосунок</div>
      <div className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">Вставте ключ у команду встановлення або в TeamSocLo Key Tool</div>
    </div>

    <div className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-bold text-primary dark:bg-primary-light/15 dark:text-primary-light">3</div>
      <div className="mt-3 font-semibold text-zinc-900 dark:text-zinc-100">Почніть кодинг</div>
      <div className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">Після перезапуску CLI, розширення і застосунок готові</div>
    </div>
  </div>

  <div className="mt-16 rounded-2xl border border-zinc-200 bg-zinc-50 p-6 dark:border-zinc-800 dark:bg-zinc-900/60">
    <div className="text-lg font-semibold text-zinc-900 dark:text-white">Параметри підключення</div>

    <div className="mt-4 grid gap-3 text-sm sm:grid-cols-[180px_1fr]">
      <div className="text-zinc-500">Base URL</div><div className="font-mono text-zinc-900 dark:text-zinc-100">[https://gpt.teamsoclo.site/v1](https://gpt.teamsoclo.site/v1)</div>
      <div className="text-zinc-500">Base URL для Claude Code</div><div className="font-mono text-zinc-900 dark:text-zinc-100">[https://gpt.teamsoclo.site](https://gpt.teamsoclo.site)</div>
      <div className="text-zinc-500">API key</div><div className="text-zinc-900 dark:text-zinc-100">sk-..., отриманий після активації CDK-коду</div>
      <div className="text-zinc-500">Моделі</div><div className="text-zinc-900 dark:text-zinc-100">gpt-5.6-sol, gpt-6-sol, gpt-6-luna (пакет GPT) · gpt-astra (пакет Astra) · claude-opus-5, claude-fable-5-1, claude-sonnet-5... (пакет Claude)</div>
    </div>

    <div className="mt-5 flex flex-wrap gap-4 text-sm">
      <a href="https://gpt.teamsoclo.site/check" className="font-semibold text-primary no-underline dark:text-primary-light">Перевірити ключ →</a>
      <a href="/uk/models" className="font-semibold text-primary no-underline dark:text-primary-light">Моделі та пакети →</a>
      <a href="/uk/faq" className="font-semibold text-primary no-underline dark:text-primary-light">Усунення несправностей →</a>
    </div>
  </div>
</div>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.