AI Form Fill

Framework-agnostic library for AI-powered form filling. Extract structured data from unstructured text and automatically fill forms using OpenAI, Ollama, Perplexity, or custom AI providers.

Features

• Uses LLMs to understand and extract data from natural language
• Automatically matches data to form fields
• Works with Ollama, OpenAI or Perplexity
• Framework-agnostic - works with vanilla JS, React, Vue, or any framework that allows module imports
• Two integration modes: Quick setup or full customization
• Field hints for precise AI guidance
• Configurable field targeting

Installation

npm install ai-form-fill

Quick Start (Simple Setup)

The fastest way to get started - just add HTML attributes and one line of JavaScript.

HTML Setup

<form id="aff-form" data-aff-provider="ollama">
  <input type="text" name="name" placeholder="Name">
  <input type="email" name="email" placeholder="Email">
  <input type="tel" name="phone" placeholder="Phone">
</form>

<textarea id="aff-text" placeholder="Paste your text here..."></textarea>
<button id="aff-text-button">Fill Form</button>

JavaScript (One Line!)

import { initializeAFFQuick } from 'ai-form-fill';

initializeAFFQuick(); // That's it!

Required Element IDs

| Element ID | Description | |------------|-------------| | aff-form | The form element to fill | | aff-text | Textarea for user input text | | aff-text-button | Button to trigger form filling |

Provider Selection

Add data-aff-provider attribute to specify which AI provider to use:

<form id="aff-form" data-aff-provider="openai">

Available providers (case-insensitive): ollama, openai, perplexity

Custom Form ID

You can use a custom form ID by passing it to initializeAFFQuick():

initializeAFFQuick('my-custom-form');

Advanced Setup (Full Customization)

For complete control over the library, use the AIFormFill class directly.

Basic Usage

import { AIFormFill } from 'ai-form-fill';

// Create instance with a provider
const aiForm = new AIFormFill('ollama', { 
  model: 'gemma3:4b',
  debug: true 
});

// Fill entire form from unstructured text
const form = document.getElementById('myForm') as HTMLFormElement;
const text = "My name is John Doe, email [email protected], phone 555-1234";

await aiForm.parseAndFillForm(form, text);

Fill a Single Field

const bioField = document.querySelector('#bio') as HTMLElement;
await aiForm.fillSingleField(bioField);

Using Custom Providers

You can pass a custom AIProvider instance instead of a provider name:

import { AIFormFill, LocalOllamaProvider } from 'ai-form-fill';

const customProvider = new LocalOllamaProvider({
  apiEndpoint: 'http://my-server:11434',
  model: 'llama3',
  timeout: 60000,
});

const aiForm = new AIFormFill(customProvider, { debug: true });

Configuration

Provider Options

Ollama (Local - Recommended for Development)

const aiForm = new AIFormFill('ollama', {
  model: 'gemma3:4b',
  apiEndpoint: 'http://localhost:11434', // Optional
  timeout: 40000, // Optional
});

OpenAI

const aiForm = new AIFormFill('openai', {
  model: 'gpt-5-nano',
  timeout: 60000,
});

Perplexity

const aiForm = new AIFormFill('perplexity', {
  model: 'sonar',
  timeout: 60000,
});

Global Configuration

Change default settings for all instances:

import { affConfig } from 'ai-form-fill';

// Update Ollama defaults
affConfig.providers.ollama.model = 'mistral';
affConfig.providers.ollama.apiEndpoint = 'http://my-server:11434';

// Update OpenAI defaults
affConfig.providers.openai.model = 'gpt-4o';

// Enable debug mode globally
affConfig.defaults.debug = true;

Field Targeting

By default, all detected form fields are filled. Target specific fields only:

const aiForm = new AIFormFill('ollama', {
  targetFields: ['firstName', 'lastName', 'email'], // Only fill fields with these name attributes
});

await aiForm.parseAndFillForm(form, text);

Update the field list after instantiation:

aiForm.setFields(['name', 'phone']); // Update targeted fields
aiForm.setFields(undefined);          // Reset to fill all fields

