Top Related Projects
Node.js example app from the OpenAI API quickstart tutorial
The ChatGPT Retrieval Plugin lets you easily find personal or work documents by asking questions in natural language.
🦜🔗 Build context-aware reasoning applications
TypeChat is a library that makes it easy to build natural language interfaces using types.
Quick Overview
Autoform is a TypeScript library that automatically generates forms based on TypeScript types. It simplifies the process of creating forms by inferring the structure from your existing TypeScript interfaces or types, reducing boilerplate code and ensuring type safety.
Pros
- Automatically generates forms from TypeScript types, saving development time
- Ensures type safety and consistency between your data models and forms
- Customizable with various input types and validation options
- Integrates well with React and Next.js projects
Cons
- Limited to TypeScript projects, not suitable for plain JavaScript
- May require additional configuration for complex form structures
- Documentation could be more comprehensive for advanced use cases
- Relatively new project, which may lead to potential API changes in the future
Code Examples
Creating a basic form:
import { createForm } from "autoform";
type User = {
name: string;
age: number;
email: string;
};
const UserForm = createForm<User>();
function MyComponent() {
return <UserForm onSubmit={(data) => console.log(data)} />;
}
Adding custom validation:
import { createForm } from "autoform";
type LoginForm = {
username: string;
password: string;
};
const LoginForm = createForm<LoginForm>({
password: {
validate: (value) => value.length >= 8 || "Password must be at least 8 characters",
},
});
Using custom input components:
import { createForm } from "autoform";
type ProfileForm = {
bio: string;
};
const ProfileForm = createForm<ProfileForm>({
bio: {
component: "textarea",
},
});
Getting Started
-
Install the package:
npm install autoform
-
Import and use in your React component:
import { createForm } from "autoform"; type MyFormData = { name: string; email: string; }; const MyForm = createForm<MyFormData>(); function MyComponent() { return <MyForm onSubmit={(data) => console.log(data)} />; }
-
Customize as needed using the options object in
createForm
.
Competitor Comparisons
Node.js example app from the OpenAI API quickstart tutorial
Pros of openai-quickstart-node
- Provides a simple, ready-to-use example for integrating OpenAI's API
- Includes a basic web interface for interacting with the API
- Offers clear documentation and setup instructions
Cons of openai-quickstart-node
- Limited in scope, focusing only on basic text generation
- Lacks advanced features or customization options
- Not designed for form automation or complex data handling
Code Comparison
openai-quickstart-node:
const completion = await openai.createCompletion({
model: "text-davinci-002",
prompt: generatePrompt(animal),
temperature: 0.6,
});
autoform:
const result = await autoform.fill(formUrl, {
firstName: 'John',
lastName: 'Doe',
email: 'john@example.com'
});
Summary
openai-quickstart-node is a straightforward starter project for OpenAI API integration, ideal for beginners or quick prototyping. It provides a basic web interface and clear documentation but lacks advanced features.
autoform, on the other hand, is specifically designed for form automation. It offers more specialized functionality for handling web forms, making it more suitable for projects requiring automated form filling or testing.
The choice between these repositories depends on the specific project requirements: general AI text generation (openai-quickstart-node) or form automation (autoform).
The ChatGPT Retrieval Plugin lets you easily find personal or work documents by asking questions in natural language.
Pros of chatgpt-retrieval-plugin
- Designed for integration with ChatGPT, allowing for more advanced AI-powered interactions
- Supports multiple vector database options, providing flexibility for different use cases
- Includes built-in data processing and embedding capabilities
Cons of chatgpt-retrieval-plugin
- More complex setup and configuration required
- Focused on retrieval and may not be as suitable for general form automation tasks
- Requires OpenAI API integration, which may have associated costs
Code Comparison
chatgpt-retrieval-plugin:
from datastore.providers import DataStore
from models.models import DocumentMetadata, QueryResult
async def query_datastore(
query: str, filter: Optional[dict] = None, top_k: Optional[int] = None
) -> List[QueryResult]:
results = await datastore.query(query, filter=filter, top_k=top_k)
return results
autoform:
const autoform = new AutoForm({
selector: '#my-form',
fields: ['name', 'email', 'message'],
onSubmit: (data) => {
console.log('Form submitted:', data);
}
});
The code snippets highlight the different focus areas of the two projects. chatgpt-retrieval-plugin is centered around querying a datastore for AI-powered retrieval, while autoform is designed for simplifying form handling and automation in web applications.
🦜🔗 Build context-aware reasoning applications
Pros of LangChain
- Broader scope and functionality for AI/LLM applications
- Extensive documentation and community support
- Flexible integration with various AI models and tools
Cons of LangChain
- Steeper learning curve due to its comprehensive nature
- May be overkill for simple form automation tasks
- Requires more setup and configuration
Code Comparison
LangChain (Python):
from langchain import OpenAI, LLMChain, PromptTemplate
llm = OpenAI(temperature=0.9)
prompt = PromptTemplate(
input_variables=["product"],
template="What is a good name for a company that makes {product}?",
)
chain = LLMChain(llm=llm, prompt=prompt)
print(chain.run("colorful socks"))
AutoForm (JavaScript):
import AutoForm from "autoform";
const form = new AutoForm({
url: "https://example.com/form",
fields: {
name: "John Doe",
email: "john@example.com"
}
});
form.submit();
While LangChain focuses on AI-powered language tasks, AutoForm specializes in form automation. LangChain offers more versatility for complex AI applications, but AutoForm provides a simpler solution for specific form-filling needs.
TypeChat is a library that makes it easy to build natural language interfaces using types.
Pros of TypeChat
- Broader scope: TypeChat is a general-purpose library for building natural language interfaces, while AutoForm focuses specifically on form automation.
- Microsoft backing: Likely to have more resources, support, and long-term development.
- Stronger typing: Utilizes TypeScript for enhanced type safety and developer experience.
Cons of TypeChat
- Steeper learning curve: Requires understanding of TypeScript and natural language processing concepts.
- More complex setup: Needs additional configuration and integration with language models.
- Less specialized: May require more customization for form-specific tasks compared to AutoForm.
Code Comparison
AutoForm:
const form = new AutoForm();
form.fill({
name: "John Doe",
email: "john@example.com"
});
TypeChat:
import { createLanguageModel, createJsonTranslator } from 'typechat';
const model = createLanguageModel(process.env.OPENAI_API_KEY);
const translator = createJsonTranslator<FormData>(model, schema);
const response = await translator.translate("Fill the form with John Doe's info");
This comparison highlights the simplicity of AutoForm for quick form automation tasks, while TypeChat offers a more powerful and flexible approach for natural language processing in various applications, including but not limited to form filling.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
AutoForm
Automatically render forms for your existing data schema.
[!NOTE]
Work in Progress AutoForm as a standalone package is still work in progress. If you want to help out, please check out the GitHub repository and add your own integrations!
Find the full documentation at autoform.vantezzen.io.
AutoForm is now a full library!
AutoForm quickly grew from a small component into a codebase larger than any shadcn component should be. To let AutoForm grow without bloating your shadcn/ui components, AutoForm is now a full library!
Don't worry, you can still use AutoForm with your shadcn components and expand it with your own components - but it now also supports integration into other UI libraries like MUI and Mantine and we plan on adding support for other schema libraries than zod too.
Check out the new AutoForm documentation for more information.
The new AutoForm does not have full feature-parity with the old AutoForm as we look into what features actually make sense and which once just bloat the experience. If you're missing a feature or have problems with the new library, feel free to write your feedback in the welcome post!
If you want to continue using the pure shadcn/ui component, you can find the old codebase at https://github.com/vantezzen/auto-form/tree/pure-shadcn - but write us what keeps you from migrating to the new library!
What is AutoForm? Let's say you have a zod schema that you already use for your backend:
import { z } from "zod";
const userSchema = z.object({
name: z.string(),
birthday: z.coerce.date(),
email: z.string().email(),
});
With AutoForm, you can automatically render a form for this schema:
import { AutoForm } from "@autoform/mui";
import { ZodProvider } from "@autoform/zod";
function MyForm() {
return (
<AutoForm
schema={schemaProvider}
onSubmit={(data) => {
console.log(data);
}}
withSubmit
/>
);
}
AutoForm itself is agnostic to the schema library, rendering library and UI library you use, but it comes with a set of official packages that make it easy to use with popular libraries like Zod, React, Material UI, etc.
When to use AutoForm?
AutoForm is mostly meant as a drop-in form builder for your internal and low-priority forms with existing schemas. For example, if you already have schemas for your API and want to create a simple admin panel to edit user profiles, simply pass the schema to AutoForm and you're done.
As forms almost always grow more complex, AutoForm gives you options to customize how forms are rendered (e.g. using the fieldConfig
options) and gives you escape hatches to customize the form even further.
However, AutoForm does not aim to be a full-featured form builder. It does not aim to support every edge case in your schema or allow building complex, multi-page forms. If you need more customization, feel free to customize AutoForm's renderer in your project or use more powerful form builders like Formik - though those require more specialized configuration instead of simple drop-in support for your zod schema. For an example on how AutoForm can be extended for more powerful, YAML-based, multi-page forms, see AutoForm YAML.
shadcn/ui component
AutoForm started out as a shadcn/ui component but grew so large I decided it's best to split it into a package instead.
@autoform/react
does currently not have full feature-parity with the shadcn/ui component, but it's getting there. If you want to use the shadcn/ui component, you can still use it as a standalone package.
Development
AutoForm uses a TurboRepo monorepo setup. To get started, run:
npm install
npm run dev
This will start the development server for the documentation website and the AutoForm package itself.
For releases, AutoForm uses changesets. To create a new release, run:
npm run build
npm run cypress # Run the component tests
npx changeset
This will guide you through creating a new changeset. To publish the changeset, run:
npx changeset version
npx changeset publish
License
All packages in the AutoForm monorepo are licensed under the MIT license.
Top Related Projects
Node.js example app from the OpenAI API quickstart tutorial
The ChatGPT Retrieval Plugin lets you easily find personal or work documents by asking questions in natural language.
🦜🔗 Build context-aware reasoning applications
TypeChat is a library that makes it easy to build natural language interfaces using types.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot