form-helper-chrome v1.0.3

Form Helper Chrome

form-helper-chrome is an npm package that provides a React component for form error handling using Chrome's Built-in AI. This package leverages AI to generate helpful messages for form errors, enhancing user experience.

Installation

To install the package, use npm:

npm install form-helper-chrome

Usage

To use the FormHelperChrome component and createPrompt function, import them into your React application:

import React from 'react';
import { FormHelperChrome, createPrompt } from 'form-helper-chrome';

const App = () => {
  const formGuideHtml = "<p>Your form guide here</p>";
  const error = {
    name: ['fieldName'],
    errors: ['This field is required'],
    value: '',
    touched: true
  };

  // Create a prompt using the createPrompt function
  const prompt = createPrompt(error, formGuideHtml);

  return (
    <FormHelperChrome
      prompt={prompt}
      fontSize="14px"
      isDarkMode={false}
      plain={false}
    />
  );
};

export default App;

Custom Prompt

If you prefer to create a custom prompt, you can construct it manually as shown below:

const customPrompt = `
  # Custom Form Guide:
  \`\`\`
  ${formGuideHtml}
  \`\`\`

  # Custom Error Description:
  Field: \`${error.name.join(".")}\`
  Value: \`${error.value}\`
  Error: \`${error.errors.join(", ")}\`
  
  Please provide a response in the following format:
  ${outputFormat}
`;

You can then pass this customPrompt to the FormHelperChrome component:

Props

FormHelperChrome

createPrompt

Prerequisites

This package utilizes Chrome's Built-in AI APIs, which require specific browser settings and access permissions. Please follow the steps below to ensure proper setup:

1. Join the Early Preview Program: To experiment with Chrome's Built-in AI APIs, you must join the early preview program. Upon joining, you will receive access to the setup guide necessary for configuring your browser.

2. Set Up Chrome Canary or Dev Version: The AI features are available in the Chrome Canary or Dev versions. Ensure you have the appropriate version installed.

3. Enable Required Flags: Follow the instructions provided in the setup guide to enable the necessary flags in your Chrome browser to access the AI APIs.

For an overview of Chrome's Built-in AI APIs, refer to the official introduction.

License

This project is licensed under the MIT License.