AI Coding with Gatsby

AI Tool Ecosystem for Gatsby

Gatsby's AI coding ecosystem is mature but has plateaued as the framework's popularity has declined relative to Next.js and Astro. AI tools have been trained on a substantial amount of Gatsby code from its peak adoption period, meaning they understand GraphQL page queries, gatsby-node.js page creation, and the plugin configuration system well. However, newer Gatsby features like the Gatsby Slice API, Partial Hydration, and the newer Head API may be less reliably generated. The GraphQL data layer is both Gatsby's distinguishing feature and its main AI challenge - while AI tools generate page queries and static queries capably, complex GraphQL schema customizations and source plugin interactions can be tricky. Gatsby's plugin ecosystem is deeply known by AI tools, making gatsby-config.js generation reliable.

What AI Does Well with Gatsby

• Generates Gatsby page queries and static queries with proper GraphQL syntax and fragment composition
• Creates gatsby-node.js with createPages, onCreateNode, and createSchemaCustomization for programmatic page creation
• Produces gatsby-config.js with correct plugin configurations for images, SEO, CMS integrations, and transformers
• Builds Gatsby page templates with proper GraphQL type generation using gatsby-plugin-typegen or graphql-codegen
• Scaffolds Gatsby SEO components with Helmet or the Head API for meta tags, Open Graph, and structured data
• Generates gatsby-browser.js and gatsby-ssr.js wrappers for layout persistence and provider configuration

Tips for AI-Assisted Gatsby Development

• AI tools understand Gatsby's GraphQL data layer and can generate page queries
• Use AI to generate gatsby-node.js for programmatic page creation
• AI handles Gatsby plugin configuration in gatsby-config.js well
• Leverage AI for generating Gatsby image components with proper optimization
• AI can generate proper gatsby-browser.js and gatsby-ssr.js configurations

Prompting Tips for Gatsby

Where AI Struggles with Gatsby

• AI sometimes generates Gatsby v3 patterns (gatsby-image instead of gatsby-plugin-image, old createPages API) for older training data
• Complex GraphQL schema customizations in gatsby-node.js with createSchemaCustomization are often incomplete or incorrect
• AI-generated Gatsby code may not account for the build-time vs runtime distinction, placing dynamic logic in static generation
• Gatsby's newer features like Slice API, Script component, and Partial Hydration are underrepresented in AI output

Blog Post Template with GraphQL and SEO

A Gatsby blog post template demonstrating GraphQL page queries, image handling, and SEO metadata.

import * as React from 'react';
import { graphql, HeadFC, PageProps } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
import Layout from '../components/Layout';

type DataProps = {
  markdownRemark: {
    html: string;
    frontmatter: {
      title: string;
      date: string;
      description: string;
      featuredImage: {
        childImageSharp: {
          gatsbyImageData: any;
        };
      };
    };
    timeToRead: number;
  };
};

export default function BlogPost({ data }: PageProps<DataProps>) {
  const { frontmatter, html, timeToRead } = data.markdownRemark;
  const image = getImage(frontmatter.featuredImage);

  return (
    <Layout>
      <article>
        <h1>{frontmatter.title}</h1>
        <p>{frontmatter.date} · {timeToRead} min read</p>
        {image && <GatsbyImage image={image} alt={frontmatter.title} />}
        <div dangerouslySetInnerHTML={{ __html: html }} />
      </article>
    </Layout>
  );
}

export const Head: HeadFC<DataProps> = ({ data }) => (
  <>
    <title>{data.markdownRemark.frontmatter.title}</title>
    <meta name="description" content={data.markdownRemark.frontmatter.description} />
  </>
);

export const query = graphql`
  query BlogPost($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      timeToRead
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        featuredImage {
          childImageSharp {
            gatsbyImageData(width: 800, placeholder: BLURRED)
          }
        }
      }
    }
  }
`;

Common Use Cases

• Static content websites and blogs
• Documentation sites
• Marketing websites
• Portfolio and showcase sites

Common Patterns AI Generates Well

• GraphQL page queries and useStaticQuery for compile-time data fetching from any source
• gatsby-node.js createPages for programmatically generating pages from CMS data or markdown files
• Plugin configuration in gatsby-config.js for source plugins, transformers, and optimization
• GatsbyImage with gatsby-plugin-image for optimized, responsive image handling with blur-up placeholders
• SEO components using the Head API or gatsby-plugin-react-helmet for meta tags and structured data
• gatsby-browser.js wrapPageElement for persistent layout components and global providers

Best Practices

Use TypeScript with Gatsby for better AI assistance. AI tools understand Gatsby's GraphQL schema well. Define proper TypeScript types for your GraphQL queries. For new projects, consider whether Next.js or Astro might be better choices as they have stronger AI tool support and more active development.

Setting Up Your AI Environment

Install gatsby-plugin-typegen or graphql-codegen for typed GraphQL queries that help AI tools understand your data schema. Use TypeScript for all page components and templates. Configure your AI context file to note your content source (markdown, CMS), key Gatsby plugins, and whether you use the Head API or Helmet for SEO so AI generates compatible patterns.

Recommended Tools for Gatsby

The following AI coding tools offer the best support for Gatsby development:

• Cursor - AI-first code editor built as a fork of VS Code with deep AI integration for code generation, editing, and chat.
• GitHub Copilot - AI pair programmer by GitHub and Microsoft that provides code suggestions, chat, and autonomous coding agents directly in your editor.
• Claude Code - Anthropic's agentic CLI coding tool that operates directly in your terminal, capable of editing files, running commands, and managing entire coding workflows.
• Cody - AI coding assistant by Sourcegraph that leverages deep codebase understanding and code search to provide context-aware assistance.

FAQ