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

> Interactive browser-based IDE for exploring, writing, and testing ChainStream GraphQL queries

<Info>
  The ChainStream GraphQL IDE is a browser-based development environment purpose-built for writing, testing, and sharing GraphQL analytical queries across Solana, Ethereum, BSC, and Polygon. No installation required — open the URL and start querying.
</Info>

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

***

## Feature Highlights

<CardGroup cols={3}>
  <Card title="Monaco Editor" icon="pen-to-square">
    Full-featured code editor with GraphQL syntax highlighting, schema-driven autocomplete, and real-time error detection.
  </Card>

  <Card title="Query Builder" icon="diagram-project">
    Visual schema browser in the sidebar — explore Chain Groups, Cubes, fields, and filters without writing introspection queries.
  </Card>

  <Card title="Query Templates" icon="book-open">
    Built-in templates organized by chain and Cube — load, customize, and execute in seconds.
  </Card>

  <Card title="Save & Multi-Tab" icon="bookmark">
    Save queries locally with titles. Work on multiple queries in parallel with tabbed editing.
  </Card>

  <Card title="Code Export" icon="file-export">
    Export your query as a ready-to-use code snippet in 7 languages: cURL, Python, JavaScript, Go, Rust, Ruby, and PHP.
  </Card>

  <Card title="AI Assistant" icon="wand-magic-sparkles">
    Built-in AI assistant that can generate GraphQL queries from natural language descriptions and explain query results. Requires sign-in.
  </Card>

  <Card title="Share Queries" icon="share-nodes">
    Generate a shareable URL for any query. Recipients can open it in the IDE with the query pre-loaded.
  </Card>

  <Card title="Status Bar" icon="chart-simple">
    Real-time feedback on request state, latency (ms), response size, and Credit Units consumed per query.
  </Card>

  <Card title="Dark Theme" icon="moon">
    Dark-themed interface aligned with ChainStream branding, optimized for extended query sessions.
  </Card>
</CardGroup>

***

## IDE Layout

The IDE is organized into the following regions, from top to bottom:

<Steps>
  <Step title="Toolbar" icon="wrench">
    **Full-width top bar** — Execute (▶), Prettify, Save/Fork, Export Code, Share buttons, and the endpoint URL input.
  </Step>

  <Step title="Three-Column Main Area">
    <CardGroup cols={3}>
      <Card title="Sidebar" icon="bars">
        **Left** — Three tabs: **Query Builder** (schema tree), **Queries** (built-in templates), **Saved** (your saved queries)
      </Card>

      <Card title="Editor + Results" icon="pen-to-square">
        **Center** — Monaco editor (with Tab Bar, Variables / Headers panels), and syntax-highlighted JSON response panel below
      </Card>

      <Card title="AI Assistant" icon="wand-magic-sparkles">
        **Right** — Natural language query generation and result explanation (requires sign-in)
      </Card>
    </CardGroup>
  </Step>

  <Step title="Status Bar" icon="chart-simple">
    **Full-width bottom bar** — Request state, latency (ms), response size, and CU consumed.
  </Step>
</Steps>

***

## Quick Start

<Steps>
  <Step title="Open the IDE">
    Navigate to [ide.chainstream.io](https://ide.chainstream.io) in your browser.
  </Step>

  <Step title="Set your API Key">
    You can set your API key in two ways:

    **Option A — Manual entry**: Click the **Headers** panel at the bottom of the editor and enter:

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

    **Option B — Sign in**: Click **Sign In** in the top bar and log in with your ChainStream account. Your API keys will be automatically loaded and selectable from the key dropdown.

    <Tip>
      Don't have a key yet? Create one in the [ChainStream Dashboard](https://www.chainstream.io/dashboard) → **Applications** → **Create New App**.
    </Tip>
  </Step>

  <Step title="Load a template">
    Open the sidebar (**Ctrl/Cmd+B**), expand a chain (e.g. **Solana**), then click a template like **DEXTrades → Latest Trades**. The query loads into the editor with placeholder values.
  </Step>

  <Step title="Replace placeholders">
    Replace any `TOKEN_ADDRESS`, `WALLET_ADDRESS`, or `POOL_ADDRESS` placeholders with real on-chain addresses.
  </Step>

  <Step title="Execute">
    Press **Ctrl/Cmd+Enter** or click the **Execute** (▶) button. Results appear in the right panel, and the status bar shows latency and CU cost.
  </Step>
</Steps>

***

## Query Builder (Schema Browser)

The sidebar includes a visual **Query Builder** that replaces the standard GraphiQL documentation panel. It displays the full schema as an interactive tree:

* **Chain Groups** (EVM, Solana, Trading) at the top level
* **Cubes** within each group
* **Fields**, **filters**, and **ordering options** for each Cube

Click any field to insert it into your query. This is powered by the backend's `/ide/builder-schema` endpoint, which provides a structured representation of the entire schema.

***

## AI Assistant

The AI Assistant panel (right side) helps you:

* **Generate queries** from natural language descriptions (e.g., "Get the top 10 Solana DEX trades by volume today")
* **Explain results** — paste a response and get a plain-language summary

<Note>
  The AI Assistant requires signing in with your ChainStream account. It uses the same API key as your current IDE session.
</Note>

***

## Share Queries

Generate a shareable URL for any query by clicking the **Share** button in the toolbar. The URL encodes the query, variables, and network selection using a `#q=` fragment. Recipients can open the link to see the query pre-loaded in their IDE.

***

## Learn More

<CardGroup cols={2}>
  <Card title="Query Editor" icon="pen-to-square" href="/en/graphql/ide/query-editor">
    Explore the Monaco editor, panels, toolbar, keyboard shortcuts, and status bar.
  </Card>

  <Card title="Query Templates" icon="book-open" href="/en/graphql/ide/query-templates">
    Browse the full catalog of built-in templates across all Cubes.
  </Card>

  <Card title="Saved Queries" icon="bookmark" href="/en/graphql/ide/saved-queries">
    Save, organize, and manage your frequently used queries.
  </Card>

  <Card title="Code Export" icon="file-export" href="/en/graphql/ide/code-export">
    Generate ready-to-use code snippets in 7 programming languages.
  </Card>
</CardGroup>