Auto-generated blocks workflow (example guide)

blocks/create-blocks-tutorial.mdx

@@ -0,0 +1,213 @@
+---
+title: "How to create a blocks workflow with Vapi"
+sidebarTitle: "Tutorial"
+description: "Example walkthrough of building a Blocks workflow"
+---
+
+<iframe src='/static/images/blocks/recording_20241018_191621.webm' title="Example walkthrough of creating a block" width='560' height='315' frameborder="0" allowfullscreen   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+></iframe>
+
+## Introduction
+
+Vapi is a powerful platform that enables both developers and non-technical users to create conversational workflows seamlessly. By leveraging the **Blocks Workflow** feature, you can design complex conversations with conditional logic, tool integrations, and more.
+
+In this tutorial, we'll guide you through the process of creating a blocks workflow to **book a demo with Quantstruct**. This workflow will include two paths:
+
+- **Scheduling a future time** for the demo.
+- **Qualifying the prospect** before scheduling a demo.
+
+We'll cover key concepts, provide step-by-step instructions, and include visual aids to enhance your understanding.
+
+---
+
+## Table of Contents
+
+- [Prerequisites](#prerequisites)
+- [Key Concepts](#key-concepts)
+- [Step 1: Access the Vapi Dashboard](#step-1-access-the-vapi-dashboard)
+- [Step 2: Navigate to the Blocks Section](#step-2-navigate-to-the-blocks-section)
+- [Step 3: Create a New Blocks Workflow](#step-3-create-a-new-blocks-workflow)
+- [Step 4: Name Your Workflow](#step-4-name-your-workflow)
+- [Step 5: Configure the Start Block](#step-5-configure-the-start-block)
+- [Step 6: Add Flow Controls](#step-6-add-flow-controls)
+- [Step 7: Add the Schedule Demo Block](#step-7-add-the-schedule-demo-block)
+- [Step 8: Insert Variables](#step-8-insert-variables)
+- [Step 9: Save and Create the Workflow](#step-9-save-and-create-the-workflow)
+- [Conclusion](#conclusion)
+
+---
+
+## Prerequisites
+
+- An active **Vapi** account.
+- Basic understanding of conversational workflows.
+- Access to the **Quantstruct** demo scheduling process (for context).
+
+---
+
+## Key Concepts
+
+- **Blocks Workflow**: A visual interface for designing conversational flows using blocks that represent different actions or messages.
+- **Start Block**: The entry point of your workflow where the conversation begins.
+- **Flow Controls**: Elements that allow you to manage the conversation flow based on user responses (e.g., conditions, loops).
+- **Tool Call Block**: A block used to integrate external tools or services, such as scheduling a demo.
+- **Variables**: Placeholders used to personalize messages by inserting dynamic content.
+
+---
+
+## Step 1: Access the Vapi Dashboard
+
+Log in to your Vapi account to access the dashboard.
+
+---
+
+## Step 2: Navigate to the Blocks Section
+
+On the left-hand menu, click on **"Blocks"** to view existing workflows or create a new one.
+![Click on Blocks Section](/static/images/blocks/screenshots_run_20241018_191537/clicking_on_blocks.png)
+
+---
+
+## Step 3: Create a New Blocks Workflow
+
+Click on **"New Blocks Workflow"** to start creating a new workflow.
+
+![Clicking on New Blocks Workflow](/static/images/blocks/screenshots_run_20241018_191537/clicking_on_new_blocks_workflow.png)
+
+---
+
+## Step 4: Name Your Workflow
+
+Provide a descriptive name for your workflow, such as **"Schedule Demo Quantstruct"**.
+
+![Entering Workflow Name](/static/images/blocks/screenshots_run_20241018_191537/entering_workflow_name_schedule_demo_quantstruct.png)
+
+Click on **"Create Workflow"** to proceed.
+
+![Clicking on Create Workflow](/static/images/blocks/screenshots_run_20241018_191537/clicking_on_create_workflow.png)
+
+---
+
+## Step 5: Configure the Start Block
+
+The **Start Block** is where the conversation begins.
+
+1. Click on the **Start Block** to open the configuration panel.
+
+   ![Clicking on Step Config Inside Start Block](/static/images/blocks/screenshots_run_20241018_191537/clicking_on_step_config_inside_start_block.png)
+
+2. In the **Text Area**, replace the default message with a greeting and an opening question:
+
+   ```
+   Hello! Are you interested in scheduling a demo with Quantstruct?
+   ```
+
+   ![Replace Text Inside Start Block](/static/images/blocks/screenshots_run_20241018_191537/replace_text_inside_start_block_with_prompt_for_good_time_to_talk.png)
+
+3. Click **"Save"** to save the changes to the Start Block.
+
+   ![Clicking on Save Inside Step Config Start Block](/static/images/blocks/screenshots_run_20241018_191537/clicking_on_save_inside_step_config_start_block.png)
+
+---
+
+## Step 6: Add Flow Controls
+
+Flow controls allow the conversation to branch based on user input.
+
+1. Click on the **"Flow Controls"** button in the toolbar.
+
+   ![Click Flow Controls Button](/static/images/blocks/screenshots_run_20241018_191537/click_flow_controls_button.png)
+
+2. Select the appropriate flow control (e.g., **"Condition"**) and drag it onto the canvas.
+
+3. Configure the condition to check the user's response (e.g., if the user says "Yes").
+
+4. Repeat the process to handle different responses as needed.
+
+   ![Click Flow Controls Button Again](/static/images/blocks/screenshots_run_20241018_191537/click_flow_controls_button_again.png)
+
+---
+
+## Step 7: Add the Schedule Demo Block
+
+Add a **Tool Call Block** that will handle the demo scheduling.
+
+1. Click on the **"Blocks"** button and select **"Tool Call Block"**.
+
+2. Drag the **Tool Call Block** onto the canvas and connect it to the appropriate flow control branch.
+
+3. Click on the **Tool Call Block** to configure it.
+
+   ![Clicking on Block Config](/static/images/blocks/screenshots_run_20241018_191537/clicking_on_block_config.png)
+
+4. In the configuration panel, enter the prompt:
+
+   ```
+   Great! Let's schedule your demo. When is a good time for you?
+   ```
+
+   ![Enter Prompt Inside Schedule Demo Time Block Config](/static/images/blocks/screenshots_run_20241018_191537/enter_prompt_inside_schedule_demo_time_block_config.png)
+
+5. Click **"Save"** to save the configuration.
+
+   ![Click Save Inside Tool Call Block Config](/static/images/blocks/screenshots_run_20241018_191537/click_save_inside_tool_call_block_config.png)
+
+---
+
+## Step 8: Insert Variables
+
+Variables personalize the conversation by using dynamic content.
+
+1. In the message text area, click on the **"Insert Variable"** button.
+
+2. Select **"DateTime"** or the appropriate scheduling variable.
+
+   ![Insert Date Time Schedule Variable](/static/images/blocks/screenshots_run_20241018_191537/insert_date_time_schedule_variable.png)
+
+3. The variable placeholder will appear in your message, like `{{schedule_time}}`.
+
+   ![Replace Text Inside Textarea with New Text](/static/images/blocks/screenshots_run_20241018_191537/replace_text_inside_textarea_with_new_text.png)
+
+4. Click **"Save"** to apply the changes.
+
+---
+
+## Step 9: Save and Create the Workflow
+
+1. After configuring all blocks and flow controls, ensure all connections are properly linked.
+
+2. Click on **"Save"** in the top-right corner to save the workflow.
+
+   ![Clicking on Save Inside Conversation Block Config](/static/images/blocks/screenshots_run_20241018_191537/clicking_on_save_inside_conversation_block_config.png)
+
+3. Click on **"Create Workflow"** to finalize.
+
+   ![Clicking on Create Workflow](/static/images/blocks/screenshots_run_20241018_191537/clicking_on_create_workflow.png)
+
+4. Your workflow is now created and ready to be tested.
+
+   ![Clicking on Schedule Demo Quantstruct](/static/images/blocks/screenshots_run_20241018_191537/clicking_on_schedule_demo_quantstruct.png)
+
+---
+
+## Conclusion
+
+You've successfully created a **Blocks Workflow** on the Vapi platform to schedule demos with Quantstruct. This workflow:
+
+- Greets the user and inquires about their interest.
+- Uses flow controls to handle different responses.
+- Integrates a tool to schedule demos.
+- Personalizes messages with variables.
+
+Feel free to expand on this workflow by adding more steps, integrating additional tools, or refining the conversation logic.
+
+---
+
+## Additional Resources
+
+- **Vapi Documentation**: [Visit the official docs](https://vapi.example.com/docs) for more in-depth information.
+- **Support**: For assistance, contact [[email protected]](mailto:[email protected]).
+
+---
+
+**Note**: While this guide focuses on creating workflows using the Vapi platform's visual interface, Vapi also offers an API for programmatic workflow creation and management. Refer to the official Vapi API documentation for details on how to leverage the API in your development projects.

mint.json

@@ -188,7 +188,8 @@
           "pages": [
             "blocks",
             "blocks/steps",
-            "blocks/block-types"
+            "blocks/block-types",
+            "blocks/create-blocks-tutorial"
           ]
         },
         {