Full-Stack Hello World App 2

Using Bluetext to make a full stack app by incrementally adding, and integrating services like Couchbase, a FastAPI, and Temporal.

With Bluetext, we encourage users to use AI only when needed. While creating this app, we will try to do as many operations manually directly through the Bluetext Wizards interface, and use the coding agent only to make changes to the code that is generated by our tools. You could also use Bluetext purely as a starting point when developing your app, and manually code the rest from there.

Frontend

Run the quick setup before proceeding from the Bluetext Wizard before proceeding. To open the Bluetext Wizard navigate to and click the "B" icon on the explorer panel. Open the Bluetext wizard and run the add-API tool. You can then prompt the agent with the following.

I have a containerised frontend running through Polytope, modify the code to have a smiley face with a text box underneath it that says "hello from the frontend".

API

Run the add-api tool to from the Bluetext Wizard. Then, prompt your agent with the following:

list the services to see where what is being hosted. Edit the API to hold a hello from the API message with the following endpoints
GET  /message: returns the hardcoded message
POST /message: replaces the hardcoded message (optional) 

Edit the frontend to display this message under the existing one

we can check the API directly either by visiting this endpoint trough the browser, or by curling the endpoint.

Your agent might ask you to approve a CURL request that would look like the following:

curl -X POST "http://localhost:8000/message?message=your+new+message"

Couchbase

We can create a collection in Couchbase to store another message. This requires us to call multiple tools

1. add-couchbase (creates the code to run the couchbase server and the config-manager, and runs both)

2. add-couchbase-client (adds client library to the API project)

3. add-couchbase-models (scaffolds new couchbase models with CRUD operations and prepares the API to interact with the database). Now we can use those models to write routes that can populate the couchbase collection. The tool requires parameters, which you can name: messages.

Note: some tools are added to the list of tools dynamically, for example add-couchbase-client adds add-couchbase-models to the list of available tools. To view these new tools, press refresh in the MCP tools section of the wizard.

We can then prompt the coding agent with the following:

Couchbase is running and configured in my app in Polytope. Add a message in main.default.messages to hold a hello from couchbase message. change the frontend to add this message underneath.

When this is done, you can navigate to the couchbase UI. The adress can be found in the services section in Polytope. To log in, use the credentials user and password When this is done you can navigate to the couchbase.yml, make a change, and check the couchbase UI

Implementing AI

We can now try to implement AI, to add another greeting that uses an LLM to randomise it. Lets run the api-add, and type google-genai into the packages. If you have a google API key, paste it into your modules/api/polytope.yml file, with the following format, where your other environment variables live:

- { name: GOOGLE_API_KEY, value: "YOUR API KEY HERE" }

To pick up on environment variables, the API container needs to be restarted. You can also restart the polytope server, and start it again with pt run default --mcp then prompt your agent with the following:

I have installed the google-genai sdk package for the API, and have injected my API key as an environment variable by adding it to the API tool definition in  modules/api/polytope.yml, which defines the API container. The API is up and running and has been restarted to make the API key available. Using gemini-2.5-flash, generate a random greeting and fetch it with the API to display it onto the frontend.

Temporal

We will now add temporal to manage workflows in our app.

Add Temporal for managing the state of the messages. Create a workflow that starts when the base route of the frontend is visited by the user and ends when the final message is loaded. each message should be an activity within the workflow

We can now open the temporal UI, the same way we did for couchbase, and look at the workflow that starts each time you refresh the frontend.