Skip to content
Frontend

AI Tools

Frontend AI has access to a wide range of tools that you can use to steer the AI for better results. These tools enable the AI to perform specific actions, query your Shopify catalog, manage files, and integrate with various services automatically.

Understanding AI Tools

Section titled “Understanding AI Tools”

When you give Frontend AI a prompt, it can use these tools to accomplish your request. While you don’t need to explicitly call these tools yourself, understanding what’s available helps you write better prompts and know what the AI is capable of doing.

Available Tools

Section titled “Available Tools”

File Management

Section titled “File Management”

Tools for working with project files:

  • fetchFiles: Retrieve and read project files
  • fetchAssets: Access project assets and resources
  • editFile: Apply targeted edits to existing files using Relace instant apply, enabling near-instantaneous code modifications even on large files
  • writeFile: Create or modify files in your project
  • deleteFile: Remove files from your project
  • addEnvVars: Add environment variables to your project configuration

Example prompts:

  • “Add a new component file for the product card”
  • “Delete the old collection page file”
  • “Add an environment variable for the reviews API endpoint”

Web Tools

Section titled “Web Tools”

Tools for accessing external web content:

  • webSearch: Search the web for information, documentation, or resources
  • scrapeWebsite: Extract content from specific websites

Example prompts:

  • “Search for the latest Shopify Storefront API documentation”
  • “Find examples of modern product detail page layouts”
  • “Get the product copy from our old store page at example.com”

Image Tools

Section titled “Image Tools”

Tools for working with images:

  • generateImages: Create AI-generated images from text descriptions

Example prompts:

  • “Generate a lifestyle image of our candles on a bedside table for the collection banner”
  • “Create a hero image for the summer drop landing page”

Shopify Tools

Section titled “Shopify Tools”

The Shopify integration gives the AI direct access to your store’s catalog through the Storefront API, so it can read real products and collections while it builds — no placeholder data.

Example prompts:

  • “Fetch my Shopify products and display them in a grid”
  • “List my collections and build a navigation menu from them”
  • “Look up the Summer Drop collection and feature its first product on the homepage”

Integration Tools

Section titled “Integration Tools”

Each additional integration you connect — Supabase, GitHub, Stripe, Figma, and others — also exposes its own set of AI tools. These allow the AI to read and write data directly through your integrations, such as querying a database, creating commits, or pulling design tokens.

Example prompts:

  • “Query all customer reviews from my Supabase database”
  • “Commit and push these changes to GitHub”

How to Use AI Tools Effectively

Section titled “How to Use AI Tools Effectively”

Natural Language Prompts

Section titled “Natural Language Prompts”

You don’t need to call tools explicitly. Just describe what you want in natural language:

  • Instead of: “Use fetchFiles to read the product page”
  • Say: “Show me what’s on the product page”

The AI will automatically select the appropriate tool.

Combining Tools

Section titled “Combining Tools”

The AI can use multiple tools to complete complex tasks:

"Search for modern product detail page examples and build one for my store"

The AI will:

  1. Use webSearch to find examples
  2. Use writeFile to implement the page

Steering with Tool Awareness

Section titled “Steering with Tool Awareness”

Knowing available tools helps you write better prompts:

  • Good: “Search the web for modern collection page layouts and implement one”
  • Good: “Generate a lifestyle image and use it as the collection page banner”

Tool Limitations

Section titled “Tool Limitations”

Be aware of what tools can and cannot do:

  • Tools work within their specific domains
  • Some tools require proper configuration (API keys, integrations)
  • Tools follow service-specific limitations (rate limits, permissions)

Common Workflows

Section titled “Common Workflows”

Image Generation Workflow

Section titled “Image Generation Workflow”
"Generate a lifestyle image of our tote bag in use, then use it as the
background for the homepage hero section"

Tools used: generateImages, writeFile

Web Research Integration

Section titled “Web Research Integration”
"Search for the latest best practices for cart abandonment, then implement
a free-shipping progress bar in the cart following those practices"

Tools used: webSearch, writeFile

Best Practices

Section titled “Best Practices”

Mention Tool-Relevant Details

Section titled “Mention Tool-Relevant Details”

Include information the tool will need:

  • Collection handles and product titles for Storefront API queries
  • Specific URLs for web scraping
  • Branch names for Git operations

Trust the AI’s Tool Selection

Section titled “Trust the AI’s Tool Selection”

The AI will choose the right tools automatically. Focus on describing your goal, not which tools to use.

Leverage Tool Combinations

Section titled “Leverage Tool Combinations”

Take advantage of the AI’s ability to chain tools together. Describe multi-step workflows naturally:

"Fetch my products and build a filterable shop page with a cart drawer"

Tool Categories Quick Reference

Section titled “Tool Categories Quick Reference”
  • Project Files: fetchFiles, fetchAssets, editFile, writeFile, deleteFile, addEnvVars
  • Web: webSearch, scrapeWebsite
  • Images: generateImages
  • Shopify: catalog access through the Storefront API
  • Integrations: additional tools per connected integration

Understanding the tools available to Frontend AI helps you craft more effective prompts and accomplish complex tasks with simple natural language requests. The AI handles tool selection and execution automatically, allowing you to focus on describing what you want to achieve.