---
layout: home

hero:
  name: XCodeCLI
  text: 全能 AI 开发配置中心
  tagline: 统一管理 Claude Code / Gemini CLI / Codex 及 Cherry Studio 配置
  actions:
    - theme: brand
      text: 快速开始
      link: /guide/
    - theme: alt
      text: Cherry Studio 教程
      link: /cherry-studio-nanobana

features:
  - icon: 🚀
    title: CLI 一键配置
    details: 一行命令自动配置 Claude Code、Gemini CLI 和 Codex
  - icon: 🍒
    title: Cherry Studio 支持
    details: 完美适配 Cherry Studio，支持 Gemini 系列模型可视化交互
  - icon: 🔒
    title: 安全可靠
    details: 自动备份现有配置，本地化管理 API 密钥
---

<script setup>
import { ref } from 'vue'

const activeTab = ref('bash')
const copied = ref(false)

const commands = {
  bash: `API_KEY='你的密钥' bash -c "$(curl -fsSL https://gitea.sususu.cf/sususu/xcodecli-shells/raw/branch/main/setup.sh)"`,
  powershell: `$key='你的密钥'; iwr -useb https://gitea.sususu.cf/sususu/xcodecli-shells/raw/branch/main/setup.ps1 | iex`
}

function copyCommand() {
  navigator.clipboard.writeText(commands[activeTab.value])
  copied.value = true
  setTimeout(() => copied.value = false, 2000)
}
</script>

<div class="setup-section">

## 1. CLI 工具一键配置

<p class="desc">适用于 <strong>Claude Code</strong>、<strong>Gemini CLI</strong> 和 <strong>Codex</strong> 的自动化配置。</p>

<div class="install-card">
  <div class="tabs">
    <button :class="{ active: activeTab === 'bash' }" @click="activeTab = 'bash'">
      <span class="icon">🍎/🐧</span> macOS / Linux
    </button>
    <button :class="{ active: activeTab === 'powershell' }" @click="activeTab = 'powershell'">
      <span class="icon">🪟</span> Windows
    </button>
  </div>

  <div class="code-block-wrapper">
    <div class="code-block">
      <code>{{ commands[activeTab] }}</code>
    </div>
    <button class="copy-btn" @click="copyCommand" :class="{ copied: copied }">
      {{ copied ? '已复制' : '复制命令' }}
    </button>
  </div>
</div>

<p class="tip">💡 提示：运行前请将命令中的 <code>你的密钥</code> 替换为实际 API Key</p>

</div>

<div class="setup-section">

## 2. Cherry Studio 配置

<p class="desc">在 Cherry Studio 中使用 XCodeCLI 服务，享受可视化的对话体验。</p>

::: danger ⚠️ 重要提示：模型兼容性
**Cherry Studio 仅支持 Gemini 系列模型！**

- ❌ **Claude 模型**：暂不支持在 Cherry Studio 中使用（请在 Claude Code 内使用）
- ❌ **GPT 模型**：暂不支持在 Cherry Studio 中使用（请在 Codex 内使用）
- ✅ **Gemini 模型**：完美支持
  :::

### 配置参数

请在 Cherry Studio 设置中添加 **自定义提供商**：

| 配置项         | 值                          | 说明                     |
| :------------- | :-------------------------- | :----------------------- |
| **提供商类型** | `Gemini`                    | **必选** (不要选 OpenAI) |
| **API 密钥**   | `sk-...`                    | 你的 XCodeCLI 密钥       |
| **API 地址**   | `https://api2.xcodecli.com` | Base URL                 |

::: tip 📝 详细教程
查看完整的 [Cherry Studio 图文配置指南](/cherry-studio-nanobana)
:::

</div>

<div class="setup-section">

## 3. 参考信息

### CLI 配置文件位置

| 工具            | 配置文件                  | 格式 |
| :-------------- | :------------------------ | :--- |
| **Claude Code** | `~/.claude/settings.json` | JSON |
| **Gemini CLI**  | `~/.gemini/.env`          | ENV  |
| **Codex**       | `~/.codex/config.toml`    | TOML |

### API 端点

脚本会自动测试以下端点，选择第一个可用的：

- `https://api2.xcodecli.com` (主要)
- `https://api.xcodecli.com` (备用)

</div>

<style>
.setup-section {
  margin: 3rem auto;
  max-width: 960px;
  padding: 0 1.5rem;
}

.setup-section h2 {
  border-top: none;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.desc {
  color: var(--vp-c-text-2);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* Install Card Styles */
.install-card {
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-divider);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
}

.tabs {
  display: flex;
  background: var(--vp-c-bg-mute);
  border-bottom: 1px solid var(--vp-c-divider);
}
.tabs button {
  flex: 1;
  padding: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--vp-c-text-2);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tabs button:hover {
  color: var(--vp-c-text-1);
  background-color: var(--vp-c-bg-soft);
}
.tabs button.active {
  color: var(--vp-c-brand);
  background: var(--vp-c-bg-soft);
  box-shadow: inset 0 -2px 0 var(--vp-c-brand);
}

.code-block-wrapper {
  position: relative;
  padding: 1.5rem;
  text-align: left;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.code-block {
  flex: 1;
  font-family: var(--vp-font-family-mono);
  font-size: 0.9rem;
  color: var(--vp-c-text-1);
  overflow-x: auto;
  white-space: pre;
  padding-right: 0.5rem;
  scrollbar-width: thin;
}
.code-block::-webkit-scrollbar {
  height: 6px;
}
.code-block::-webkit-scrollbar-thumb {
  background-color: var(--vp-c-divider);
  border-radius: 3px;
}

.copy-btn {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  background: var(--vp-c-bg);
  color: var(--vp-c-text-1);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.copy-btn:hover {
  border-color: var(--vp-c-brand);
  color: var(--vp-c-brand);
}
.copy-btn.copied {
  border-color: var(--vp-c-green);
  color: var(--vp-c-green);
  background-color: var(--vp-c-bg-mute);
}

.tip {
  font-size: 0.9rem;
  color: var(--vp-c-text-2);
}
.tip code {
  color: var(--vp-c-brand);
  background-color: var(--vp-c-bg-mute);
  padding: 0.2em 0.4em;
  border-radius: 4px;
}
</style>