Docs

Documentation versions (currently viewingVaadin 24)

Getting Started with AI Form Filler

How to start using the AI Form Filler to use ChatGPT to fill in forms.

Form Filler is implemented as an add-on. To use it you need to add the Maven dependency to your project.

<dependency>
    <groupId>com.vaadin.flow.ai</groupId>
    <artifactId>form-filler-addon</artifactId>
    <version>1.0.0</version>
</dependency>

If you prefer to first test the add-on with an example see the demo repository. Also, some demos and advanced example use cases are included in the add-on repository.

In the demo, you can see an example of all supported components, with some raw text sources included. In the add-on repository, you’ll find some experiments with more advanced use cases like document inputs through optical character recognition (OCR). New content and examples — such as using other LLM models than ChatGPT or improving OCR results — could be included in the add-on project in the future.

To run demos or use the addon out of the box in your application you need a valid ChatGPT API Key. You can set this key as an environment variable or as a JVM property with the -D flag. The name of the variable is OPENAI_TOKEN.

Go to System  Advanced Settings  Set Environment Variables to set OPENAI_TOKEN.

Example

To understand how the Form Filler works, take a look at this example:

An input field labeled 'Name' with the value 'Bart' and an input field labeled 'Address' with the value '742 Evergreen Terrace, Springfield USA'
@Route("test")
public class FormTest extends Div {

    public FormTest() {

        TextField nameField = new TextField("Name");
        nameField.setId("name");

        TextField addressField = new TextField("Address");
        addressField.setId("address");

        FormLayout fl = new FormLayout();
        fl.add(nameField, addressField);

        FormFiller formFiller = new FormFiller(fl);
        formFiller.fill("My name is Bart and I live at 742 Evergreen Terrace, Springfield USA");

        add(fl);
    }
}

To enable the Form Filler, there is only one requirement. You have to set meaningful IDs to the field components that you want Form Filler to fill. The target can be one component or a group of components (container). Normally, one would use the Form Filler with a Form Layout. However, you can use any kind of layout.