<p>AI Prompt actions can be used with any AI Input Component or Button Component. You can chain any action, which means you can run AI Prompts one after another and also use the data returned from one action by the other actions in the chain.</p>
<p>While creating prompts, you need to provide the following information</p>
<ul>
<li><strong>Model:</strong> AI model that will be used to execute the prompt. There are various models you can choose from</li>
<li><strong>Name:</strong> This is the name of the prompt action. When you are assigning actions to components, you'll need to select the action by its name. So, make sure you use a descriptive name</li>
<li><strong>Result Data Key:</strong> When action is executed, its result will be stored in this data key in the data store. You'll need this to access the generated text or image by the AI action.</li>
</ul>
<p>If you selected GPT, DALL-E, or Gemini model</p>
<ul>
<li><strong>Prompt:</strong> This is the prompt that will be run when user triggers an action that uses it.</li>
<li><strong>Output Type:</strong> What output type your model and prompt should return.
<ul>
<li>If you are using a text model, you can choose a text or a list</li>
<li>If you are using an image model, you can choose one from various dimensions</li>
</ul>
</li>
</ul>
<p>If you are using Replicate model</p>
<ul>
<li><strong>Model Owner/Name:VersionId:</strong> Go to the model you want to use on Replicate.com. At the top of the page you'll see Model Owner and name like <code>bytedance/sdxl-lightning-4step</code>. Then Go to the Versions tab and select a version like <code>727e49a643e999d602a896c774a0658ffefea21465756a6ce24b7ea4165eba6a</code>. Then combine all together like <code>bytedance/sdxl-lightning-4step:727e49a643e999d602a896c774a0658ffefea21465756a6ce24b7ea4165eba6a</code></li>
<li><strong>Input:</strong> Each replicate model requires a different input, but most require at least <code>prompt</code>.
<ul>
<li>You can see the input specs for each model on replicate.com: <a href="https://replicate.com/bytedance/sdxl-lightning-4step/api">https://replicate.com/bytedance/sdxl-lightning-4step/api</a></li>
<li>Provide input as a JSON object.</li>
<li>You can skip the fields if you want to use its default value</li>
<li>You can use variables in your JSON Object like below. <code>inputPrompt</code> is a data key. Also note the quotes around <code>{{inputPrompt}}</code>. When <code>{{inputPrompt}}</code> is replaced with the actual value, we want to make sure it's in quotes and it's still a valid JSON.</li>
</ul>
</li>
</ul>
<pre><code>	  {
		  "prompt": "{{inputPrompt}}",
		  "width": 2048,
		  "height": 2048
	  }
