Skip to content

3.5 Convert Prompty To Code

FINAL STEP: How can we convert the asset into a code executable?

1. Get chat-3.prompty (final)

Our goal was to build up to the Contoso Chat application. Let's see how close we came by copying over the final version of the prompty asset and data files from our staged area.

  1. Get the final chat.prompty asset:

    1
    cp ../docs/workshop/src/1-build/chat-3.prompty .

  2. Get the final chat.json data:

    1
    cp ../docs/workshop/src/1-build/chat-3.json .

2. Explore Final Updates

  1. Open the chat-3.json file in your Visual Studio Code editor. The sample data now has a documentation section that represents a product item.

    1
2
3
4
5
6
7
        "documentation": {
        "id": "1",
        "title": "Alpine Explorer Tent",
        "name": "Alpine Explorer Tent",
        "content": "Welcome to the joy of camping with the Alpine Explorer Tent! This robust, 8-person, 3-season marvel is from the responsible hands of the AlpineGear brand. Promising an enviable setup that is as straightforward as counting sheep, your camping experience is transformed into a breezy pastime. Looking for privacy? The detachable divider provides separate spaces at a moment's notice. Love a tent that breathes? The numerous mesh windows and adjustable vents fend off any condensation dragon trying to dampen your adventure fun. The waterproof assurance keeps you worry-free during unexpected rain dances. With a built-in gear loft to stash away your outdoor essentials, the Alpine Explorer Tent emerges as a smooth balance of privacy, comfort, and convenience. Simply put, this tent isn't just a shelter - it's your second home in the heart of nature! Whether you're a seasoned camper or a nature-loving novice, this tent makes exploring the outdoors a joyous journey.",
        "description": "Welcome to the joy of camping with the Alpine Explorer Tent! This robust, 8-person, 3-season marvel is from the responsible hands of the AlpineGear brand. Promising an enviable setup that is as straightforward as counting sheep, your camping experience is transformed into a breezy pastime. Looking for privacy? The detachable divider provides separate spaces at a moment's notice. Love a tent that breathes? The numerous mesh windows and adjustable vents fend off any condensation dragon trying to dampen your adventure fun. The waterproof assurance keeps you worry-free during unexpected rain dances. With a built-in gear loft to stash away your outdoor essentials, the Alpine Explorer Tent emerges as a smooth balance of privacy, comfort, and convenience. Simply put, this tent isn't just a shelter - it's your second home in the heart of nature! Whether you're a seasoned camper or a nature-loving novice, this tent makes exploring the outdoors a joyous journey."
    },

  2. Open the chat-3.prompty file in your Visual Studio Code editor. The asset now defines a documentation input and uses it in the template as follows:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
        # Documentation
    The following documentation should be used in the response. The response should specifically include the product id.

    {% for item in documentation %}
    catalog: {{item.id}}
    item: {{item.title}}
    content: {{item.content}}
    {% endfor %}

    Make sure to reference any documentation used in the response.

  3. Run the chat-3.prompty to see the final response. Observe how the response now identifies the product item in conjunction with a prior customer purchase. This shows how our application grounds data in two different sources - customer history and product catalog.

    You should see a valid response (like this) in the Visual Studio Code terminal

    Hello John Smith! 😊 

To complement your **Alpine Explorer Tent**, I recommend the **Arctic Explorer Sleeping Bag**. This sleeping bag is designed for cold-weather camping, providing excellent insulation and comfort. It's perfect for those chilly nights under the stars, ensuring you stay warm and cozy while enjoying the great outdoors.

3. Convert To Code

We have a working prototype - in .prompty format. Let's convert this to code so we can orchestrate complex flows to integrate with data sources in real world contexts.

  1. Open the File Explorer pane in Visual Studio Code and find chat-3.prompty.

  2. Click to see the drop-down menu. Select "Add Code > Add Prompty Code".

    • This creates a new Python file chat-3.py and opens it in VS Code.
    • You may also see a prompty.json file created with model configuration information.

  3. Run the chat-3.py by clicking the play icon.

    The run will fail with this error. Don't worry - this is expected!

    ValueError: Variable AZURE_OPENAI_ENDPOINT not found in environment

This is because the code is missing a vital import. Let's fix that, next!

4. Update Default Code

We need to add code to load environment variables from .env before using them in code.`

  1. Add the three lines below to the top of chat-3.py:

    chat-3.py
    1
2
3
    ## Load environment variables
from dotenv import load_dotenv
load_dotenv()

  2. Run chat-3.py again. You should now see a valid response being generated.

    You may see error traces occasionally at the end of the run. You can ignore those for now.

    Prompty is currenty in preview and is actively being updated so expect these tools and features to keep evolving.

Cleanup your sandbox!

This completes the Ideation stage - don't forget to clean up the temporary sandbox we setup! You no longer need the sandbox/ folder so feel free to delete that from VS Code to keep the original app in focus.

CONGRATULATIONS. Your learned to go from prompt to prototype with IDEATION!