AI Field agent - Build prototype

What is a web prototype?

A web prototype is an early, interactive model of a website or web application that demonstrates how it will look and function before full development begins. Think of it as a "draft version" that helps you test and refine your ideas.

In Airtable, using this AI feature allows you to generate UI components from text prompts, primarily outputting React code compatible with Shadcn UI and Tailwind CSS Ikius. It's designed to help you quickly prototype web interfaces without extensive manual coding.

Key Features

• Natural language prompts: Describe what you want in plain text, and the web prototype field agent can generate an interactive web preview experience.

• Image-to-code: Upload screenshots of existing designs, and your field agent can recreate them as an interactive web prototype.

• Real-time preview: Iterate and preview changes as you refine record data or your field agent prompt.

• Multiple framework support: Primarily React/Next.js, but can generate basic HTML/CSS too

• One-click deployment: Deploy your project to Vercel with a custom subdomain instantly

Types of web prototypes

• Low-fidelity prototypes

  • Simple wireframes or sketches

  • Basic layout with placeholder content

  • Focus on structure and flow rather than design details

• High-fidelity prototypes

  • Look and feel close to the final product

  • Detailed design elements, colors, and branding

  • Interactive elements that simulate real functionality

Why create web prototypes in Airtable?

• Test ideas quickly: See if your concept works before investing in full development

• Get feedback early: Show stakeholders or users and gather input

• Identify problems: Catch usability issues or design flaws early

• Save time and money: Much cheaper to change a prototype than a finished product

• Communicate vision: Help developers and designers understand what to build

Example base structure

Before you configure a web prototype field agent in your base, you will want to ensure that the table where you are adding the field agent contains the necessary source content in other fields. Giving a field agent content to effectively generate web prototypes will vary by use case, but generally, you will want to set up at least the following fields:

• Description - Long text field

• Required Features - Long text or multiple select field

• User Flow - Long text field in numbered list format

• Wireframe Sketch/Notes - Long text field

Adding a web prototype field agent

1. Open Airtable and create a new base or open an existing one.

2. In the table where you want to add the field agent, add a new field.

   1. Click the + icon or click the dropdown next to the name of an existing field and select ← Insert left or → Insert right.

3. Under the “Field agents” section click Build prototype.

4. Give the field a name.

5. Toggle on the “Run automatically” setting if you want to generate web prototype automatically.

   1. We recommend keeping this setting turned off to ensure you only generate web prototypes when all of your source fields are ready to be referenced.

6. Choose the V0 model you want to use for prototype generation.

7. Modify the custom instructions to fit your needs and insert the relevant field for the field agent to draw from for source content.

   1. You can reference a more comprehensive set of custom instructions in the next section.

8. Once you’ve configured your custom instructions to fit your needs, click Create field.

   1. We will automatically generate 10 example records (If there are at least 10 records present in the table) for you to consider. Feel free to go back and adjust your custom instructions and/or the V0 model.

   2. Once the prototype has been created (which can take a few minutes), click on a prototype to open the attachment viewer. Here, you can view and interact with the prototype.

Example custom instructions for a web prototype field agent

You are a skilled web developer and UX/UI designer with experience turning product specifications into interactive, visually appealing web prototypes. 
Assume the role of an expert focused on efficiently translating complex requirements into clickable, usable web app prototypes with strong attention to user flows and feature requirements. 
Maintain a professional and constructive tone suitable for technical product teams.

Task description:
Review the project information provided and use it to design and build a complete, interactive web application prototype. 
Interpret all available details, including descriptions, required features, user flow, and any wireframes or notes, to accurately reflect the intended user experience. 
Ensure the app includes all listed core features and follows the described flow. 
If visual cues or layout guidelines are provided, incorporate them as closely as possible. 
If any field is missing or lacks detail, fill in with logical, best-practice defaults consistent with modern web application standards.

Output format:
Generate a fully functional, interactive web prototype appropriate for the given specifications. 
The prototype must be clickable and allow users to explore main tasks and flows. 
Do not include explanations, links, summaries, or additional text—output the prototype only. 
If unable to generate a prototype due to insufficient information, output "Unable to generate prototype: missing or insufficient project details."

Example output: (The output is an interactive web prototype that opens in a browser and matches all provided requirements. No accompanying text is shown.)

Context and Data:
Description: {Insert "Description" field token}
Required Features: {Insert "Required Features" field token}
User Flow: {Insert "User Flow" field token}
Wireframe Sketch/Notes: {Insert "Wireframe Sketch/Notes" field token}

Output:

Disabling web prototype generation

This functionality uses a 3rd party service (Vercel) to create web prototypes. If enterprises are not comfortable with this, then admins can disable this capability in the AI Settings area within settings in their admin panel.

Teams and Free users don't have the same control over this setting, and this extends to many of the AI settings as well. Here's what they can do and what they can't do:

• Teams/Free owners can configure in workspace settings:

  • Turn on/ off AI altogether

  • Opt into AI Labs

• Business/ Enterprise admins can configure in admin panel:

  • Restrict the list of model providers that can be accessed

  • Enable/disable:

    • Omni

    • Internet access via AI tools

    • Web prototype generation

    • AI image gen/ image analysis (this will be relevant for Enterprise Scale/ Business customers once we release it for them, pending some legal resolution)