# Full-Stack Hello World App 2 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. {% code overflow="wrap" %} ``` 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". ``` {% endcode %} ## API Run the **add-api** tool to from the Bluetext Wizard. Then, prompt your agent with the following: {% code overflow="wrap" %} ``` 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 ``` {% endcode %} 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: {% code overflow="wrap" %} ``` 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. ``` {% endcode %} 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: ```yaml - { 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: {% code overflow="wrap" %} ``` 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. ``` {% endcode %} ## Temporal We will now add temporal to manage workflows in our app. {% code overflow="wrap" %} ``` 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 ``` {% endcode %} 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.bluetext.dev/labs/full-stack-hello-world-app-2.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.