<p>In this example, we will build a tailored cover letter writer. User will provide their resume info and the job details they’re applying for. They can also select a tone. Once they click the button, AI Assistant will write a tailored cover letter for the given input.</p>
<p>You can also watch the step-by-step video</p>
<div class="aspect-video"><iframe src="https://www.youtube.com/embed/pWNP--73mU8" class="w-full h-full" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<p>Demo: <a href="https://coverletter.toolmark.app">https://coverletter.toolmark.app</a><br>
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/cover-letter-writer.png" priority="1"></p>
<ol>
<li>Add a Container component</li>
<li>Add a Text component, and change its text to <code>Cover Letter Writer</code>. Select the text you typed and make it a Heading 2</li>
<li>Add a Text Editor Input component into the container, and in the Settings Menu
<ol>
<li>set Data Key to <code>resumeInput</code></li>
<li>set Label to <code>Your Resume</code></li>
<li>set Placeholder to <code>Enter some information about you or paste your resume text here</code></li>
</ol>
</li>
<li>Add another Text Editor Input component into the container, and in the Settings Menu
<ol>
<li>set Data Key to <code>jobDetailsInput</code></li>
<li>set Label to <code>Job Details</code></li>
<li>set Placeholder to <code>Copy+Paste job details here</code></li>
</ol>
</li>
<li>Add a Select Input into the container, and in the Settings Menu
<ol>
<li>set Data Key to <code>toneInput</code></li>
<li>set Label to <code>Tone</code></li>
<li>set Placeholder to <code>Select a tone</code></li>
<li>Enable bulk mode, and copy+paste this to the Options section</li>
</ol>
</li>
</ol>
<pre><code>Confident
Friendly
Humble
Passionate
Optimistic
</code></pre>
<ol start="6">
<li>Open the Actions Menu from the Left Menu and create a prompt with the following information
<ul>
<li>Name: Cover Letter Writer</li>
<li>Prompt: You are a professional cover letter writer. You use a {{toneInput}} tone. For the given information about myself and job description, write a cover letter. My info: {{resumeInput}}. Job details: {{jobDetailsInput}}</li>
<li>Model: GPT4</li>
<li>Output: Text</li>
<li>Result Data Key: <code>coverLetter</code></li>
</ul>
</li>
<li>Add a Button component into the container
<ol>
<li>Click on its text and change it to <code>Write my cover letter</code></li>
<li>Add an AI Prompt action from the Settings Menu</li>
<li>Select the prompt you just created, Cover Letter Writer</li>
</ol>
</li>
<li>Add a new Container component to show the result</li>
<li>Add a Text component into the new container</li>
<li>Click on its text and change it to the following. Select the first line and make it a Heading 2</li>
</ol>
<pre><code>Generated Cover Letter
{{coverLetter}}
</code></pre>
<ol start="11">
<li>We don’t want to show the result container until AI Assistant starts writing something into <code>coverLetter</code>. So, select the new container and set “Hidden When” field to <code>!coverLetter</code>, which means “hide when there is no value in coverLetter variable”.</li>
</ol>
<p>Another option is to use an AI Text Editor Input component instead of Text component in the last steps and setting its Data Key to <code>coverLetter</code>. This way, AI Assistant will write the generated content into the AI Text Editor Input component instead of Text component, and user will be able to edit the generated cover letter directly in the text editor.</p>
<h2 id="example-data"><a aria-hidden="true" tabindex="-1" href="#example-data"><span class="icon icon-link"></span></a>Example Data</h2>
<h3 id="resume"><a aria-hidden="true" tabindex="-1" href="#resume"><span class="icon icon-link"></span></a>Resume</h3>
<pre><code>Samuel Rodriguez  
456 Anywhere Street, Pleasantville, CA  
(555) 123-4567  
samuelrodriguez@email.com

