FormApp.ai SDK

Are you facing a challenge adding automation features to your AI or SaaS apps and connect with over 100+ other apps / integrations?

FormApp.ai offers a seamless solution — it's your go-to for Automations as a Service (AaaS) and Integrations as a Service!

FormApp.ai is an AI automation actions infrastruture to NextJS-based AI agents and SaaS apps.

Use FormApp.ai to upgrade your AI apps or SaaS apps with automation features, embed automation forms, fill out human-friendly forms to call AI APIs, and connect your app's with 100+ others 3rd apps.

• FormApp.ai SDK
  • Quick Start
  • Glossary
    • Use Case 1: Standalone Actionable Form
    • Use Case 2: Github Action
    • Use Case 3: 3 lines of code in your Next.JS Server Component React
    • Use Case 4: Manually store input values
  • Developer
    • 1. Create Formapp.ai Action by UI
    • 2. Create Formapp.ai Action by API SDK code
    • 3. Create Formapp.ai Action by NPM Package
  • FAQs
    • After embed, should our user embed?
    • Should our apps user login credentials?

Quick Start

Integrate FormApp.ai to your Next.js or React apps is simple, you can just add AI automation actions and connect your app's with 100+ others apps within 3-lines of code in your NextJS project.

Let's open this example project: https://codesandbox.com/XXXX

Glossary

• Actions: Functions with Form that can be submitted to call API, run scripts and AI models.
• Integrations: Credentials to connect 3rd Apps, includes the authentications like OAuth, API Keys, digests stored.
• Account: the end user id in your apps, Formapp.ai用来保存针对该终端用户的integration credentials.
• Consumer: the binding entity in your apps, 通常是你业务系统实例的ID，比如你在做Automation Action，那么这个就是action的id，Formapp.ai会针对这个ID用来存储form input values.

Use Case 1: Standalone Actionable Form

You can embed the Form to run:

import { FormAppAIActionForm } from '@formapp.ai/sdk/react';

