toolsdk

Tool SDK for AI Agents

ToolSDK.ai is a decentralized Tool SDK for AI Agents.

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

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

ToolSDK.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.

• Tool SDK for AI Agents
  • 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 uses this to store integration credentials for that end user.
• Consumer: the binding entity in your apps, typically the ID of your business system instance. For example, if you're working on an Automation Action, this would be the action's ID. Formapp.ai uses this ID to store form input values.

Use Case 1: Standalone Actionable Form

You can embed the Form to run:

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

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

  // All FormApp form components are freely available for selection
  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.

// page.tsx
'use server';
import { FormAppAI } from '@toolsdk.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 ToolSDKApiClient({
    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={() => {
        //
      }}
    />
  );
}

Why split into two components? The first component is server-side rendered to prevent exposing your secret key to users. Therefore, you first obtain a public Account Token through the server-side rendered component. This token can be exposed to users and directly called by the client.

The difference from Use Case 1 is that this adds authentication, allowing your users to call their "secrets" (like Twitter, Google, etc.), and also enables binding the form's "input values" to your application's entities.

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

import { FormAppAIAnyAction } from '@toolsdk.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} // fetch via server
        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 on the frontend, you've already used the consumerKey, Formapp.ai saves these form input values during form editing.

The consumer key is used to bind your entity and save Input Values. The account key is used to save your end user's integration credentials.

We recommend this approach as it allows you to leverage all of Formapp.ai's hosting capabilities and subsequent features, such as Run History, Test History, auditing, security, and more.

Use Case 4: Manually store input values

Using Consumer Key and Account Key allows Formapp.ai to host user credentials and form input values. Don't want to use Formapp.ai for data hosting? Just want to purely utilize Formapp.ai's form capabilities?

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

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

  // All `toolsdk` form components are available for free selection
  return (
    <>
      <FormAppAIActionForm
        initValue={value}
        onChange={(newValue) => {
          // Remember to store by yourself
          setValue(newValue);
        }}
        actionKey={'resend'}
      />
    </>
  )
}

// Option2 action template run directly

const inputData = {
  email: '[e-mail]',
  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 is the ID of the end user in your apps. For example, your users can save their own integration information, such as SMTP credentials, Twitter OAuth Access Tokens, etc. These are tied to your end users.

ConsumerKey refers to the binding entity in your apps. For instance, if you're building an e-commerce management system for product management, and you're using a Formapp.ai feature called "publishMenu", you can bind the ConsumerKey to "publishMenu". This way, the values your users save in this form will be preserved.

CMS management system, publishing articles to external sites.

Developer

Developer has 3 methods to publish a Custom FormApp Action.

• UI
• API SDK
• 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 'toolsdk/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 'toolsdk/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?