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

# GraphQL IDE

> 在浏览器中交互式探索、编写与测试 ChainStream GraphQL 查询

<Info>
  ChainStream GraphQL IDE 是专为在 Solana、Ethereum、BSC 与 Polygon 上编写、测试与分享 GraphQL 分析查询而打造的浏览器端开发环境。无需安装 — 打开 URL 即可开始查询。
</Info>

<Card title="打开 GraphQL IDE" icon="arrow-up-right-from-square" href="https://ide.chainstream.io">
  [https://ide.chainstream.io](https://ide.chainstream.io)
</Card>

***

## 功能亮点

<CardGroup cols={3}>
  <Card title="Monaco 编辑器" icon="pen-to-square">
    功能完备的代码编辑器：GraphQL 语法高亮、基于 schema 的自动补全，以及实时错误检测。
  </Card>

  <Card title="Query Builder" icon="diagram-project">
    侧栏中的可视化 schema 浏览器 — 无需手写 introspection 查询即可探索 Chain Group、Cube、字段与过滤条件。
  </Card>

  <Card title="查询模板" icon="book-open">
    按链与 Cube 组织的内置模板 — 秒级加载、自定义并执行。
  </Card>

  <Card title="保存 & 多标签" icon="bookmark">
    将常用查询连同标题保存在本地。通过多标签同时编辑多个查询。
  </Card>

  <Card title="代码导出" icon="file-export">
    将查询导出为 7 种语言的即用代码片段：cURL、Python、JavaScript、Go、Rust、Ruby、PHP。
  </Card>

  <Card title="AI 助手" icon="wand-magic-sparkles">
    内置 AI 助手，可从自然语言描述生成 GraphQL 查询，并解释查询结果。需登录。
  </Card>

  <Card title="分享查询" icon="share-nodes">
    为任意查询生成可分享 URL。接收方在 IDE 中打开即可预加载该查询。
  </Card>

  <Card title="状态栏" icon="chart-simple">
    实时展示请求状态、延迟（ms）、响应体积，以及每次查询消耗的 Credit Units。
  </Card>

  <Card title="深色主题" icon="moon">
    与 ChainStream 品牌一致的深色界面，适合长时间编写查询。
  </Card>
</CardGroup>

***

## IDE 布局

IDE 由以下区域组成，从上到下、从左到右排列：

<Steps>
  <Step title="Toolbar（工具栏）" icon="wrench">
    **顶部全宽** — Execute（▶）、Prettify、Save/Fork、Export Code、Share 按钮，以及端点 URL 输入框。
  </Step>

  <Step title="三栏主区域">
    <CardGroup cols={3}>
      <Card title="Sidebar（侧栏）" icon="bars">
        **左侧** — 三个标签页：**Query Builder**（schema 树）、**Queries**（内置模板）、**Saved**（保存的查询）
      </Card>

      <Card title="Editor + Results（编辑器 + 结果）" icon="pen-to-square">
        **中间** — Monaco 编辑器（带 Tab Bar、Variables / Headers 面板），下方为带语法高亮的 JSON 响应面板
      </Card>

      <Card title="AI 助手" icon="wand-magic-sparkles">
        **右侧** — 自然语言生成查询、解释查询结果（需登录）
      </Card>
    </CardGroup>
  </Step>

  <Step title="Status Bar（状态栏）" icon="chart-simple">
    **底部全宽** — 实时展示请求状态、延迟（ms）、响应体积，以及本次查询消耗的 CU。
  </Step>
</Steps>

***

## 快速开始

<Steps>
  <Step title="打开 IDE">
    在浏览器中访问 [ide.chainstream.io](https://ide.chainstream.io)。
  </Step>

  <Step title="设置 API Key">
    可通过两种方式设置 API key：

    **方式 A — 手动输入**：点击编辑器底部的 **Headers** 面板，填入：

    ```json theme={null}
    {
      "X-API-KEY": "your_api_key"
    }
    ```

    **方式 B — 登录账号**：点击顶栏 **Sign In**，登录你的 ChainStream 账号。已创建的 API Key 会自动加载，可在下拉框中选择。

    <Tip>
      还没有 Key？在 [ChainStream Dashboard](https://www.chainstream.io/dashboard) → **Applications** → **Create New App** 中创建。
    </Tip>
  </Step>

  <Step title="加载模板">
    打开侧边栏（**Ctrl/Cmd+B**），展开某条链（例如 **Solana**），再点击模板如 **DEXTrades → Latest Trades**。查询会载入编辑器并带有占位值。
  </Step>

  <Step title="替换占位符">
    将 `TOKEN_ADDRESS`、`WALLET_ADDRESS` 或 `POOL_ADDRESS` 等占位符替换为真实链上地址。
  </Step>

  <Step title="执行">
    按 **Ctrl/Cmd+Enter** 或点击 **Execute**（▶）按钮。结果出现在右侧面板，状态栏显示延迟与 CU 消耗。
  </Step>
</Steps>

***

## Query Builder（Schema 浏览器）

侧栏包含可视化 **Query Builder**，替代了标准 GraphiQL 的文档面板。它以交互式树形结构展示完整 schema：

* 顶层为 **Chain Group**（EVM、Solana、Trading）
* 每个组内展示 **Cube** 列表
* 每个 Cube 内展示 **字段**、**过滤条件** 与 **排序选项**

点击任意字段即可将其插入查询。该功能由后端 `/ide/builder-schema` 端点驱动，提供整个 schema 的结构化表示。

***

## AI 助手

AI 助手面板（右侧）可帮助你：

* **生成查询** — 从自然语言描述生成 GraphQL 查询（例如"获取今日 Solana DEX 成交量最大的 10 笔交易"）
* **解释结果** — 粘贴响应，获取通俗的摘要说明

<Note>
  AI 助手需要登录 ChainStream 账号。它使用与当前 IDE 会话相同的 API key。
</Note>

***

## 分享查询

点击工具栏中的 **Share** 按钮即可为任意查询生成可分享 URL。URL 使用 `#q=` 片段编码查询内容、变量与网络选择。接收方打开链接即可在 IDE 中看到预加载的查询。

***

## 延伸阅读

<CardGroup cols={2}>
  <Card title="查询编辑器" icon="pen-to-square" href="/cn/graphql/ide/query-editor">
    了解 Monaco 编辑器、面板、工具栏、快捷键与状态栏。
  </Card>

  <Card title="查询模板" icon="book-open" href="/cn/graphql/ide/query-templates">
    浏览全部 Cube 上的内置模板。
  </Card>

  <Card title="保存的查询" icon="bookmark" href="/cn/graphql/ide/saved-queries">
    保存、整理并管理常用查询。
  </Card>

  <Card title="代码导出" icon="file-export" href="/cn/graphql/ide/code-export">
    生成 7 种编程语言的即用代码片段。
  </Card>
</CardGroup>