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

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

File Management

Tools for working with project files:

fetch_files: Retrieve and read project files
fetch_assets: Access project assets and resources
write_file: Create or modify files in your project
delete_file: Remove files from your project
add_env_vars: 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

Tools for accessing external web content:

web_search: Search the web for information, documentation, or resources
scrape_website: Extract content from specific websites

Example prompts:

“Search for the latest Stripe API documentation”
“Find examples of modern hero section designs”
“Get the content from the company’s about page at example.com”

NPM Package Management

Tools for managing project dependencies:

npm_install: Install npm packages
npm_uninstall: Remove npm packages
run_lint: Run linting to check code quality

Example prompts:

“Install the date-fns library”
“Remove the unused lodash package”
“Run the linter and fix any issues”

Supabase Integration

Tools for working with Supabase Edge Functions:

supabase_create_edge_function: Create new Supabase Edge Functions
supabase_delete_edge_function: Remove Edge Functions
supabase_fetch_edge_function: Access the code of a specific Edge Function
supabase_fetch_edge_functions: Get a list of all Edge Functions

Example prompts:

“Create a Supabase Edge Function to send welcome emails”
“Show me the code for the authentication Edge Function”
“List all my Supabase Edge Functions”

Shopify Integration

Tools for accessing Shopify store data:

shopify_fetch_products: Retrieve products from your Shopify store
shopify_fetch_collections: Get collections from your Shopify store

Example prompts:

“Fetch all products from my Shopify store and display them”
“Get my Shopify collections and create a navigation menu”

Stripe E-Commerce

Tools for managing Stripe products:

stripe_create_product: Create new products in Stripe
stripe_list_products: Retrieve all Stripe products
stripe_publish_product: Make a product available for purchase
stripe_unpublish_product: Hide a product from customers

Example prompts:

“Create a new Stripe product for the premium membership”
“Show me all my Stripe products”
“Publish the summer course product”

CMS Tools

Tools for managing Frontend Cloud CMS:

Collections:

list_collections: View all CMS collections
create_collection: Create a new collection
delete_collection: Remove a collection
update_collection: Modify collection structure or settings

Documents:

create_documents: Add new documents to a collection
list_documents: Retrieve documents from a collection
publish_documents: Make documents visible to the frontend
unpublish_documents: Hide documents from the frontend

Example prompts:

“Create a new CMS collection for blog posts with title, content, and author fields”
“List all documents in the products collection”
“Publish the three latest blog post documents”
“Create a new document in the team members collection”

Image Tools

Tools for working with images:

generate_image: Create AI-generated images from text descriptions
analyze_image: Understand and extract information from images

Example prompts:

“Generate an image of a modern office workspace for the about page”
“Analyze this uploaded image and describe what it contains”
“Create a hero image showing a tropical beach at sunset”

How to Use AI Tools Effectively

Natural Language Prompts

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

Instead of: “Use stripe_list_products”
Say: “Show me all my Stripe products”

The AI will automatically select the appropriate tool.

Combining Tools

The AI can use multiple tools to complete complex tasks:

"Fetch products from Shopify, create matching products in Stripe,
and display them on the homepage"

The AI will:

Use shopify_fetch_products to get products
Use stripe_create_product for each product
Use write_file to update the homepage

Steering with Tool Awareness

Knowing available tools helps you write better prompts:

Good: “Search the web for modern pricing page examples and implement one”
- AI knows it can use web_search to find examples
Good: “Install the chart.js library and create a sales dashboard”
- AI knows it can use npm_install to add the library
Good: “Create a CMS collection for testimonials and add 5 sample documents”
- AI knows it can use create_collection and create_documents

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

Displaying a Product Catalog

"Fetch products and collections from my Shopify store and
display them in a grid on the shop page"

Tools used: shopify_fetch_products, shopify_fetch_collections, write_file

Setting Up Stripe E-Commerce

"Create three Stripe products: Basic ($9), Pro ($29), and Enterprise ($99),
then publish them and add a pricing page"

Tools used: stripe_create_product (3x), stripe_publish_product (3x), write_file

Content Management

"Create a blog CMS collection with title, content, author, and date fields.
Add three sample blog posts and create a blog page to display them."

Tools used: create_collection, create_documents, write_file

Image Generation Workflow

"Generate a hero image showing a modern workspace, then use it as the
background for the homepage hero section"

Tools used: generate_image, write_file

Web Research Integration

"Search for the latest best practices for form validation, then implement
a contact form following those practices"

Tools used: web_search, write_file

Best Practices

Be Specific About Data Sources

When working with integrations, be clear about the source:

“Get products from Shopify” (not just “get products”)
“Create in the CMS” vs “Create in Stripe”

Mention Tool-Relevant Details

Include information the tool will need:

Collection names for CMS operations
Package names for npm operations
Specific URLs for web scraping

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

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

"Install the React Icons library, then update the navigation to use
icons from it"

Tool Categories Quick Reference

Project Files: fetch_files, fetch_assets, write_file, delete_file, add_env_vars
Web: web_search, scrape_website
Dependencies: npm_install, npm_uninstall, run_lint
Supabase: supabase_create_edge_function, supabase_delete_edge_function, supabase_fetch_edge_function, supabase_fetch_edge_functions
Shopify: shopify_fetch_products, shopify_fetch_collections
Stripe: stripe_create_product, stripe_list_products, stripe_publish_product, stripe_unpublish_product
CMS: list_collections, create_collection, delete_collection, update_collection, create_documents, list_documents, publish_documents, unpublish_documents
Images: generate_image, analyze_image

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.