GraphQL Vision

A three-pane GraphQL IDE — schema explorer, query editor, response viewer — with AI-assisted validation suggestions for the responses you get back.

---

Features

• Three-column workspace — explorer, editor, and response viewer in resizable panels
• Query editor — syntax highlighting, auto-completion, formatting, and error detection for queries, mutations, and subscriptions
• Schema explorer — tree view with full-text search across types, fields, arguments, descriptions, deprecations, and directives
• Response viewer — JSON tree, raw JSON, table, and chart views, with status code, timing, and headers
• AI validation suggestions — describe the response you expect and Genkit proposes validation and quality checks for what actually came back
• Environments — per-environment endpoint, headers, and auth
• History and collections — queries saved automatically, plus named collections with tags; imports from JSON, Postman, and Insomnia
• Light and dark themes

Stack

Framework	Next.js (App Router), TypeScript
UI	Tailwind CSS, Radix UI primitives, shadcn/ui
AI	Google Genkit (@genkit-ai/googleai)
Forms	React Hook Form + Zod

Running locally

git clone https://github.com/suhaib-md/GraphQL-Vision.git
cd GraphQL-Vision
npm install

The AI validation flow needs a key:

GOOGLE_GENAI_API_KEY=your_key_here

Then:

npm run dev

Runs at http://localhost:3000.

Project layout

src/
  app/
    page.tsx              the IDE
  components/
    query-editor.tsx      GraphQL editor
    response-viewer.tsx   JSON / table / chart views
    schema-explorer.tsx   introspection tree and search
    layout/               panel shell
    icons/
docs/
  blueprint.md            original product and design spec

Design

Blue #4285F4 primary chosen to hold up on both grounds, green #34A853 for success states, near-neutral greys behind — #F5F5F5 light, #1E1E1E dark. Poppins for UI, Source Code Pro for queries. Rationale in docs/blueprint.md.

Related

One of four GraphQL tooling experiments built the same week, alongside graphql-ace, graphqlapi-tester, and GraphQL-API-Checker. This one focuses on the IDE and response analysis; graphql-ace covers environments and batching more thoroughly.