Intelligent Form (React)

Overview

The Intelligent Form component provides a dynamic form interface powered by AI for collecting structured information.

Quick Start

Install the component library

npm install @inkeep/cxkit-react

yarn add @inkeep/cxkit-react

Define the component

import {
  InkeepIntelligentForm,
  type InkeepIntelligentFormProps,
} from "@inkeep/cxkit-react";
 
const config: InkeepIntelligentFormProps = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
  },
  formSettings: {
    heading: "Contact Support",
    description: "Please fill out the form below",
    fields: [
      {
        label: "Name",
        name: "name",
        inputType: "text",
        isRequired: true,
      },
      {
        label: "Email",
        name: "email",
        inputType: "email",
        isRequired: true,
      },
    ],
  },
};
 
const App = () => {
  return <InkeepIntelligentForm {...config} />;
};

Intelligent Form Props

Prop	Type	Required	Description
`baseSettings`	`object`	Yes	Core configuration settings. See Base Settings for details.
`formSettings`	`object`	Yes	Form configuration settings. See Form Settings for details.

FAQ

If you use a webpack build. You could come across this error. To fix this you need to create a custom loader for your webpack configuration to disable this behavior.

Since webpack 5.0.0-beta.30, you're required to specify extensions when using imports in .mjs files or any .js files with a package.json with "type": "module". You can still disable the behavior with resolve.fullySpecified set to false if you see any related errors in your project.

We can add a new rule to our webpack configuration to disable this behavior.

module.exports = {
    module: {
        rules: [
            {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false,
                },
            },
        ],
    },
};

Then add this to your webpack.config.js file.

If you use docusaurus, you can add this to your docusaurus.config.js file as a webpack config override with plugins.

/** @type {import('@docusaurus/types').Config} */
const config = {
// ...
plugins: [
    () => {
    return {
        name: "loader",
        configureWebpack() {
        return {
            module: {
            rules: [
                {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false,
                },
                },
            ],
            },
        };
        },
    };
    },
],
// ...
};
 
module.exports = config;