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.
The agent engineering platform.
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.
The agent engineering platform.
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.
Check out the AutoForm documentation for more info, examples, and API references.
AutoForm Skill (optional)
If you use AI coding assistants (such as Cursor, Claude Code, OpenCode, or GitHub Copilot), you can install the AutoForm skill. It gives your coding agent access to AutoForm-specific documentation, examples, and best practices.
npx skills add https://github.com/vantezzen/autoform/tree/main/skills --skill autoform
What is AutoForm? Let's say you have a zod schema that you already use for your backend:
import { z } from "zod";
import { ZodProvider } from "@autoform/zod";
const userSchema = z.object({
name: z.string(),
birthday: z.coerce.date(),
email: z.string().email(),
});
export const schemaProvider = new ZodProvider(userSchema);
With AutoForm, you can automatically render a form for this schema:
import { AutoForm } from "@autoform/mui/react-hook-form";
// shadcn CLI install: "@/components/ui/autoform/react-hook-form"
import { schemaProvider } from "./schema";
function MyForm() {
return (
<AutoForm
schema={schemaProvider}
onSubmit={(data) => {
console.log(data);
}}
withSubmit
/>
);
}
AutoForm itself is agnostic to the schema, rendering, and UI library you use. It also comes with official packages for popular UI libraries like Material UI, shadcn/ui, Mantine, Ant Design, Chakra UI, and validation libraries like Zod, Yup, and Joi.
When to use AutoForm?
AutoForm is mostly meant as a drop-in form builder for your internal tools and simple 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.
AutoForm doesn't change how you write custom inputs or access data, state, and methods. You still use your form library the way you usually would.Rather than manually wiring up fields and writing binding boilerplate, AutoForm maps schema fields to the right input components, connects them to the form library, and sets up validation.
As forms almost always grow more complex, AutoForm gives you options to customize how forms are rendered (e.g. using the fieldConfig option) and escape hatches to customize the form even further.
However, AutoForm does not aim to be a full-featured form builder or support every edge case in your schema. If you need more customization, feel free to customize AutoForm's renderer in your project. For an example of how AutoForm can be extended for more powerful, YAML-based, multi-page forms, see AutoForm YAML.
shadcn/ui component
AutoForm evolved from a shadcn/ui component into a standalone library with broader UI and schema support.
Pick your form library
Ready to get started? Follow the guide for the form library you use:
Development
AutoForm uses a TurboRepo monorepo setup. To get started, run:
pnpm install
pnpm dev
This will start the development server for the documentation website and the AutoForm package itself.
For release checks, run:
pnpm build
pnpm check:packages
pnpm cypress
Use pnpm cypress:open to run the component tests in the Cypress UI.
To document a change, add a changeset:
pnpm changeset
To publish a release, run:
pnpm changeset version
pnpm 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.
The agent engineering platform.
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