diff --git a/docs/framework/chat-assistant.mdx b/docs/framework/chat-assistant.mdx
index 687d5b943..e58608c22 100644
--- a/docs/framework/chat-assistant.mdx
+++ b/docs/framework/chat-assistant.mdx
@@ -2,9 +2,9 @@
title: "Chat assistant"
---
-In this tutorial, you will use Writer Framework to build an AI chat assistant.
+In this introductory tutorial, you will use Writer Framework to build an AI chat assistant.
-[IMAGE: Screenshot of finished project]
+
## Setting up your project
@@ -123,15 +123,15 @@ The `Conversation` method is a wrapper for the `chat` API endpoint and can be us
Click on the chatbot component to open up the Component Settings panel. Bind this chatbot to a conversation variable by adding `@{conversation}` in the Conversation Object property under General. This variable will reference the Writer AI SDK. You can also update properties such as the assistant's initials, the user's initials, and whether the chat uses markdown.
-
+
Finally, attach the handler to the chatbot. In the User Interface, click on the chatbot component to bring up the Component Settings panel. Scroll to the Events section towards the bottom of the pane and choose the `handle_simple_message` handler for the `wf-chatbot-message` event.
-
+
After saving and running your code, click the preview button and type something into your chat assistant. You should see the response appear on the screen as it comes back from the assistant. Congratulations!
-[IMAGE: Screenshot of finished project]
+
## Deploying the application
diff --git a/docs/framework/images/tutorial/chat-finished-app.png b/docs/framework/images/tutorial/chat-finished-app.png
new file mode 100644
index 000000000..c543351b9
Binary files /dev/null and b/docs/framework/images/tutorial/chat-finished-app.png differ
diff --git a/docs/framework/product-description-generator.mdx b/docs/framework/product-description-generator.mdx
index 8749d45ca..13c306246 100644
--- a/docs/framework/product-description-generator.mdx
+++ b/docs/framework/product-description-generator.mdx
@@ -1,7 +1,6 @@
---
title: "Product description generator"
---
-# Writer Framework tutorial: Product Description Generator
In this tutorial, you will use Writer Framework to build a Saturn Snacks product description generator for a variety of food outlets. After adding the initial functionality of the app, you will also extend the app to include a chart of SEO keyword analysis and the ability for users to add their own food outlet.
@@ -177,23 +176,23 @@ You can now set up the UI to iterate over the product descriptions dictionary an
Click on the Repeater component to open its component settings. Under Properties, add `@{product_descriptions.outlets}` as the Repeater object to be used for repeating the child components. Replace the default “Key variable name” with `itemID`. You can leave “Value variable name” as `item`.
-
+
Next, from the Layout section of the toolkit, drag a Tab component into the Repeater. Click on the Tab to bring up the component settings and add `@{itemID}` to the Name property. This will display the outlet name on the tab.
-
+
To display the resulting text from the call to the AI module, drag a Text component from the Content section of the Toolkit into the Tab. Click on the Text component to open the Component settings and set the Text property to `@{item}`. You may also choose to set “Use Markdown” to “yes.”
-
+
To control the visibility of the Tab Container, click on the Tab Container to bring up its component settings. Scroll to the bottom and, under Visibility, click “Custom” and add `product_descriptions.visible` to the Visibility value input.
-
+
Lastly, to wire up the form, click on the Generate button inside the form to bring up its component settings. In the Events section, select `handle_click` for the `wf-click` event.
-
+
Now, click Preview in the top toolbar, enter some test data, and click the Generate button. You should see a loading message, as well as three example food outlets displayed in the tabs. The loading message should disappear when everything is loaded, and the tab should remain visible once the data has loaded.
@@ -239,7 +238,7 @@ This code sets the loading message and passes all of the product descriptions to
To update the UI to display this chart, first drag a new tab from the Layout section of the toolkit into the Tab Container. This tab should not be inside of the Repeater, but can be either before or after it. Click on the tab to open the component settings, and change the name to “SEO Analysis.” If you'd like, you can also set the Visibility to “Custom” and set `seo_analysis` as the visibility value.
-
+
To display the chart, drag a Plotly Graph component from the Content section of the toolkit into your new Tab. Click on the component to bring up the component settings. The Plotly graph component accepts a graph specification. Add `@{seo_analysis}` to pass the LLM-generated graph specification to the component.
@@ -261,7 +260,7 @@ To create the inputs for the form, drag a Text Input and a Number Input from the
Finally, add a Button from the Other section of the toolkit to the bottom of the new section. Click on the button and change the text to “Add and Generate.” You can also add `laps` or another [Material Symbols](https://fonts.google.com/icons) ID to the Icon input if you wish.
-
+
### Updating the code
@@ -365,4 +364,4 @@ Once the application has been deployed, the CLI will return with the URL of your
## Conclusion
-You’ve now built a full application with Writer Framework and the Writer AI module. Congratulations! This setup not only demonstrates the platform's capabilities but also provides a foundation on which you can build more complex applications. To learn more, explore the rest of the Writer Framework documentation and the API documentation.
\ No newline at end of file
+You’ve now built a full application with Writer Framework and the Writer AI module. Congratulations! This application not only demonstrates the platform's capabilities but also provides a foundation on which you can build more complex applications. To learn more, explore the rest of the Writer Framework documentation and the API documentation.
\ No newline at end of file
diff --git a/docs/framework/social-post-generator.mdx b/docs/framework/social-post-generator.mdx
index dfd1ef837..f9c73b578 100644
--- a/docs/framework/social-post-generator.mdx
+++ b/docs/framework/social-post-generator.mdx
@@ -173,21 +173,21 @@ The last task is to bind all of the state elements and the click handler to the
First, click on the Text Input component to bring up the Component Settings panel. In the Bindings section, type `topic`.
-
+
Next, click on the Button component to bring up the Component Settings panel. In the Events section, use the dropdown for `wf-click` to choose the `handle_button_click` handler.
-
+
Click on the Message component and set the Text to `@{message}`. Under Visibility, choose “Custom” and set it to `message`.
Next, click on the Tags component. Under General, click “JSON” for Tags and set the object to `@{tags}`.
-
+
Then, click on the Text component to bring up the Component Settings panel. In General Properties, bind this text box to a variable called `posts` by entering `@{posts}` in the text property field. You can also set this text box to accept Markdown input if needed by toggling the “Use Markdown” property.
-
+
Finally, click on the Section that contains the Tags and Text components. Under Visibility, choose “Custom” and set it to `posts`.
diff --git a/mint.json b/mint.json
index 4b1c0e11f..24444e694 100644
--- a/mint.json
+++ b/mint.json
@@ -51,8 +51,8 @@
{
"group": "Tutorials",
"pages": [
- "docs/framework/social-post-generator",
"docs/framework/chat-assistant",
+ "docs/framework/social-post-generator",
"docs/framework/product-description-generator"
]
},