AI feature component

The AI Feature component lets you describe what you want to build in plain language and generates a working feature — layout, logic, and styling — without writing code. Describe something like an event registration form or a staff directory filter, refine it through conversation, and get a functional result in minutes instead of the hours or days it would take to build manually.

The component generates responsive layouts that work across screen sizes, handles errors gracefully, and applies your app’s theme settings (colors, fonts, link styles) automatically. You can attach data sources, reference images as design inspiration, and provide custom documentation so the AI follows your app’s conventions.

Contents

• Getting started
• Working with data sources
• Custom AI context
• Using images as references
• Feature ideas
• Tips for effective prompts
• Versions

Getting started

Step 1: Add the component to your screen

Open Fliplet Studio, navigate to the target screen, and find AI Feature in the Build Faster with AI section of the component panel. Drag it onto your screen.

Step 2: Describe what you want to build

Enter a description of the feature you want in the text box and click Generate. The more specific your prompt, the better the result. Include details about layout, data fields, and behavior.

For example, instead of “make a form,” try: “Create an event registration form with fields for name, email, company, and dietary requirements. Include a submit button that saves to the Events data source and shows a confirmation message.”

Step 3: Refine with follow-up prompts

After the initial generation, use follow-up prompts to make specific changes without regenerating the entire feature:

• Adjust layout or styling (“Make the header larger and center-aligned”)
• Add functionality (“Add a filter dropdown for event categories”)
• Link to other screens (“Add a Back button that navigates to the Home screen”)
• Add icons (“Use a calendar icon next to each date field”) — Font Awesome icons are available in all Fliplet apps

The chat input expands automatically for longer prompts. During extended sessions, use Clear chat history to reset the conversation while keeping the generated code intact.

Step 4: Attach a data source (optional)

If your feature needs to read, save, or update data, attach a data source using the dropdown above the chat. See Working with data sources for details.

Step 5: Save and preview

Close the settings panel and click Preview (top-right) to test the feature in context. Generated features apply your app’s theme settings automatically — colors, fonts, and link styles match your brand without manual adjustments.

To make manual adjustments to the generated code, open Developer Options.

Working with data sources

Attach a data source to enable the AI to generate code that reads, saves, or updates records. The AI uses the exact data source name and column names in the generated code.

• Select an existing data source or create a new one from the dropdown above the chat input
• Switch data sources between messages to work with multiple sources in one conversation
• The AI generates code using the Fliplet Data Sources API, so standard security rules apply

Always configure data source security rules before publishing your app. The generated code runs with the logged-in user’s permissions, so security rules control what data each user can access.

Custom AI context

If your app has custom functions, shared utilities, or coding conventions, you can document them so the AI follows them when generating code. This is especially useful for teams with established patterns — document them once, and every AI-generated feature follows them automatically.

Add special comment blocks to your JavaScript code (in Developer Options > Global or screen-level JavaScript):

/* @ai-context-start
  Available functions:

  - formatEmployeeCard(entry) - Formats a Staff Directory entry into
    a display-ready object with fullName, role, location, and avatar.
    Returns { fullName, role, location, phone, avatar, isActive }.
    Used on: Home Screen, Directory Screen, Profile Screen.

  - validateExpenseSubmission(formData) - Validates expense form data.
    Amounts over $500 require Manager Approver. Category "Travel"
    requires DepartureDate and ReturnDate. Receipt photo mandatory
    for amounts over $25. Returns { valid: boolean, errors: string[] }.

  Conventions:
  - All navigation uses navigateByRole(targetSection) for role-based routing
  - Date display format: MM/DD/YYYY
  - Toast notifications for user feedback (Fliplet.UI.Toast)
  @ai-context-end */

• Global JavaScript context applies to all screens in the app
• Screen JavaScript context applies to that specific screen only

What to document

• Custom functions — name, purpose, parameters, and return values
• Data source column names and their purposes
• App conventions — naming patterns, shared styles, preferred UI patterns
• Business rules — validation logic, role-based access, approval workflows

Keep context concise and focused on information the AI needs to generate compatible code.

When custom AI context is provided, the AI generates code that uses your existing functions and follows your established conventions.

Using images as references

Paste or drag-and-drop images into the chat as design references. The AI uses them to inform layout and styling decisions. You can use:

• Screenshots of other apps or websites as inspiration
• Wireframes or sketches of the layout you want
• Design mockups from tools like Figma or Sketch

Combine an image with a text description for the best results — for example, paste a screenshot and say “Build something like this but with our company colors and an additional search field at the top.”

Feature ideas

The AI Feature component can build a wide range of interactive features. Here are some examples tailored to common use cases:

Tips for effective prompts

• Be specific — mention layout preferences, data fields, colors, and interactions. “A two-column card layout with employee photo on the left and details on the right” produces better results than “show employee info”
• Iterate — start with the core feature, then refine with follow-up prompts. You do not need to get everything right in the first prompt
• Reference your data — attach a data source before describing the feature so the AI can use exact column names
• Clear chat history between tasks — when switching to a completely different feature, reset the conversation to keep the AI focused. This does not affect the generated code
• Check data source security — always configure security rules for any data source the generated code accesses

Versions

Adding a new AI Feature component to your screen always uses the latest version. Existing components on earlier versions continue to work — no action is required.

To use the latest version, add a new AI Feature component to your screen and re-enter your prompt.

Related articles

• Data source security rules
• Data Sources API (developer docs)