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, fetch data, 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 user profile”
  • “Delete the old landing page file”
  • “Add an environment variable for the 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 React documentation”
  • “Find examples of modern hero section designs”
  • “Get the content from the company’s about 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 an image of a modern office workspace for the about page”
  • “Create a hero image showing a tropical beach at sunset”

Integration Tools

Section titled “Integration Tools”

Each integration you connect to your project — Supabase, Shopify, 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, fetching products, creating commits, or pulling design tokens.

Example prompts:

  • “Query all users from my Supabase database”
  • “Fetch my Shopify products and display them in a grid”
  • “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 homepage”
  • Say: “Show me what’s on the homepage”

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 pricing page examples and build one for my app"

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 pricing page examples and implement one”
  • Good: “Generate a hero image and use it as the homepage background”

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 hero image showing a modern workspace, 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 form validation, then implement
a contact form 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:

  • Table or collection names for database operations
  • 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"

Tool Categories Quick Reference

Section titled “Tool Categories Quick Reference”
  • Project Files: fetchFiles, fetchAssets, editFile, writeFile, deleteFile, addEnvVars
  • Web: webSearch, scrapeWebsite
  • Images: generateImages
  • 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.