# Fillo agent examples

Last updated: 2026-06-26
Canonical URL: https://fillo.so/agent-examples.md
Search API: https://fillo.so/api/v1/agent-examples/search?q=support+upload&detail=full

Curated Fillo-owned examples for coding agents. Use these as inspiration for schema, interaction, and native styling. Do not copy every example into the host app; search for the closest pattern, adapt it to the app's existing design, and keep the final form small.

## How agents should use this

- Search by use case before designing the schema.
- Prefer style examples when the form should match a product surface such as settings, support, docs, checkout, or onboarding.
- Use screenshot preview URLs and visual notes for layout direction; still inspect the host app before editing.
- Treat examples as product guidance, not as a replacement for current SDK docs.

## Index

- `react-default-renderer` (implementation): React default renderer - react, nextjs, install, default-renderer, native-form
- `support-intake-dark-panel` (style): Dark support intake panel - support, dark-mode, customer-portal, panel, uploads
- `article-feedback-inline` (style): Inline article feedback - docs, article, auto-submit, thumbs, feedback
- `settings-cancellation-review` (style): Settings-page cancellation review - settings, cancellation, billing, account, retention
- `onboarding-profile-native` (style): Native onboarding profile - onboarding, workspace, signup, profile, hidden-fields
- `security-review-upload` (template): Security review with large uploads - security, procurement, upload, documents, enterprise
- `checkout-help-inline` (style): Checkout help in flow - checkout, commerce, support, hidden-context, inline
- `nps-conditional-follow-up` (template): NPS with conditional follow-up - nps, linear-scale, conditional-logic, feedback, survey
- `job-application-multipage` (template): Multi-page job application - job-application, hiring, multi-page, portfolio, signature
- `custom-fields-code-first` (implementation): Code-first custom fields - custom-field, code-first, custom-components, slider, color
- `headless-product-layout` (implementation): Headless product layout - headless, custom-layout, formfield, provider, native-layout
- `beta-access-request` (template): Beta access request - beta, waitlist, feature-gate, early-access, product
- `product-priority-ranking` (template): Product priority ranking - ranking, roadmap, product-feedback, priorities

---

## React default renderer
ID: `react-default-renderer`
Kind: `implementation`
Search tags: `react`, `nextjs`, `install`, `default-renderer`, `native-form`
Field kinds: `short_text`, `email`, `dropdown`, `long_text`
Links: source: https://fillo.so/docs/embed; preview: https://fillo.so/docs/embed
Install the SDK, define a form, create a publishable client, and render native controls.
Use when: Use this when the app just needs a working native form that follows the SDK defaults and saves responses in Fillo.
Prompt example:
> Add a basic Fillo form to a React or Next.js page.
Implementation snippet:

```tsx
import { FilloForm, createClient, defineForm } from "@usefillo/react";
import "@usefillo/react/styles.css";

const client = createClient({ key: process.env.NEXT_PUBLIC_FILLO_KEY! });

const form = defineForm({
  id: "stable-form-id",
  title: "Product feedback",
  pages: [{ id: "p1", blocks: [
    { id: "email", kind: "email", label: "Work email", required: true },
    { id: "notes", kind: "long_text", label: "What should we know?" },
  ]}],
});

export function ProductFeedback() {
  return <FilloForm form={form} client={client} />;
}
```
## Dark support intake panel
ID: `support-intake-dark-panel`
Kind: `style`
Search tags: `support`, `dark-mode`, `customer-portal`, `panel`, `uploads`, `status`
Field kinds: `dropdown`, `phone`, `multi_select`, `long_text`, `checkbox`
Links: source: https://fillo.so/examples#support-intake; preview: https://fillo.so/examples#support-intake
A support form with priority, area, notes, and status updates styled to match a dark app surface.
Use when: Use this for support widgets, account help pages, or admin panels where the host app already has a dark product shell.
Prompt example:
> Support request inside a dark customer portal with priority, affected area, and screenshots or details.
Style recipe:

- Mode: `css-classes`
- Surface: `support-panel`
- Direction: The form should look embedded in a product help panel, not like a marketing form dropped onto a dark background.

