Integration Actions connect your projects with external platforms and services to facilitate data processing. They enable you to retrieve data from APIs, interact with services like Airtable and Zapier, or even scrape content from websites. Here are the list of actions Toolmark offers
<ul>
<li>GET Request: Send an HTTP Get Request</li>
<li>POST Request: Send an HTTP Post Request</li>
<li>Airtable Read: Read Table from Airtable</li>
<li>Zapier Webhook: Push data to Zapier</li>
<li>Mailgun Send Email: Send emails using your Mailgun account</li>
<li>Navigate: Navigate to a different URL</li>
<li>Chain: Chain multiple actions to run in sequence</li>
<li>Scrape Url: Get content and metadata of an HTML page</li>
<li>Extract PDF Text: Extract text from a PDF file</li>
<li>Validate Data: Run validation on data keys</li>
<li>Youtube Text: Get Text of the Youtube Video</li>
<li>Read From Local Storage: Get value of a key from Browser's Local Storage</li>
<li>Write To Local Storage: Set value of a key in Browser's Local Storage</li>
</ul>
Let's check some examples to understand how they work
<h2 id="reading-with-get-request"><a aria-hidden="true" tabindex="-1" href="#reading-with-get-request"></a>Reading with GET Request</h2>
Let's get some data from an API endpoint by making a GET call to it
<ol>
<li>Select <a href="/editor/action-menu" title="the Actions Menu">the Actions Menu</a> from the Left Menu</li>
<li>Create a new API Call by clicking the + sign next to "Actions"</li>
<li>Fill the form and click save
<ol>
<li>set Name to <code>Get Example</code></li>
<li>set Url to <code>https://jsonplaceholder.typicode.com/posts/1</code></li>
<li>set HTTP Method to <code>GET</code></li>
<li>set <code>Result Data Key</code> to <code>myData</code></li>
</ol>
</li>
</ol>
Now, let's trigger this API Call Action on a button click
<ol>
<li>Add a Button component to the Canvas</li>
<li>Change its text to "Get My Data"</li>
<li>Select the Button, and in the Settings Menu on the right, select the <code>Get Example</code> action</li>
</ol>
When button is clicked, it will make an API call to the given URL, and store the response in <code>myData</code>. Here is an example how <code>myData</code> looks like, it's a JSON object
<pre><code>{
 "userId": 1,
 "id": 1,
 "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
 "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}
</code></pre>
Now let's make use of this in our tool
<ol>
<li>Add a Text component to the Canvas</li>
<li>Type <code>{{myData.title}}</code> into it and make it a Heading 2</li>
<li>Press Enter to move to the next line and type <code>{{myData.body}}</code></li>
</ol>
Since the type of <code>myData</code> is JSON, we can access individual fields with dot notation. <code>{{myData.title}}</code> will read the <code>title</code> key from <code>myData</code> while <code>{{myData.body}}</code> will read the <code>body</code> key from <code>myData</code>.
Open preview mode and click the button 
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/api-call-get-single.png" priority="1">
Additional options:
<ul>
<li>You can use data keys anywhere in your action definition. So, instead of using <code>https://jsonplaceholder.typicode.com/posts/1</code> for the url, you can also use something like <code>https://jsonplaceholder.typicode.com/posts/{{postId}}</code></li>
<li>If you are making a call to your API that is not publicly accessible, you can also set Authorization header.</li>
<li>If you are returning a list of items from the API, you can make sure of <a href="/containers#Repeated%20Container" title="Repeated Containers">Repeated Containers</a> to render each item</li>
</ul>
<h2 id="chaining-multiple-actions"><a aria-hidden="true" tabindex="-1" href="#chaining-multiple-actions"></a>Chaining Multiple Actions</h2>
Often times, you need to trigger multiple actions at once. With Chain Action, you can combine any number of actions together that will run sequentially.
<ul>
<li>Press + Add to add more actions</li>
<li>Use drag icon to reorder the actions' execution order 
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/actions-chain.png" width="400"></li>
</ul>
<h2 id="repeating-an-action"><a aria-hidden="true" tabindex="-1" href="#repeating-an-action"></a>Repeating an Action</h2>
The <code>Repeated Action</code> feature allows you to execute a specific action multiple times, similar to how a <a href="/containers#Repeated%20Container" title="Repeated Container">Repeated Container</a> replicates its content N times. You can define the number of repetitions in the <code>Repeat Count</code> field, either by entering a fixed number like <code>3</code> or by using a dynamic data key such as <code>{{itemCount}}</code> or <code>{{myList.length}}</code>.
While repeating the same action multiple times might not always be necessary, it becomes invaluable when dealing with list-type data keys (e.g., <code>myItems[i]</code>).
Suppose you want to generate AI-generated text for a list of cities provided by the user through a <a href="/inputs#Text%20List%20Input" title="Text List Input">Text List Input</a> with the data key <code>cities</code>. If the user inputs two cities, like <code>cities=["Rome", "Paris"]</code>, you need to create text for each city. A straightforward but inefficient approach would be to create separate AI prompt actions for each city:
<ul>
<li><code>Write me a short paragraph about {{cities[0]}}</code></li>
<li><code>Write me a short paragraph about {{cities[1]}}</code></li>
</ul>
This method is cumbersome because:
<ol>
<li>It requires creating multiple identical actions.</li>
<li>The number of cities is unpredictable.</li>
</ol>
Here's how to streamline the process with <code>Repeated Action</code>:
<ol>
<li>Define a Single AI Prompt Action:
<ul>
<li>Prompt: <code>Write me a short paragraph about {{cities[i]}}</code> (note the <code>[i]</code> placeholder)</li>
<li>Result Data Key: <code>cityTexts[i]</code> (using <code>[i]</code> to store results for each iteration)</li>
</ul>
</li>
<li>Create a Repeated Action:
<ul>
<li>Repeat Action: Select the AI prompt action defined above.</li>
<li>Repeat Count: Use <code>{{cities.length}}</code> to match the number of cities.</li>
</ul>
</li>
</ol>
This setup will execute the prompt action for each city, replacing <code>[i]</code> with the current iteration index (0, 1, 2, etc.). The results will be stored as:
<ul>
<li><code>cityTexts[0]</code>: Result of <code>Write me a short paragraph about {{cities[0]}}</code> prompt where <code>{{cities[0]}}</code> is <code>Rome</code></li>
<li><code>cityTexts[1]</code>: Result of <code>Write me a short paragraph about {{cities[0]}}</code> prompt where <code>{{cities[1]}}</code> is <code>Paris</code></li>
<li>And so forth.</li>
</ul>
Ensure your data keys are correctly set up to dynamically adjust to user input. Now that results are written into <code>cityTexts</code> data key, you can use it in your UI, most likely with a <a href="/containers#Repeated%20Container" title="Repeated Container">Repeated Container</a>
<h2 id="validating-data-keys"><a aria-hidden="true" tabindex="-1" href="#validating-data-keys"></a>Validating Data Keys</h2>
It is quite common to require some data before triggering an action. "Validate Data" action allows you to validate any data key against some validation rules.
Let's say you have a <a href="/inputs#Text%20Input" title="Text Input">Text Input</a> where you ask user's email with the following settings 
- Data Key: <code>userEmail</code> 
- Label: <code>Enter your email address</code> 
and a <a href="/elements#Button" title="Button">Button</a> component that triggers a "send email" action. But, we don't want to trigger the "send email" action unless user typed something into the Text Input and it's a valid email address. You can do the following to achieve that
<ol>
<li>Create a "Validate Data" action
<ol>
<li>Name: <code>validate email</code></li>
<li>Validation Rules 1 - Data Key: <code>userEmail</code></li>
<li>Validation Rules 1 - Rule: <code>required</code></li>
<li>Validation Rules 2 - Data Key: <code>userEmail</code></li>
<li>Validation Rules 2 - Rule: <code>email</code></li>
</ol>
</li>
<li>Create a "Chain" action
<ol>
<li>Name: <code>validate and send email</code></li>
<li>First Chained Action: <code>validate email</code></li>
<li>Second Chained Action: <code>send email</code>(create a dummy action for this one to test)</li>
</ol>
</li>
<li>Update Button's Action to <code>validate and send email</code></li>
</ol>
Now, click Preview to test our change
<ul>
<li>Click on the button. You should see "This field is required" error next to the Text Input component.</li>
<li>Then, try typing "test" into the Text Input and click on the button again. This time, you should see "Invalid email address"</li>
<li>Type a valid email and try again, this time it should work</li>
</ul>
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/actions-validation-email.png" width="300">
When validation fails for a data key of an input component, its error will be shown automatically under the input component. But, you can always access the error for a data key using <code>{{dataKey_error}}</code> syntax. So, if your data key is <code>testResult</code>, its error will be stored at <code>testResult_error</code>. In addition to that, you can always use <code>{{global_last_error}}</code> to access the error of the last failed action

Learn how to build AI Apps and Chrome Extensions without code using Toolmark. Explore the Toolmark Editor and example projects to get started building your own AI tools today.

Getting Started

Learn about the core concepts of the Toolmark builder: Canvas, Component, Action, and Data Store. Understand how these elements interact to create dynamic and interactive AI apps.

Concepts

Learn the power of Toolmark's Data Binding feature. Effortlessly write and read data using input components, actions, and more for enhanced interactivity and user engagement.

Data Binding

Easily transform any AI tool created on Toolmark.ai into a Chrome Extension with no extra effort. Install the Toolmark.ai Chrome Extension, add your tools, and access them directly from any website for a seamless browsing and productivity boost.

Building Chrome Extensions

Learn the essentials of managing your tools with Toolmark's intuitive dashboard. Learn how to organize, access, and embed your tools for enhanced productivity and seamless integration.

Tool Management Basics

Learn how to seamlessly embed your tools directly onto your website to enhance user experience and expand your tool's reach. This guide provides step-by-step instructions for enabling embedding, whitelisting your site, and securely integrating your tool's functionality within your web pages.

Embedding Tools to Your Website

Gain valuable insights into your tool's performance with detailed metrics on action duration, frequency, and type.

Tool Analytics

Learn about the Toolmark Editor interface with this comprehensive guide. Discover how to use the Canvas, Left Menu, Right Menu, and Top Menu to build and customize your tools effectively. Perfect for both beginners and experienced users.

Toolmark Editor

editor

Discover the power of the Canvas with its drag-and-drop interface for an intuitive design experience. Learn how to select, customize, and manage UI components like buttons and input fields for your tool's layout.

Canvas

Learn how to use Toolmark's Component Menu for easy drag-and-drop of Containers, Elements, Inputs, and AI Inputs into the canvas, enhancing your tool-building process with customization and efficiency.

Component Menu

Optimize and manage your tool's components with ease using Toolmark's Layer Menu. This feature allows for streamlined visibility control, effortless reordering, and simple renaming of components, enhancing your design process and organization.

Layer Menu

Discover how to enhance your projects with dynamic interactions using the Actions Menu. Learn to create prompt and integration actions for data fetching, AI content generation, and more.

Action Menu

Effortlessly manage and debug your interactive tools with Toolmark's Data Store Menu. Seamlessly add static data to components, enhancing tool functionality and user experience. Ideal for developers seeking efficient state management and debugging solutions.

Data Store Menu

Learn how to use Toolmark's Style Menu to customize and design your tool. Drag and drop components, access functionalities, and explore styling options to create the perfect AI tool for your needs.

Style Menu

Master Toolmark's Tool Config Menu: Easily set up subdomains, titles, descriptions, categories, and cover images to optimize and personalize your tools for better engagement and visibility.

Tool Config Menu

Dive into the essentials of using the Component Settings Menu in Toolmark with our detailed guide. Learn how to effortlessly customize UI components to align with your brand, enhance user experience, and elevate your tool's design.

Component Settings Menu

Enhance your text components with the Bubble Menu, offering customization options like headings, code blocks, links, and text formatting. Utilize markdown for quick edits.

Bubble Menu

Learn Toolmark's Top Menu and how to efficiently use the Back, Undo/Redo, Preview, Save, Publish, and tool naming features to streamline your design process, ensuring a seamless and productive tool creation experience.

Top Menu

Explore Toolmark Editor's Components: Dive into using Containers, Elements, Inputs, and AI Inputs for crafting interactive, visually stunning tools with ease. Perfect your tool-building with our drag-and-drop interface.

Components

components

Organize UI components effectively with containers. Control layout with color, display (flex or grid), alignment, gap, size, and more. Create dynamic interfaces using repeated containers, tabs, and collapsible sections for enhanced user experience.

Containers

Master the art of document design with our comprehensive guide to elements. Learn how to use text, links, buttons, images, dividers, and HTML to create visually engaging and interactive content.

Elements

Learn about common settings, types of inputs including Text, Multiline, List, Editor, Select, Multi Select, Radio Group, Checkbox, Toggle, and Range Inputs, and best practices for enhancing user interaction and data collection.

Inputs

Enhance your productivity with AI Inputs, a powerful tool that integrates AI capabilities into your workflow. Easily add AI actions to your inputs, enabling auto-completion, content generation, and intelligent suggestions.

AI Inputs

Supercharge your Toolmark AI tools with the Advanced Editor Input. This Notion-style component offers customizable toolbars, AI-powered actions for text generation and automation, and user-defined prompts for a personalized writing experience.

Advanced Editor Input

Customize UI components with ease! Learn about common settings like margin, padding, shadow, click/load actions, and conditional visibility to create dynamic and engaging user interfaces.

Common Settings

Learn how to use Actions in Toolmark to generate AI content, fetch external data, and interact with web pages.

Actions

actions

Explore the comprehensive guide to AI Prompts in Toolmark. Learn how to create, chain, and use AI Prompts with various models for dynamic and interactive note-taking. Understand how to leverage variables, output types, and Replicate models for enhanced productivity.

AI Prompt Actions

Connect your projects to external platforms & services with Integration Actions. Fetch data via API calls, interact with Airtable & Zapier, scrape websites, send emails, and more. Streamline workflows with powerful integrations.

Integration Actions

Interact with web pages directly from your Chrome Extension using Toolmark Editor. Learn how to read data, update fields, and trigger actions on any website without coding. Install the Toolmark AI Chrome Extension and boost your productivity.

Chrome Extension Actions

Explore a variety of Toolmark examples to enhance your AI App building experience. Discover tips, tricks, and templates to boost productivity and organization. Perfect for users at any level!

Examples

examples

Learn to build a City Guide Creator with AI using Toolmark's no-code platform. This step-by-step guide covers creating static pages, adding inputs, using AI prompts with GPT and DALL-E, generating images, and working with lists. See a demo and build your own AI-powered city guide today!

Step-by-step City Guide

Generate delicious recipes instantly! Enter your ingredients and preferred cooking style (one-pot, grill, deep-fry), and our AI-powered recipe generator will create a custom dish just for you. Try it now and learn how to build your own AI tools!

Recipe Generator

Learn how to create a Chrome extension that summarizes web page content using GPT-4. This tutorial covers creating actions to read and summarize text, designing UI components, and publishing your extension. Install the Toolmark Chrome Extension and start summarizing!

Content Summarizer Chrome Extension

Build a custom cover letter with AI! This tool uses your resume, job description, and preferred tone (confident, friendly, etc.) to generate a tailored cover letter instantly. Includes example resume and job details to get you started.

Cover Letter Writer

Learn how to build an AI-powered Course Slide Summary and Quiz Generator using Toolmark. This tutorial provides a step-by-step guide to creating a tool that takes course slide PDFs, generates summaries and quizzes using GPT, and displays them interactively with various UI components. Enhance your learning materials and create engaging quizzes effortlessly. No coding required!

Course Slide Summary and Quiz Generator

Generate landing pages instantly with AI! This tool creates headlines, copy, feature lists, and images based on your product description. Learn how to build your own landing page generator using chained AI actions and more. See a demo and start creating today!

Landing Page Builder

Learn how to build a no-code language translator app with Toolmark. This guide covers adding text input, language selection, using GPT-4 for translation, and displaying the results. See a demo and get started building your own AI tools today!