</code></pre>
<p>Let's explore some AI Prompts you can define and how they behave</p>
<h2 id="prompt-types"><a aria-hidden="true" tabindex="-1" href="#prompt-types"><span class="icon icon-link"></span></a>Prompt Types</h2>
<h3 id="static-prompts"><a aria-hidden="true" tabindex="-1" href="#static-prompts"><span class="icon icon-link"></span></a>Static Prompts</h3>
<p>These prompts are just plain text, so nothing dynamic. They are rarely useful. For example,</p>
<div><blockquote class="blockquote">
<p>You are a blog post writer. Suggest a topic about productivity.</p>
</blockquote></div>
<h3 id="prompts-with-variables"><a aria-hidden="true" tabindex="-1" href="#prompts-with-variables"><span class="icon icon-link"></span></a>Prompts with Variables</h3>
<p>This is where the fun begins. You don't want to get a topic about productivity every time AI action is run. You can add an input field for user to enter a couple of words and you can use whatever is entered to the input field in your prompt.</p>
<p>Let's say input field's Data Key attribute is set to <code>seedWord</code>. You can define a prompt like</p>
<div><blockquote class="blockquote">
<p>You are a blog post writer. Suggest a topic about <strong>{{seedWord}}</strong></p>
</blockquote></div>
<p>or if you have other input fields</p>
<div><blockquote class="blockquote">
<p>You are a blog post writer. Suggest a topic about <strong>{{seedWord}}</strong>. You write using a <strong>{{tone}}</strong> tone in <strong>{{language}}</strong>.</p>
</blockquote></div>
<p>or if you are using an image model</p>
<div><blockquote class="blockquote">
<p>Draw an image of <strong>{{cityInput}}</strong></p>
</blockquote></div>
<h3 id="text-prompts-with-list-output-type"><a aria-hidden="true" tabindex="-1" href="#text-prompts-with-list-output-type"><span class="icon icon-link"></span></a>Text Prompts with List Output Type</h3>
<p>Previous prompts will just return a single text. Even if you change the prompt to "Suggest 3 topics", it would still return a single text with 3 topics in it and you wouldn't be able to use the suggested topics one by one in your tool.<br>
So the result would be something like:</p>
<pre><code>result:
- topic1
- topic2
- topic3
</code></pre>
<p>Now let's use <code>Output Type: List</code> while creating our prompt, and try "Suggest 3 topics" prompt again. You'll still get 3 topics, but this time they'll be stored differently</p>
<pre><code>result[0]: topic1
result[1]: topic2
result[2]: topic3
</code></pre>
<p>Now, in your tool, you can access individual topics. This is pretty powerful when used with <a href="/containers#Repeated%20Container" title="Repeated Container component">Repeated Container component</a>.</p>
<h3 id="text-prompts-with-list-variable"><a aria-hidden="true" tabindex="-1" href="#text-prompts-with-list-variable"><span class="icon icon-link"></span></a>Text Prompts with List Variable</h3>
<p>Now, let's explore a different use case. You have name of 3 countries provided by user. They're stored as a list (as you used <a href="/inputs#Text%20List%20Input" title="Text List Input">Text List Input</a> or <a href="/inputs#Multi%20Select%20Input" title="Multi Select Input">Multi Select Input</a> component while designing your tool whose data key is <code>countryList</code>). Now you want to ask AI to write capital city of the each country.</p>
<p>Let's try using a prompt like <code>Write the capital of {{countryList}}</code> where countryList is <code>["France", "Germany", "Spain"]</code>. Your prompt will become:</p>
<div><blockquote class="blockquote">
<p>Write the capital of France, Germany, Spain</p>
</blockquote></div>
<p>you'll get an output like</p>
<pre><code>capitalList:
Paris, Berlin, Madrid
</code></pre>
<p>In your tool, you cannot access individual capital cities as it is a single text.</p>
<p>We need to make some changes to fix this issue</p>
<ol>
<li>Change your AI prompt action with
<ol>
<li>Prompt: <code>Write the capital of {{countryList[i]}}</code>, note the <code>[i]</code> in the prompt, you're telling AI Assistant that countryList is actually a list type</li>
<li>Result Data Key: <code>capitalList[i]</code></li>
</ol>
</li>
<li>Create a new <a href="/integration-actions#Repeating%20an%20Action" title="Repeated Action">Repeated Action</a>
<ol>
<li>Repeated Action: AI action you created earlier</li>
<li>Repeat Count: <code>{{countryList.length}}</code></li>
</ol>
</li>
</ol>
<p>When you use this new action, it will run the AI prompt 3 times:</p>
<div><blockquote class="blockquote">
<p>Write the capital of France<br>
Write the capital of Germany<br>
Write the capital of Spain</p>
</blockquote></div>
<p>and your output will be like (given action's <code>Result Data Key</code> is <code>capitalList[i]</code>)</p>
<pre><code>capitalList[0]: Paris
capitalList[1]: Berlin
capitalList[2]: Madrid
</code></pre>
<p>(see <a href="/integration-actions#Repeating%20an%20Action" title="Repeated Action">Repeated Action</a> to better understand how it works)</p>
<p>Now you can access to the individual values. If you use a <a href="/containers#Repeated%20Container" title="Repeated Container">Repeated Container</a>, you can show them like</p>
<pre><code>France -> Paris
Germany -> Berlin
Spain -> Madrid
</code></pre>
<p>by using this in your Text component within a Repeated Container</p>
<pre><code>{{countryList[i]}} -> {{capitalList[i]}}
</code></pre>
<h3 id="text-prompts-with-image-input"><a aria-hidden="true" tabindex="-1" href="#text-prompts-with-image-input"><span class="icon icon-link"></span></a>Text Prompts with Image Input</h3>
<p>Some models allow you to input an image alongside a text prompt, enhancing the interaction. This process is similar to using any text model, but you'll notice an additional field labeled "Image URL" in the form. For instance, when you choose "GPT 4o with Image Input" for your AI Action, this feature becomes available.<br>
You can either provide a static link like <code>https://...</code> or you can read the image URL dynamically from your data keys (e.g. <a href="/inputs#File%20Upload%20Input" title="File Upload Input">File Upload Input</a>)</p>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/ai-prompts-with-image.png" priority="1" width="300"></p>
<h2 id="chaining-prompts"><a aria-hidden="true" tabindex="-1" href="#chaining-prompts"><span class="icon icon-link"></span></a>Chaining Prompts</h2>
<p>As you can chain any actions, you can chain any AI Prompt action too. All you need to do is</p>
<ol>
<li>Create a new Action using the Action Menu</li>
<li>Select "Chain" type</li>
<li>Add and select multiple actions which will be executed serially<br>
When you use a chained action in a button component, it will execute the actions defined in the chained action one by one</li>
</ol>

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!