Visual notes:

- Use the host app panel, toolbar, and spacing before reaching for a new form container.
- Keep the submit button as the only saturated element.
- Put upload or evidence fields after the issue description so support gets narrative first.

Preview images:

- Desktop style preview (1440x1000): https://fillo.so/agent-examples/previews/support-intake-dark-panel?viewport=desktop
- Mobile style preview (390x844): https://fillo.so/agent-examples/previews/support-intake-dark-panel?viewport=mobile
Implementation snippet:

```tsx
<div className="support-panel">
  <FilloForm form={supportIntake} client={client} showTitle={false} />
</div>
```
## Inline article feedback
ID: `article-feedback-inline`
Kind: `style`
Search tags: `docs`, `article`, `auto-submit`, `thumbs`, `feedback`, `inline`
Field kinds: `hidden`, `select`, `long_text`
Links: source: https://fillo.so/docs/embed; preview: https://fillo.so/docs/embed
One-tap helpful/not-helpful feedback with conditional detail only when the answer needs it.
Use when: Use this at the end of docs, help center articles, AI answers, changelog entries, or onboarding tips.
Avoid when: Do not use this for long surveys. If there are more than one or two real questions, keep a submit button.
Prompt example:
> Was this helpful feedback at the bottom of a docs article with optional follow-up.
Style recipe:

- Mode: `theme-prop`
- Surface: `article`
- Direction: Small, calm, and close to the content. The form should not interrupt reading or look like a modal.

Visual notes:

- Hide the title if the surrounding section already asks the question.
- Use auto-submit only when a single discrete answer can complete the response.
- Reveal a text follow-up only for the negative answer.

Preview images:

- Desktop style preview (1440x1000): https://fillo.so/agent-examples/previews/article-feedback-inline?viewport=desktop
- Mobile style preview (390x844): https://fillo.so/agent-examples/previews/article-feedback-inline?viewport=mobile
Implementation snippet:

```tsx
const articleVote = defineForm({
  id: "article-feedback",
  title: "Was this helpful?",
  pages: [{ id: "vote", blocks: [
    { id: "path", kind: "hidden", label: "Page", paramName: "path" },
    { id: "vote", kind: "select", label: "Was this helpful?", required: true,
      options: [
        { id: "up", label: "Yes", icon: "thumbs_up" },
        { id: "down", label: "No", icon: "thumbs_down" },
      ] },
    { id: "note", kind: "long_text", label: "What should we add?",
      visibleIf: [{ fieldId: "vote", op: "eq", value: "down" }] },
  ]}],
  settings: { submitMode: "auto", submissionLimit: "once_per_visitor" },
});
```
## Settings-page cancellation review
ID: `settings-cancellation-review`
Kind: `style`
Search tags: `settings`, `cancellation`, `billing`, `account`, `retention`, `danger-zone`
Field kinds: `select`, `long_text`, `date`
Links: source: https://fillo.so/examples#custom-layout; preview: https://fillo.so/examples#custom-layout
A cancellation form that lives inside account settings and captures reason, timing, and save context.
Use when: Use this for account settings workflows where the form should sit beside billing, plan, or danger-zone controls.
Prompt example:
> Cancellation review inside account settings with reason, retention note, and cancel-after date.
Style recipe:

- Mode: `headless-layout`
- Surface: `settings-page`
- Direction: Operational and quiet. The form should inherit the settings page rhythm rather than becoming a standalone survey card.

Visual notes:

- Render fields inside the same settings grid as native account controls.
- Use existing destructive-action styling only for the final action, not every field.
- Keep the response short enough that cancellation still feels like an account workflow.

Preview images:

- Desktop style preview (1440x1000): https://fillo.so/agent-examples/previews/settings-cancellation-review?viewport=desktop
- Mobile style preview (390x844): https://fillo.so/agent-examples/previews/settings-cancellation-review?viewport=mobile
Implementation snippet:

```tsx
import { FilloProvider, FormField, useFillo } from "@usefillo/react";

export function CancellationPanel() {
  return (
    <FilloProvider form={cancellationForm} client={client}>
      <section className="settings-panel">
        <header>
          <p>Account</p>
          <h2>Before you cancel</h2>
        </header>
        <div className="settings-grid">
          <FormField id="reason" />
          <FormField id="keep" />
          <FormField id="date" />
        </div>
        <SubmitRow />
      </section>
    </FilloProvider>
  );
}

function SubmitRow() {
  const form = useFillo();
  return <button onClick={() => void form.submit()}>Send cancellation</button>;
}
```
## Native onboarding profile
ID: `onboarding-profile-native`
Kind: `style`
Search tags: `onboarding`, `workspace`, `signup`, `profile`, `hidden-fields`, `native-layout`
Field kinds: `short_text`, `select`, `multi_select`, `hidden`
Links: source: https://fillo.so/examples#beta-access; preview: https://fillo.so/examples#beta-access
A first-run onboarding form embedded in a product setup screen with hidden source context.
Use when: Use this when a user signs up and the app needs account context before creating their first project or workspace.
Prompt example:
> Workspace onboarding form with role, first use case, and source context.
Style recipe:

- Mode: `theme-prop`
- Surface: `onboarding`
- Direction: This should feel like the next step in signup, not a hosted survey detour. Let the app chrome carry trust.

Visual notes:

- Use the app's onboarding layout, progress copy, and primary action placement.
- Capture hidden source or campaign context through URL prefill instead of visible questions.
- Route in onSubmitted only after Fillo records the response.

Preview images:

- Desktop style preview (1440x1000): https://fillo.so/agent-examples/previews/onboarding-profile-native?viewport=desktop
- Mobile style preview (390x844): https://fillo.so/agent-examples/previews/onboarding-profile-native?viewport=mobile
Implementation snippet:

```tsx
<FilloForm
  form={onboardingProfileForm}
  client={client}
  showTitle={false}
  onSubmitted={() => router.push("/projects/new")}
/>
```
## Security review with large uploads
ID: `security-review-upload`
Kind: `template`
Search tags: `security`, `procurement`, `upload`, `documents`, `enterprise`, `large-files`
Field kinds: `email`, `short_text`, `dropdown`, `file_upload`, `date`, `long_text`
Links: source: https://fillo.so/examples#support-intake; preview: https://fillo.so/examples#support-intake
Multi-page review request with region, procurement files, review deadline, and notes.
Use when: Use this when a product workflow needs customer-owned file uploads, procurement evidence, or security review packets.
Prompt example:
> Security review form with large document upload and data region.
## Checkout help in flow
ID: `checkout-help-inline`
Kind: `style`
Search tags: `checkout`, `commerce`, `support`, `hidden-context`, `inline`, `cart`
Field kinds: `hidden`, `email`, `select`, `long_text`
A compact help form in checkout with hidden cart context and support follow-up.
Use when: Use this when a user is blocked in checkout and support needs enough context without sending them away.
Prompt example:
> Checkout issue form with hidden cart id, email, problem type, and details.
Style recipe:

- Mode: `theme-prop`
- Surface: `checkout`
- Direction: Do not block the whole checkout. Keep it beside the order summary or below the failing step.

Visual notes:

- Use hidden cart/account fields so the respondent does not retype product context.
- Keep the form short enough that checkout can continue.
- Use onSubmitted for analytics or local UI changes, not for response storage.

Preview images:

- Desktop style preview (1440x1000): https://fillo.so/agent-examples/previews/checkout-help-inline?viewport=desktop
- Mobile style preview (390x844): https://fillo.so/agent-examples/previews/checkout-help-inline?viewport=mobile
Implementation snippet:

