> ## 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 쿼리를 탐색, 작성, 테스트하기 위한 인터랙티브 브라우저 기반 IDE

<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 구문 강조, 스키마 기반 자동 완성, 실시간 오류 감지를 갖춘 완전한 기능의 코드 에디터.
  </Card>

  <Card title="쿼리 빌더" icon="diagram-project">
    사이드바의 비주얼 스키마 브라우저 — 인트로스펙션 쿼리를 작성하지 않고 체인 그룹, 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">
    자연어 설명으로 GraphQL 쿼리를 생성하고 쿼리 결과를 설명할 수 있는 내장 AI 어시스턴트. 로그인 필요.
  </Card>

  <Card title="쿼리 공유" icon="share-nodes">
    어떤 쿼리든 공유 가능한 URL을 생성합니다. 수신자는 쿼리가 미리 로드된 IDE에서 바로 열 수 있습니다.
  </Card>

  <Card title="상태 표시줄" icon="chart-simple">
    요청 상태, 지연 시간(ms), 응답 크기, 쿼리당 소비된 Credit Unit에 대한 실시간 피드백.
  </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="3열 메인 영역">
    <CardGroup cols={3}>
      <Card title="Sidebar (사이드바)" icon="bars">
        **왼쪽** — 3개 탭: **Query Builder**(스키마 트리), **Queries**(내장 템플릿), **Saved**(저장된 쿼리)
      </Card>

      <Card title="Editor + Results (에디터 + 결과)" icon="pen-to-square">
        **중앙** — Monaco 에디터(Tab Bar, Variables / Headers 패널 포함), 하단에 구문 강조된 JSON 응답 패널
      </Card>

      <Card title="AI Assistant" 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>
      아직 키가 없나요? [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>

***

## 쿼리 빌더 (스키마 브라우저)

사이드바에는 표준 GraphiQL 문서 패널을 대체하는 비주얼 **쿼리 빌더**가 포함되어 있습니다. 전체 스키마를 인터랙티브 트리로 표시합니다:

* 최상위 레벨에 **체인 그룹** (EVM, Solana, Trading)
* 각 그룹 내의 **Cube**
* 각 Cube의 **필드**, **필터**, **정렬 옵션**

필드를 클릭하면 쿼리에 삽입됩니다. 이는 전체 스키마의 구조화된 표현을 제공하는 백엔드의 `/ide/builder-schema` 엔드포인트로 구동됩니다.

***

## AI 어시스턴트

AI 어시스턴트 패널(오른쪽)이 도와드립니다:

* 자연어 설명으로 **쿼리 생성** (예: "오늘 거래량 기준 상위 10개 Solana DEX 트레이드 가져오기")
* **결과 설명** — 응답을 붙여넣으면 평문으로 요약을 제공

<Note>
  AI 어시스턴트는 ChainStream 계정으로 로그인해야 사용할 수 있습니다. 현재 IDE 세션과 동일한 API Key를 사용합니다.
</Note>

***

## 쿼리 공유

툴바의 **Share** 버튼을 클릭하여 어떤 쿼리든 공유 가능한 URL을 생성합니다. URL은 `#q=` 프래그먼트를 사용하여 쿼리, 변수, 네트워크 선택을 인코딩합니다. 수신자는 링크를 열어 쿼리가 미리 로드된 IDE에서 확인할 수 있습니다.

***

## 더 알아보기

<CardGroup cols={2}>
  <Card title="쿼리 에디터" icon="pen-to-square" href="/ko/graphql/ide/query-editor">
    Monaco 에디터, 패널, 툴바, 키보드 단축키, 상태 표시줄을 살펴보세요.
  </Card>

  <Card title="쿼리 템플릿" icon="book-open" href="/ko/graphql/ide/query-templates">
    모든 Cube에 걸친 내장 템플릿의 전체 카탈로그를 찾아보세요.
  </Card>

  <Card title="저장된 쿼리" icon="bookmark" href="/ko/graphql/ide/saved-queries">
    자주 사용하는 쿼리를 저장하고 정리하고 관리하세요.
  </Card>

  <Card title="코드 내보내기" icon="file-export" href="/ko/graphql/ide/code-export">
    7가지 프로그래밍 언어로 바로 사용 가능한 코드 스니펫을 생성하세요.
  </Card>
</CardGroup>