<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 https://www.facebook.com/tr?id=1063935717132479&amp;ev=PageView&amp;noscript=1 "> Bitovi Blog - UX and UI design, JavaScript and Frontend development
Loading

React |

Introducing AI Component Paste: An Open Source AI Form Filler

Discover how Bitovi's new AI Component Paste tool streamlines form auto-fill using AI, enhancing development speed and customization for React, NodeJS, and Sequelize apps.

David Nicholas

David Nicholas

Twitter Reddit

With AI booming, we’re always on the lookout for ways it can deliver maximum value. That’s why we were excited to come across .NET’s Smart Components, which introduced a compelling approach to AI-assisted UI in Blazor. But there was one catch: Blazor lock-in.

We wanted portability—something that worked across frameworks without committing to one stack. So, we built @bitovi/ai-component-paste, a web component and node-based version of the Smart Paste from the Smart Components idea.

This package lets users paste structured or unstructured text like an email signature, job description, or resume and auto-fill forms intelligently using AI. It reads from the clipboard, sends the text to a language model, and maps the extracted values directly to inputs based on their name attributes.

It currently uses a model from OpenAI, but we've used Vercel’s AI SDK to allow for future model and provider customization. The setup is simple. Here’s how to get started.

See it action

Copy the following text and click "Smart Paste" in the form below:

"hey can you post a job for us? we need a Senior DevOps Engineer based in Chicago, IL, remote is fine. salary range is $130k–$150k, full-time. start date ideally 2024-07-22

description: someone strong with AWS, Terraform, CI/CD pipelines, and observability tools like Datadog or Prometheus. have candidates send resumes to ops-hiring@infraworks.com thanks!"

You can also Check out the demo live!

Bitovi is an open source-oriented company that thrives on community feedback to guide our projects. Right now, the feature surface of @bitovi/ai-component-paste is intentionally small. We want to build the things you actually need. So, what do you think?

  • Is this something you’d use or like to try out?
  • Are there other components you’d want to see like this?
  • Do you think any features would take this one further?

Let us know on Discord—we’re all ears👂

Join our Discord