// Get currently targeted fields
const fields = aiForm.getFields(); // Returns string[] | undefined

Field Hints (data-aff-hint)

Provide additional context to help the AI understand specific fields using the data-aff-hint attribute:

<form id="job-application">
  <!-- Basic field - AI infers from name/label -->
  <input type="text" name="firstName" />
  
  <!-- Date field with format hint -->
  <input 
    type="date" 
    name="startDate" 
    data-aff-hint="Use the earliest date mentioned in the text"
  />
  
  <!-- Select with mapping hint -->
  <select 
    name="department" 
    data-aff-hint="Map to the closest match from the available options"
  >
    <option value="engineering">Engineering</option>
    <option value="sales">Sales</option>
    <option value="marketing">Marketing</option>
  </select>
  
  <!-- Textarea with content guidance -->
  <textarea 
    name="bio" 
    data-aff-hint="Extract a professional summary, max 2 sentences"
  ></textarea>
</form>

Hints are automatically read when filling the form:

const aiForm = new AIFormFill('openai', { debug: true });
const form = document.getElementById('job-application') as HTMLFormElement;

await aiForm.parseAndFillForm(form, resumeText);

Overview

AIFormFill Class

Constructor

new AIFormFill(provider: AvailableProviders | AIProvider, options?: AIFormFillConfig & ProviderConfig)

| Parameter | Type | Description | |-----------|------|-------------| | provider | 'ollama' \| 'openai' \| 'perplexity' \| AIProvider | Provider name or custom instance | | options.targetFields | string[] | Optional list of field names to fill | | options.debug | boolean | Enable debug logging (default: false) | | options.model | string | Model name to use | | options.apiEndpoint | string | Custom API endpoint | | options.timeout | number | Request timeout in ms |

Methods

| Method | Description | |--------|-------------| | parseAndFillForm(form, text) | Parse text and fill matching form fields | | fillSingleField(element) | Fill a single field with AI-generated content | | setProvider(provider) | Change the AI provider | | getProvider() | Get the current AI provider | | setFields(fields) | Set which fields should be filled | | getFields() | Get currently targeted fields | | getAvailableModels() | Get list of available models from provider | | setSelectedModel(model) | Set the model to use | | getSelectedModel() | Get the currently selected model | | providerAvailable() | Check if the provider is available |

initializeAFFQuick(formId?)

Quick initialization function for simple setups.

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | formId | string | 'aff-form' | ID of the form element |

Examples

See the examples/ folder for working demos:

| Example | Description | |---------|-------------| | basic/ | Simple form filling with minimal setup | | advanced/ | Full-featured demo with provider selection and debugging |

Run examples locally:

npm run dev

Development Setup

Prerequisites

• Node.js - Install from nodejs.org
• pnpm (recommended) - Install guide on pnpm.io
• Ollama - Install from ollama.ai

Recommended: Ollama Setup (Simplest)

Run this command after installing Ollama:

ollama pull gemma3:4b

No API keys required!

Full Setup

1. Clone this Git repository

2. Go to the Project root and run

pnpm install

3. Optional - API Keys for OpenAI/Perplexity:

   Create a .env file in the project root:

   VITE_OPEN_AI_KEY=your-openai-key-here
   VITE_PERPLEXITY_KEY=your-perplexity-key-here

4. Start development server:

   pnpm run dev

Project Structure

ai-form-fill/
├── lib/                 # Core library source
│   ├── core/            # Main classes and types
│   ├── providers/       # AI provider implementations
│   └── utils/           # Utility functions
├── examples/            # Demo applications
│   ├── basic/           # Simple form fill example
│   └── advanced/        # Full-featured demo
└── mock/                # API mock endpoints for development

APIs

APIs have to be handled with utmost care when working with JavaScipt since they are easily exposed when they are handled in the front end. since this library is a frontend one it means that sending the data to a self hosted backend first is a must. In the current version this happens through the mock abstraction but in real implementations this would require the configurations of a proper backend. this is outside the scope of this project but there is an obligation to set up guidelines as to how the libraries requiests should be relayed.