> ## 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.

# 簡介

> 用 TeamSocLo 金鑰設定 Codex、Claude Code 等 20 多個 AI 程式設計工具：一條命令或一個 App

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">一條命令設定 AI 程式設計工具</h1>
    <p className="mx-auto mt-6 max-w-2xl text-lg text-zinc-600 dark:text-zinc-400">獲取 API 金鑰、檢視額度，然後安裝 Codex、Claude Code 或你喜歡的客戶端。在終端機執行一條命令，或開啟 App 點一下。</p>

    <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
      <a href="/zh-tw/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="/zh-tw/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="/zh-tw/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="/zh-tw/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">下載 App</a>
    </div>
  </div>

  <div className="mx-auto mt-10 max-w-3xl text-left">
    <InstallBox lang="zh-TW" 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="/zh-tw/setup/codex" className="text-sm font-semibold text-primary no-underline dark:text-primary-light">Codex 詳情 →</a>
        <a href="/zh-tw/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">App 安裝</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 的 App，適合不想用終端機的使用者。貼上一次金鑰，點一下即可。</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 · 一條命令安裝 App</div>

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

      <a href="/zh-tw/quickstart" className="mt-4 inline-block text-sm font-semibold text-primary no-underline dark:text-primary-light">App 指南 →</a>
    </div>
  </div>

  <div className="mt-16 grid gap-6 md:grid-cols-2">
    <a href="/zh-tw/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 App：設定一次三者通用。按套餐使用 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="/zh-tw/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="/zh-tw/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="/zh-tw/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="/zh-tw/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="/zh-tw/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">執行命令或開啟 App</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、擴充套件和 App 即可使用</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">Claude Code 的 Base URL</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">兌換 CDK 後獲得的 sk-...</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="/zh-tw/models" className="font-semibold text-primary no-underline dark:text-primary-light">模型與套餐 →</a>
      <a href="/zh-tw/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.