PROFESSIONAL OBJECTIVE
A results-oriented marketing professional with an MBA and 5 years of expertise in developing and managing successful marketing campaigns, along with specialized proficiency in Google Analytics and AdWords. Actively seeking the position of [Social Media Marketing Manager](https://www.indeed.com/q-social-media-marketing-manager-jobs.html?from=careerguide-autohyperlink-en-US) at XYZ Inc. to drive impactful digital marketing initiatives and offer strategic thought leadership.

SUMMARY OF EXPERTISE
- Demonstrated proficiency in leading PPC and SEO marketing strategies over three years.
- Successfully managed social media accounts for four businesses, contributing to yearly sales exceeding $500,000.
- Certified [Digital Marketer](https://www.indeed.com/q-digital-marketer-jobs.html?from=careerguide-autohyperlink-en-US) in 2016 from Udacity.
- Recognized with the Employee of the Year Award at ABC Company in 2018 and 2019.

PROFESSIONAL EXPERIENCE

Social Media Marketing Manager
ABC Company, Nashville, TN, 2017-2020
- Spearheaded the growth of a 15k Facebook following and a 20k Instagram following for a new startup, resulting in a 160% increase in leads.
- Crafted compelling calls-to-action (CTAs) for website and social media copy, driving a 60% surge in sales.
- Devised an Instagram strategy and collaborated with influencers, leading to $200,000 in net sales within three months.

Website Manager
123 Company, Austin, TX, 2014-2017
- Led a team in designing and developing a new mobile application.
- Conducted A/B testing on paid Facebook and Instagram campaigns, boosting conversion rates from 70% to 90%.
- Implemented an innovative SEO strategy, resulting in a 200% increase in organic website traffic in five months.

EDUCATION
University of Michigan, Ann Arbor, MI, 2006-2010
</code></pre>
<h3 id="job-details"><a aria-hidden="true" tabindex="-1" href="#job-details"><span class="icon icon-link"></span></a>Job Details</h3>
<pre><code>Job Title: Marketing Specialist
Company Name: Innovative Solutions Inc.
Location: Anytown, USA
Job Type: Full-Time

About Us: Innovative Solutions Inc. is a dynamic and forward-thinking company specializing in cutting-edge technologies. We pride ourselves on fostering a collaborative and innovative work environment that encourages professional growth and creativity.

Job Description: We are seeking a highly motivated and creative Marketing Specialist to join our dynamic team. The ideal candidate will have a passion for marketing, a strong grasp of current trends, and the ability to develop and execute effective marketing strategies.

Responsibilities:
- Develop and implement comprehensive marketing plans to increase brand visibility and drive lead generation.
- Create engaging and compelling content for various marketing channels, including social media, email campaigns, and website.
- Conduct market research to identify trends, competitive landscape, and opportunities for growth.
- Collaborate with cross-functional teams to ensure consistent messaging and brand alignment.
- Monitor and analyze the performance of marketing campaigns, providing insights and recommendations for improvement.
- Manage relationships with external vendors, agencies, and partners to support marketing initiatives.
- Stay abreast of industry trends and best practices to continually optimize marketing efforts.

Qualifications:
- Bachelor's degree in Marketing, Business, or related field.
- Proven experience in developing and executing successful marketing campaigns.
- Strong written and verbal communication skills.
- Proficiency in digital marketing tools and platforms.
- Ability to think creatively and strategically.
- Excellent organizational and project management skills.
- Familiarity with analytics tools to measure campaign performance.

Benefits:
- Competitive salary
- Health, dental, and vision insurance
- 401(k) retirement plan
- Professional development opportunities
- Flexible work schedule
</code></pre>

Getting Started

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.

How-to Use the Chrome Extension

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

Step-by-step City Guide

Recipe Generator

Cover Letter Writer

Course Slide Summary and Quiz Generator

Landing Page Builder

Language Translator

Discover the Toolmark Editor, your ultimate tool creation workspace featuring an intuitive interface with Canvas, Left, Right, and Top Menus for seamless design. Perfect for professionals and beginners alike, it simplifies building and customizing tools with drag-and-drop components, real-time previews, and easy publishing. Start crafting engaging tools today!

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

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 Prompts

Chrome Extension Actions

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

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.