Why I Built It

We use Shopify’s GraphQL API a lot in our apps, and I often need to pull up a specific documentation page quickly. While Shopify’s MCP server can answer some questions, it’s slower and doesn’t always show the full context. I’ve long liked using browser shortcuts and custom search engines, so I wanted a faster way to jump straight to the page I need.

Enter Raycast. Raycast is a replacement for Spotlight on macOS that lets you get things done using only your keyboard. I already relied on it for:

  • Opening GitHub repositories with quicklinks
  • Viewing my clipboard history
  • Searching the Shopify Polaris docs

That last item, searching the Polaris docs, was made possible thanks to a Raycast extension by @approxhuman, which inspired me to build a similar one for Shopify’s GraphQL and developer documentation at shopify.dev/docs. The project took a bit longer than expected (mostly due to Git issues), but as of yesterday, the extension is officially live on the Raycast Store.

Searching Shopify Docs from Raycast

The extension lets you quickly search the documentation on https://shopify.dev/docs and to jump directly to the relevant page. For example, if I want to learn about the fileCreate GraphQL mutation I can:

  1. Press ⌘ + Space to open up Raycast
  2. Type Shopify to select my extension
  3. Start typing fileCreate until I see the result I want
  4. Press Enter to open up the page

Once I got in the habit, I found this far faster than navigating to the Shopify docs manually.

Under the Hood

The extension uses the same JSON API endpoint that powers the search on shopify.dev. As you type, it sends a request to the endpoint, parses the JSON response, and displays the results. I also created small Figma icons to help distinguish between result types (mutations, objects, etc.).

Icons for the extension
Making the icons in Figma

Raycast extensions are written in React, Typescript, and Node. I hadn’t used Typescript before but with some AI-help it was pretty easy to get everything set up. Raycast has a list of React components that you can use to build out the UI with support for the keyboard shortcuts built-in.

Getting It Reviewed and Published

The only real roadblock I ran into was with Git. Raycast provides an npm run publish command that creates a pull request for your extension, after which automated checks run. When I tried to make updates after submitting, I kept hitting a refusing to merge unrelated histories error. After too much time troubleshooting, I gave up and just started a new PR which worked fine.

Aside from that, the review process went smoothly. The first review took about two weeks, and the second only a few days before the extension was published.

Try It Yourself

Besides the struggles with Git, this was a fun project and is something I use almost every day. You can install the extension directly from the Raycast Store. If you have feedback or ideas for improvement, I’d love to hear them.