AI Component Paste

Intelligent, AI-powered form filling with a simple copy and paste

⏱️ Save Time Eliminate tedious manual data entry	🎯 Reduce Errors AI-powered accuracy in form filling	😌 Better UX Smoother, faster user experience
🔌 Easy to Add Just a few lines of code to integrate	🧩 Flexible Works with any form structure	🛠️ Developer Friendly TypeScript + modern web standards

Overview

AI Component Paste solves a common frustration, manually transferring data from one source to web forms, in three simple steps:

1. Copy any text containing relevant information (email, address, contact details, etc.)
2. Click the AI Paste button in your form
3. Watch as fields automatically populate with the correct information

Behind the scenes, this web component extracts text from your clipboard and sends it to your server. There, our extractor function leverages OpenAI's GPT models to intelligently parse the data and match it to your form fields—creating a seamless, error-free data entry experience.

Try the live demo to see it in action.

Installation

npm install @bitovi/ai-component-paste

Usage

Note

Looking for Something a Little More Hands On? Checkout our Guides

• Vanilla JS + Express

To use AI Component Paste, you'll need three things:

1. Frontend An HTML form that includes the component and the client-side script.

2. AI Integration An OpenAI API key

3. Backend An API endpoint that accepts clipboard text and field metadata, and returns structured data.

Frontend Setup

Add the web component inside any HTML form you want to support smart paste on.

Include the script If you're not using a bundler, import the component directly from unpkg

<script type="module" src="https://unpkg.com/@bitovi/[email protected]/dist/component/index.js"></script>

If you're using a bundler like Vite, import the module:

import "@bitovi/ai-component-paste/component";

Add it to a <form>. Form inputs must have a name attribute defined for ai-component-paste to properly scrape the form.

<form>
  <label>
    Name
    <input name="name" />
  </label>

  <label>
    Email
    <input type="email" name="email" />
  </label>

  <label>
    Interest
    <select name="interest">
      <option value="demo">Product Demo</option>
      <option value="pricing">Pricing Info</option>
    </select>
  </label>

  <ai-paste api="/extractor"></ai-paste>
</form>

Once clicked, ai-paste will:

1. Scrape visible form fields
2. Read the clipboard text
3. Send both to your /extractor endpoint
4. Automatically populate the form with AI-generated values

Backend Setup

You must run a server — this cannot be done from the frontend.

🔐 You must set the OPENAI_API_KEY as an environment variable on your server. For more on how to create an OpenAI key, see our guide.

To power the AI form-filling, you'll need to set up a backend server that handles requests from <ai-paste>.

This endpoint should:

1. Accept clipboard text and field metadata
2. Call extractFormData from @bitovi/ai-component-paste/extractor
3. Return a key-value map of field names to values

import express from "express";

import type { FormField } from "@bitovi/ai-component-paste/extractor";
import { extractFormData } from "@bitovi/ai-component-paste/extractor";

const app = express();
app.use(express.json());

app.post<{}, {}, { text: string; fields: FormField[] }>("/extractor", async (req, res) => {
  const { text, fields } = req.body;

  const result = await extractFormData(text, fields);

  res.json(result);
});

app.listen(3000, () => {
  console.log("Extractor API running on http://localhost:3000");
});

extractFormData handles formatting the request and parsing the result — you don't need to write any prompt engineering logic yourself. Make sure your environment includes:

OPENAI_API_KEY=sk-...

Once your endpoint is live, set the api attribute in your frontend form's to point to it:

<ai-paste api="/extractor"></ai-paste>

Events

The component emits custom DOM events you can listen to for logging, analytics, or extending behavior. These events bubble, so you can attach listeners higher up the DOM tree if needed.

Note

If you are using a Controlled Form with React you will need to listen to the ai-paste-extracted event to update your form state.

ai-paste-extracted

document.querySelector("ai-paste").addEventListener("ai-paste-extracted", (event) => {
  const extractedData = event.detail;

  console.log("Extracted data:", extractedData);
});

ai-paste-error Fired when an error occurs during extraction (e.g. network failure, invalid API key, etc.).

document.querySelector("ai-paste").addEventListener("ai-paste-error", (event) => {
  const error = event.detail;
  console.error("Error:", error);
});