Building an AI Drafting Assistant: A VIBE Tutorial

Extension note: This tutorial requires the Assistant extension and configured LLM endpoints.

Welcome to the tutorial on creating AI-powered drafting assistants in VIBE! This guide assumes you have completed the main interactive-tutorial.md and are familiar with basic VIBE concepts like questions, config.yml, and Jinja templating.

Where the main tutorial focused on a "form-filling" paradigm, this guide will introduce you to VIBE's "conversational" paradigm. You will learn how to embed a Large Language Model (LLM) directly into your template, starting with simple suggestions and building up to a fully conversational interview.

By the end, you will have hands-on experience with:

  • Getting AI suggestions for single fields (type: assisted).
  • Creating a section-drafting assistant with the {% assistant %} block.
  • Providing the assistant with context from other questions.
  • Giving the assistant "tools" by defining structured questions it can ask.
  • Enabling a fully conversational interview_mode.

Before You Start: Your Project Folder

  1. Create a new folder on your computer. Let's call it rfi-assistant-tutorial.
  2. Inside that folder, create two empty files: config.yml and template.md.
  3. As we go through the tutorial, you will add the provided code snippets to these files.

Iteration 1: AI-Assisted Answers

Concept: The simplest way to use AI. We'll add a button to a text field that asks an AI to suggest a creative project codename.

Features: assisted question type.

Step 1: Define the Questions

We need a question to get the project type, which we'll use to give the AI context. Then, we'll define our assisted question.

# In config.yml

title: RFI Assistant Tutorial

questions:
  project_type:
    type: select
    label: "What type of project is this?"
    options:
      - "Internal tool"
      - "Client-facing website"
      - "Mobile application"

  project_codename:
    type: assisted
    label: "Project Codename"
    prompt: |
      Suggest a cool, one-word project codename for a new {{ project_type }}.
      The codename should be evocative and professional.
      Just output the name itself, with no extra text.

Step 2: Use the Variable in the Template

Now, let's use the codename in the document.

# In template.md

# Request for Information: Project "{{ project_codename }}"

Step 3: See It Work!

Make sure your rfi-assistant-tutorial folder is added to the TEMPLATE_SOURCES list in the main VIBE config.yml.

  1. Validate and Run: 

    python app.py validate rfi-assistant-tutorial
python app.py run

  2. Start the Interview: Open your browser to http://127.0.0.1:5001/ and select the "RFI Assistant Tutorial" template.

First, select a project type. You will then see the "Project Codename" field with a ✨ Suggest button. Click it. The AI will generate a suggestion based on your selected project type and fill it into the field.

Iteration 2: Your First Section-Drafting Assistant

Concept: Now let's move from assisting with a single field to drafting an entire document section. We'll create an assistant to draft a project scope.

Features: assistants block in config.yml, {% assistant %} block tag.

Step 1: Configure the Assistant

First, we need to define our assistant's identity in config.yml.

# In config.yml

title: RFI Assistant Tutorial

# Define the assistant
assistants:
  scope_drafter: # This is a unique ID for your assistant
    label: "AI: Project Scope"
    # We'll use the default model configured by the system administrator

questions:
  # ... (keep the questions from Iteration 1) ...

Step 2: Place the Assistant in the Template

Next, we tell VIBE where the AI-generated text should go. The content inside the {% assistant %} block is the initial prompt that gets sent to the LLM.

# In template.md

# Request for Information: Project "{{ project_codename }}"

## 1. Introduction

This document outlines the scope of work for the upcoming project, a new {{ project_type }}.

## 2. Detailed Project Scope

{% assistant 'scope_drafter' %}
You are a project management expert.
Your task is to draft a detailed "Project Scope" section for a Request for Information (RFI).
Start by writing a brief, one-paragraph overview of a generic software development project.
Then, state that you will ask clarifying questions to add more detail.
{% endassistant %}

Step 3: See It Work!

Run the interview again. This time, after you answer the initial questions, a new tab labeled "AI: Project Scope" will appear in the preview panel. Click it. The AI will receive its prompt and begin streaming its response into a drafting window. For now, it's separate from the main form, acting as an optional, powerful tool for this specific section.

Iteration 3: Providing the Assistant with Context

Concept: An assistant is most powerful when it has context. Let's feed the answers from our first questions directly into the assistant's prompt.

Features: Using Jinja variables {{...}} inside the {% assistant %} block.

Step 1: Update the Assistant's Prompt

Modify your template.md to include the variables. VIBE is smart enough to know it must ask these questions before activating the assistant.

# In template.md (update the assistant block)

...
## 2. Detailed Project Scope

{% assistant 'scope_drafter' %}
You are a project management expert.
Your task is to draft a detailed "Project Scope" section for a Request for Information (RFI).

The user has provided the following initial context:
- **Project Codename:** {{ project_codename }}
- **Project Type:** {{ project_type }}

Based on this, write a one-paragraph summary of the project's scope.
Then, state that you will ask clarifying questions to build out detailed subsections for "In Scope," "Out of Scope," and "Deliverables."
{% endassistant %}
...

Step 2: See the Difference!

Run the interview again.

  1. Fill out the project_type and project_codename questions.
  2. Activate the "AI: Project Scope" tab.
  3. The assistant's initial draft will now be tailored to the specific project you described, because your answers were injected directly into its prompt.

Iteration 4: Giving the Assistant "Tools"

Concept: You can dramatically improve the user experience by giving the assistant predefined, structured questions to use as "tools".

Features: Assistant using questions from the main questions: block.

Step 1: Define "Tool" Questions

Let's anticipate that the assistant will need to know about key project constraints.

# In config.yml (add to your questions block)

questions:
  # ... (project_type and project_codename from before) ...

  # New "tool" question for the assistant to use
  timeline_constraint:
    type: radio
    label: What is the timeline constraint?
    options:
      - "Strict deadline, cannot be moved"
      - "Flexible, but with a target date"
      - "No firm deadline"

Step 2: Interact with the Assistant

You do not need to change template.md. The assistant automatically discovers and uses any question defined in your config.yml.

Run the interview and activate the assistant. Once it has written its initial summary, give it a new instruction in the chat box, like:

"Now, ask me about the project timeline."

The assistant will recognize this topic and trigger the timeline_constraint radio button question you defined, right in the chat interface.

Iteration 5: The Full Conversational Experience

Concept: For templates that are primarily driven by the assistant, you can make the chat the main event, getting rid of the initial form altogether.

Features: interview_mode: assistant

Step 1: Change the Interview Mode

This is a single, powerful switch in your configuration.

# In config.yml

interview_mode: assistant # This is the key change!

title: RFI Assistant Tutorial

assistants:
  scope_drafter:
    label: "AI: Project Scope"

questions:
  # ... (all your questions from before) ...

Step 2: See the New Workflow!

Run the interview one last time. The experience is now completely different:

  1. The application loads directly into the chat interface.
  2. The assistant starts the conversation by asking the first question it needs for its prompt (project_type).
  3. As you answer each question conversationally, the next one appears.
  4. Once all the context questions are answered, the assistant receives its prompt and begins drafting, just as before.

This mode is perfect for templates where the primary value is the collaborative drafting process, creating a seamless, conversational flow for the end-user.

Conclusion

Congratulations! You have now learned how to integrate AI into your VIBE templates at every level.

You've seen how to provide simple suggestions, create powerful section-drafting assistants, and build fully conversational user experiences. This opens up a whole new world of possibilities for creating "living documents" that go far beyond simple templates.