export default async function YourReactComponent() {
  const [value, setValue] = useState<FormAppAIValue>(() => {})

  // 所有的FormApp 表单空间，自由选择
  return (
    <>
      <FormAppAIActionForm
        initValue={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        actionKey={'resend'}
      />
    </>
  )
}

actionKey is the name and unique identifier of a action.

The code above will embed the form in https://formapp.ai/actions/resend to your web apps.

This is a very simple form that can provide a form to your user to call AI models, functions with forms.

And you can store their input values, or pass initial input values to the form for simplified your users' objectives.

Use Case 2: Github Action

Run Formapp.ai's action in Github Action.

So that you can use Github Action to called 100+ other 3rd apps.

Create a file called .github/workflow/formapp-example.yaml

name: Example of FormApp.ai action, send email when new commit on pull request

on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:
  send-email:
    name: Send Email
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: formapp-ai/github-action-runner@latest
        with: 
          secretKey: THE_KEY_OF_YOUR_FORMAPP_AI
          actionKey: smtp@v1
          inputData:
            smtp-server: xxxx
            subject: Subject of your email
            body: |
              Email body

Use Case 3: 3 lines of code in your Next.JS Server Component React

You can use Formapp.ai to add automation features and 100+ integrations in your apps within 3 lines of code.

为什么分成两个组件？ 第一段的是服务端渲染的组件，避免你的secret key暴露给你的用户。 所以，首先你通过服务端渲染的组件，拿到public Account Token，这个 Token 可以暴露给用户，客户端直接调用，这个public account token。

与Use Case 1区别，这个相当于加了身份验证，可以让你的用户调用他们的”秘钥“，比如Twitter、Google等，也可以的让这个表单的”输入值“，绑定你的应用程序的实体。

// page.tsx
'use server';
import { FormAppAI } from '@formapp.ai/sdk-ts/api';
import { NextJSClientComponent } from './page-client-component';

export default async function NextJSServerComponent() {
  const accountKey = 'YOUR_ACCOUNT_ID_FOR_SHARE_CONSUMER'; // space id, user id... depends on your business
  const consumerKey = 'YOUR_AUTOMATION_ACTION_ID_OR_OTHER_BINDING'; // automation action id, etc.

  // THIS IS A SERVER RUN CODE
  const api = new FormAppAI({
    apiKey: 'YOUR_PERSONAL_API_SECRET_KEY',
    // baseURL: 'http://localhost:3000/api/openapi', // Formapp.ai API server
  });
  const publicAccountToken = await api.account(accountKey).fetchToken();

  return (
    <NextJSClientComponent
      accountToken={publicAccountToken}
      consumerKey={consumerKey}
      onChange={() => {
        //
      }}
    />
  );
}

// page-client-component.tsx
'use client';

import { FormAppAIAnyAction } from '@formapp.ai/sdk-ts/react';

interface Props {
  publicAccountToken: string;
  consumerKey: string;
  onChange?: (instanceId: string, inputData: Record<string, unknown>) => void;
}

export function NextJSClientComponent(props: Props) {
  return (
    <>
      <FormAppAIAnyAction
        accountToken={props.publicAccountToken} // trpc 取
        consumerKey={props.consumerKey} // bika automation action id
        onChange={(component) => {
          // save
        }}
      />
    </>
  );
}

服务端调用

Server call:

If you store your action in FormApp.ai:

// example/server-call/route.tsx

const api = new FormAppAI({ apiKey: 'YOUR_API_SECRET_KEY' });

const actionKey = 'resend';

// Option1: action instance
const accountKey = 'aaaa';
const consumerKey = 'bbbb';

const result1 = await formapp.action.run(actionKey, accountKey, consumerKey); // YES, no input values

In option 1, no need to run action with custom input values.

Because 在前端，你已经使用 consumerKey，在表单编辑的时候，Formapp.ai就保存了这些表单输入值。

consumer key 用来绑定你的实体，并保存Input Values。 account key，则是用来保存你的end user的integration的credentials。

推荐，这样子你可以拥有所有的formapp.ai的托管能力和后续能力，比如，Run History、Test History、审计、安全等等。

Use Case 4: Manually store input values

使用 Consumer Key 和 Account Key，可以让Formapp.ai托管用户秘钥和表单输入值。 不想使用Formapp.ai，做数据托管？只想纯粹地利用Formapp.ai的表单能力？

import { FormAppAIActionForm } from '@formapp.ai/sdk/react';

export default async function YourReactComponent() {
  const [value, setValue] = useState<FormAppAIValue>(() => {})

  // 所有的FormApp 表单空间，自由选择
  return (
    <>
      <FormAppAIActionForm
        initValue={value}
        onChange={(newValue) => {
          // Remember to store by yourself
          setValue(newValue);
        }}
        actionKey={'resend'}
      />
    </>
  )
}

// Option2 action template run directly

const inputData = {
  'email': '[email protected]',
  'subject': 'aaaa',
}
const result2 = await form.action.runTemplate(actionKey, inputData)

You can also store your action input values in your database, and let your business logic to run it.

AccountKey 是你的apps的终端用户的ID，比如说，你的用户可以保存自己集成信息，如SMTP信息、Twitter OAuth Access Token等等，这些是跟你的终端用户走的信息。

ConsumerKey 指的是你apps的绑定实体，比如，你现在正在制作一个电商管理系统，用于商品的管理，你通过Formapp.ai的一个功能，叫“publishMenu”，这个的功能的 ConsumerKey，你就可以绑定为"publishMenu"，这样子，你用户对这个表单进行保存的值，将会得到保留。

(补图)

CMS管理系统，发文章到外网。

Developer

Developer has 3 methods to publish a Custom FormApp Action.

1. UI
2. API SDK
3. NPM Package

1. Create Formapp.ai Action by UI

It is the easiest way to create a new action.

Tagging

By default, the action template you are modifying is the "default" version, which like a "develop" branch in Git development.

If you want to publish a specify version , you can tagging.

2. Create Formapp.ai Action by API SDK code

Except for you use Formapp.ai to add action configuration through the UI, you can also create a new action by code.

import { FormAppAI } from 'formapp.ai/api';
const formapp = new FormAppAI({ apiKey: 'YOUR_API_SECRET_KEY' });
const result = await formapp.actions.create({
    name: 'resend',
    description: 'Resend email',
    inputs: [
        {
            name: 'to',
        }]
    ]
}

3. Create Formapp.ai Action by NPM Package

import { IFormAppAction } from 'formapp.ai/developer';

export const newFormAction: IFormAppAction = {
}

export default newFormAction;

FAQs

After embed, should our user embed?

to add automation features to your AI agents and SaaS apps with no login required

Should our apps user login credentials?