Create the app in Writer
Copy your app's API key
Open your terminal application
Install the dependencies
writer
and python-dotenv
packages installed on your computer, you can skip this step.writer
and python-dotenv
packages by entering the following commands in your terminal application:pip
, the Python package installer, to install two packages:writer
, which provides some command-line commands and enables Python code to interact with Writer and the Writer Framework.python-dotenv
, which makes it easy to manage environment variables by loading them from a .env
file. This one is optional for this exercise, but you might find it useful when working on larger projects.Set the API key environment variable
WRITER_API_KEY
.Select your operating system and terminal application below, then copy and paste the command into your terminal application, replacing [your_api_key]
with the API key you copied earlier:WRITER_API_KEY
environment variable will remain defined as long your terminal session is open (that is, until you close your terminal application’s window).Create the project
social-post-generator
using a starter template called ai-starter
so that you’re not starting “from scratch.”Examine the header
@{my_app.title}
. The @{
and }
indicate that my_app.title
is a variable and that its contents should be the text displayed instead of the literal text “my_app.title”. You’ll set the value of this variable soon.Clear the Section's default title
Add a Text Input component
Topic for social posts and tags
.Enter words or phrases describing your topic
.Add a Button component
Generate posts
.arrow_forward
.Add a Message component
#D4FFF2
.Add a new Section
#F6EFFD
.Add a Tags component
Add a Separator
Add a Text component
main.py
, which is in your project’s directory. This file was automatically generated; you’ll update the code in it to define the behavior of your app.
The simplest way to edit main.py
is within the project editor. Click on the “toggle code” button (beside the word Code) near the lower left corner of the project editor page.
main.py
.
main.py
file in your project’s directory.Import libraries and load the Writer Framework API key
WRITER_API_KEY
environment variable.Create a handler to respond to the user's input
%
at the start of the string being assigned to state["message"]
will be replaced by a “spinning circle” progress indicator graphic in the Message component.The pattern
variable in the # Generate and display hashtags
section defines a regular expression pattern to search for words that begin with the #
character. The r
in front of the opening quote specifies that the string is a raw string, which means that the \
character should be treated as a literal backslash and not as the start of an escape character sequence.Note that generate_and_display_posts_and_tags()
uses print()
functions for debugging purposes, and you can use them to get a better idea of what’s happening in the function. You’ll see their output in both your terminal application and in the project editor’s ‘log’ pane (which will be covered shortly) as you use the social post generator. This output will include:print()
functions don’t affect the operation of the social post generator in any way, and you can remove them if you wish.Initialize the application
generate_and_display_posts_and_tags()
function…init_state()
method sets the initial value of state
, a dictionary containing values that define the state of the application. The key-value pairs in state
are how you store values used by your app and how you pass data between the back-end code and the UI.The code above sets the initial value of state
so that it has these key-value pairs:topic
: A string containing the topic that the application should generate social media posts and tags for. You’ll bind its value to the Text Input component where the user will enter the topic.message
: A string containing text of the message that will be displayed to the user while the application is generating posts and tags. You’ll bind its value to the Message component.tags
: A list containing the hashtags generated by the LLM. You’ll bind its value to the Tags component.posts
: A string containing the social media posts generated by the LLM. You’ll bind its value to the Text component.my_app
: A dictionary containing values that define the application’s appearance. This dictionary has a single key-value pair, title
, which defines the text that appears as the application’s title.state
variable, see our Application state page.Save the updated code and hide the code editor
Observe that the heading at the top of the app is now 'SOCIAL POST GENERATOR'
@{my_app.title}
, a value in the app’s state
variable. You changed this value when you update the call to the Writer Framework’s init_state()
method.Bind the Text Input component to the 'state' variable's 'topic' key
state
variable key whose value will be connected to the Text Input component. Set its value to topic
.Connect the Button component to the 'generate_and_display_posts_and_tags()' function
wf-click
property. This is where you specify the function to call when the user clicks the button — set its value to generate_and_display_posts_and_tags
.Bind the Message component to the 'state' variable's 'message' key
@{message}
.Bind the Tags component to the 'state' variable's 'tags' key.
@{tags}
.Bind the Text component to the 'state' variable's 'posts' key
@{posts}
.Set the visiblity of the Section component containing the Tags and Text components based on the 'state' variable's 'posts' key
posts
. This will cause the Section to be visible only when the state
variable’s posts
key has a non-empty value.print()
functions and error messages by clicking on the Log button located near the upper right corner of the page:
writer run
as opposed to writer edit
. This launches the application as your users will see it, without any of the editing tools. Even though you can preview your applications in the project editor, it’s still a good idea to test it by running it on your computer, outside the project editor, before deploying it.
You’ll be able to access the application with your browser at the URL that appears on the command line. It should look like this:
writer edit social-post-generator
, and your application, which you launched with writer run social-post-generator
, run on the same URL, but on different ports (specified by the number after the :
character at the end of the URL).