Social post generator

Log into Writer. From the Home screen, click on the Build an app button.

The Start building menu will appear, presenting options for the types of apps you can create.

Select Framework, located under Developer tools. This will create a brand new app based on Writer Framework.

On the next screen, titled How to deploy an application, you can get the API key for the app by clicking on the Reveal key button, located under the text Authenticate with an API key. Your complete API key will be displayed, and a “copy” button will appear. Click this button to copy the key; you’ll use it in the next step.

Open your terminal application. On macOS and Linux, this application goes by the name Terminal; on Windows, you can use either Windows PowerShell (which is preferred) or Command Prompt.

Install the writer and python-dotenv packages by entering the following commands in your terminal application:

pip install writer python-dotenv

This command tells 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.

To pass your API key to the Writer Framework, you need to set an environment variable called 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:

The 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 by entering this command into your terminal application:

writer create social-post-generator --template=ai-starter

This command sets up a new project called social-post-generator using a starter template called ai-starter so that you’re not starting “from scratch.”

Select the Header component by clicking it — it’s the component at the top, containing the title AI STARTER and a gray area labeled Empty Header.

When you click it, you’ll see the properties panel appear on the right side of the page. This lets you view and edit the properties of the selected component.

The first property you’ll see in the panel is the Text property, which defines the text that appears as the header’s title. It should contain the value @{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.

Select the Section component by clicking it — it’s just below the Header component and contains the title Section Title and a gray area labeled Empty Section.

In the properties panel, clear out the value of the Title property. This will remove the Section’s default title.

The user will need a place to enter words or phrases that the app will use as the basis for generating posts and tags.

Drag a Text Input component — and note, it’s Text Input, not Text — from the Core toolkit panel on the left (it’s under Input, and you may need to scroll down a little to find it) and into the Section. Sections can act as containers for other components.

Select the Text Input component. In the properties panel:

• Find the Label property and set its value to Topic for social posts and tags.
• (Optional) Feel free to add some placeholder to the Text Input component by setting the value of the Placeholder property with something like Enter words or phrases describing your topic.

Drag a Button component from the Core toolkit panel (it’s under Other, and you may need to scroll down a little to find it) into the Section, directly below the Text Input. The user will click this button to submit their prompt.

Select the Button. In the properties panel:

• Set the Text property’s value to Generate posts.
• Find the Icon property, and set its value to arrow_forward.

The process of creating social media posts and tags takes a few moments. In order to reassure the user that the app is working and hasn’t crashed, it will use a Message component to display something reassuring while it’s generating.

Drag a Message component from the Core toolkit panel into the Section positioning it immediately below the Button.

Select the Message component. In the properties panel:

• Scroll down to the Style section and look for the Loading property, which sets the color of the Message component when it’s loading.
• Click its CSS button, which will cause a text field to appear below it.
• Enter this color value into the text field: #D4FFF2.

The Section that you were working on is for user input. Let’s add a new Section to hold the output — the social media posts and tags the app will generate.

Drag a Section component from the Toolbox panel and place it inside the Section that’s already there, just below the Message component.

Select the Section you just added. In the properties panel:

• Find the Title property and clear it its value to remove the Section’s title.
• Scroll down to the Style section and look for the Container background property, which sets the Section’s background color.
• Click its CSS button, which will cause a text field to appear below it.
• Enter this color value into the text field: #F6EFFD.

Writer Framework has a number of useful components to make your apps more functional and beautiful. One of these is the Tags component, which can take a list of hashtags (or words, or short phrases) and display them inside colorful “bubbles” to make them stand out. This app will display the social media tags it generates in a Tags component.

Drag a Tags component from the Toolbox panel and place it inside the new Section.

Drag a Separator component from the Toolbox panel and place it inside the new Section, just below the Tags component. This will separate the tags from the posts.

Finally, drag a Text component from the Toolbox panel and position it below the Separator. This will hold the generated social media posts.

You should see the following at the start of the file:

import writer as wf
import writer.ai

Replace that code with the following:

import os
import re
import writer as wf
import writer.ai

# Set the API key
wf.api_key = os.getenv("WRITER_API_KEY")

This code imports the libraries that the application will need and then reads your Writer Framework API key in the WRITER_API_KEY environment variable.

When the user presses the app’s Button, the app needs to call a function to generate and display the social media posts and tags. Find these comments in the code…

# Welcome to Writer Framework! 
# This template is a starting point for your AI apps.
# More documentation is available at https://dev.writer.com/framework

…and replace them with the following function:

def generate_and_display_posts_and_tags(state):
    print(f"Here's what the user entered: {state['topic']}")

    # Display message
    state["message"] = "% Generating social media posts and tags for you..."

    # Generate and display social posts
    prompt = f"You are a social media expert. Generate 5 engaging social media posts about {state['topic']}. Include emojis, and put a blank line between each post."
    state["posts"] = writer.ai.complete(prompt)
    print(f"Posts: {state['posts']}")

    # Generate and display hashtags
    prompt = f"You are a social media expert. Generate around 5 hashtags about {state['topic']}, delimited by spaces. For example, #dogs #cats #ducks #elephants #badgers"
    pattern = r"#\w+"
    hashtags = re.findall(pattern, writer.ai.complete(prompt))
    state["tags"] = {item: item for item in hashtags}
    print(f"Tags: {state['tags']}")

    # Hide message
    state["message"] = ""

The % 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:

• The topic the user entered
• The posts generated by the LLM
• The hashtags generated by the LLM

The print() functions don’t affect the operation of the social post generator in any way, and you can remove them if you wish.

The final step is to set the application’s initial state. Find this code, which should be just after the generate_and_display_posts_and_tags() function…

# Initialise the state
wf.init_state({
    "my_app": {
        "title": "AI STARTER"
    },
})

…and replace it with this:

# Initialize the state
wf.init_state({
    "topic": "writing",
    "message": "",
    "tags": {},
    "posts": "",
    "my_app": {
        "title": "SOCIAL POST GENERATOR"
    }
})

The Writer Framework’s 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.

That’s all the code. If you edited the code in the browser, save it by clicking the “save” button near the top right corner of the code editor.

Click the “toggle code” button to hide the code editor.

Earlier, you saw that the Header component’s Text property was set to @{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.

Select the Text Input component. In the properties panel, scroll down to the Binding section and find the State element property. This is where you specify the state variable key whose value will be connected to the Text Input component. Set its value to topic.

Select the Button component. In the properties panel, scroll down to the Events section and find the 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.

Select the Message component. In the properties panel, find the Message property, which specifies the content of the Message component. Set its value to @{message}.

Select the Tags component. In the properties panel:

• Find the Tags property, which specifies the source of the tags that the component will display.
• Click its JSON button.
• In the text field below the JSON button, set the Tags property’s value to @{tags}.

Select the Text component. In the properties panel:

• Find the Text property, which specifies the content of the Text component. Set its value to @{posts}.
• Set the Use Markdown property to yes.

Select the Section component containing the Tags and Text components. In the properties panel:

• Scroll to the Visibility property at the bottom.
• Click on the Custom button.
• In the Visibility value field, set the value to posts. This will cause the Section to be visible only when the state variable’s posts key has a non-empty value.