```tsx
<FilloForm
  form={checkoutIssueForm}
  client={client}
  theme={{ primary: "#ef5f3c", radius: "10px" }}
  onSubmitted={(id) => track("checkout_help_requested", { responseId: id })}
/>
```
## NPS with conditional follow-up
ID: `nps-conditional-follow-up`
Kind: `template`
Search tags: `nps`, `linear-scale`, `conditional-logic`, `feedback`, `survey`
Field kinds: `linear_scale`, `long_text`, `checkbox`
Links: source: https://fillo.so/examples#nps; preview: https://fillo.so/examples#nps
A 0-10 recommendation score with different follow-up copy for low and high scores.
Use when: Use this for product pulse checks where a numeric score matters but the follow-up should stay relevant.
Prompt example:
> NPS survey with score and conditional follow-up question.
## Multi-page job application
ID: `job-application-multipage`
Kind: `template`
Search tags: `job-application`, `hiring`, `multi-page`, `portfolio`, `signature`
Field kinds: `short_text`, `email`, `phone`, `url`, `select`, `date`, `long_text`, `signature`
Links: source: https://fillo.so/examples#job-application; preview: https://fillo.so/examples#job-application
Role application with contact details, portfolio, screening fields, and applicant confirmation.
Use when: Use this for applications where respondents need orientation and progress across multiple pages.
Prompt example:
> Job application with resume or portfolio, role selection, and screening questions.
## Code-first custom fields
ID: `custom-fields-code-first`
Kind: `implementation`
Search tags: `custom-field`, `code-first`, `custom-components`, `slider`, `color`
Field kinds: `short_text`, `select`, `custom`
Links: source: https://fillo.so/examples#code-first; preview: https://fillo.so/examples#code-first
Use custom field kinds when the host app owns specialized inputs like color, slider, or address pickers.
Use when: Use this when a default input would be awkward and the host app already has a component that should own the interaction.
Prompt example:
> A code-defined form with custom color and slider fields rendered by host components.
Implementation snippet:

```tsx
const customComponents = {
  color: ColorPickerField,
  slider: SeatSliderField,
};

<FilloForm form={codeFirstForm} client={client} customComponents={customComponents} />;
```
## Headless product layout
ID: `headless-product-layout`
Kind: `implementation`
Search tags: `headless`, `custom-layout`, `formfield`, `provider`, `native-layout`
Field kinds: `short_text`, `email`, `select`
Links: source: https://fillo.so/examples#custom-layout; preview: https://fillo.so/examples#custom-layout
Run the Fillo engine while placing fields inside the host app's own layout and surrounding content.
Use when: Use this when the form belongs inside an existing modal, wizard, settings page, or product-specific card.
Prompt example:
> Custom layout with first and last name side by side and plan selection in the host app design.
Implementation snippet:

```tsx
import { FilloProvider, FormField, useFillo } from "@usefillo/react";

export function CancellationPanel() {
  return (
    <FilloProvider form={cancellationForm} client={client}>
      <section className="settings-panel">
        <header>
          <p>Account</p>
          <h2>Before you cancel</h2>
        </header>
        <div className="settings-grid">
          <FormField id="reason" />
          <FormField id="keep" />
          <FormField id="date" />
        </div>
        <SubmitRow />
      </section>
    </FilloProvider>
  );
}

function SubmitRow() {
  const form = useFillo();
  return <button onClick={() => void form.submit()}>Send cancellation</button>;
}
```
## Beta access request
ID: `beta-access-request`
Kind: `template`
Search tags: `beta`, `waitlist`, `feature-gate`, `early-access`, `product`
Field kinds: `email`, `dropdown`, `number`, `checkbox`
Links: source: https://fillo.so/examples#beta-access; preview: https://fillo.so/examples#beta-access
Collect feature interest, team size, and follow-up consent before enabling a beta.
Use when: Use this for feature gates, beta rollouts, waitlists, and early-access workflows inside an app.
Prompt example:
> Beta waitlist with feature choice, team size, and feedback-call consent.
## Product priority ranking
ID: `product-priority-ranking`
Kind: `template`
Search tags: `ranking`, `roadmap`, `product-feedback`, `priorities`
Field kinds: `ranking`
Links: source: https://fillo.so/examples#feature-priority; preview: https://fillo.so/examples#feature-priority
Let an account rank roadmap priorities and save that signal with the response.
Use when: Use this when a customer success, product, or onboarding flow needs structured priority signal.
Prompt example:
> Feature priority ranking form for a customer account.