Frontend (#74)

* add frontend and guardrail example; add sample prompts to README

* fix templating; move to latest quarkus

Author: jamesfalkner

scaffolder-templates/agentic-ai-template/skeleton/README.md

@@ -7,13 +7,68 @@ If you want to learn more about Quarkus, please visit its website: https://quark
 
 ## Running the application in dev mode
 
-Set the approriate API keys in `application.properties` and create a directory called `playground` in your clone if you wish to use the `filesystem` MCP server.
+You'll need `node` and `npm` installed (this is used to start mcp services). Follow the [recommended way](https://nodejs.org/en/download) to install for your system.
 
-You can run your application in dev mode that enables live coding using:
+You will also need a container environment available (e.g. Podman or Docker) if you want to see built-in telemetry, which you can access once the app is up by going to the Dev UI and finding the Grafana link. If you don't have a container environment, comment out the part in `application.properties` dealing with telemetry.
+
+Create a directory called `playground` at the root folder of your clone if you wish to use the `filesystem` MCP server (or change the name in `application.properties` to some other name, but the directory must exist)
+
+Several of the MCP services require API keys. Here are links to get the keys:
+
+* [Brave web search](https://brave.com/search/api/)
+* [Open AI](https://platform.openai.com/docs/quickstart)
+* [Google Maps](https://developers.google.com/maps/documentation/javascript/get-api-key#create-api-keys)
+* [Slack](https://github.com/modelcontextprotocol/servers/tree/main/src/slack#setup) (follow the instructions to get your _Bot User OAuth Token_ that starts with `xoxb-`, and your _Team ID_)
+
+Once you have all that, the easiest way is to create a file called `.env` in your clone (this file is listed in `.gitignore` so won't be pushed to GitHub if you fork this repo and make the file). The `.env` file should look like:
+
+```properties
+quarkus.langchain4j.mcp.bravesearch.environment.BRAVE_API_KEY=<YOUR BRAVE API KEY HERE>
+quarkus.langchain4j.mcp.googlemaps.environment.GOOGLE_MAPS_API_KEY=<YOUR GMAPS API KEY HERE>
+quarkus.langchain4j.mcp.slack.environment.SLACK_BOT_TOKEN=<YOUR SLACK BOT TOKEN HERE>
+quarkus.langchain4j.mcp.slack.environment.SLACK_TEAM_ID=<YOUR SLACK TEAM ID HERE>
+quarkus.langchain4j.openai.api-key=<YOUR OPENAI API KEY HERE>
+```
+
+These variables will automatically be included when you run Quarkus in Dev mode. You can also put them directly in `application.properties` but be careful not to check them into a public source repository!
+
+For production use, these should obviously be treated differently, stored in secure places like vaults or kubernetes Secrets, and injected as environment variables at runtime.
+
+But for testing, you can run your application in dev mode that enables live coding using:
 ```shell script
 ./mvnw compile quarkus:dev
 ```
-In Dev mode, you can use the Dev UI to chat with the LLM you've configured.
+In Dev mode, you can use the Dev UI to chat with the LLM you've configured by going to "Extensions" and clicking "Chat" to chat. You'll find the system message pre-filled in from the content from [Bot.java](src/main/java/Bot.java)
+
+> **_NOTE:_**  Quarkus now ships with a Dev UI, which is available in dev mode only at http://localhost:8080/q/dev/.
+
+## Testing the app
+
+There is a simple frontend application to test the assistant - access `http://localhost:8080` and you should see:
+
+Issue some sample prompts to see how it uses agent reasoning to invoke the various tools:
+
+```console
+My name is John Doe. I am a member of a team of 2 myself and Daniel Jane. I like Asian food, while Daniel is on a strict gluten-free diet.
+
+Please find one good restaurant in Atlanta, GA with the highest rating that meets
+the team's dietary needs and preferences. Then, invite the team to a lunch
+at 12pm next Wednesday using the slack channel "#lunchtime".
+In your message, include the name and description of the restaurant, the time and
+date of the lunch, and driving directions from Georgia World Congress Center.
+Also create an ICS calendar file for me to use in my calendar in the
+"playground/calendar" directory.`
+```
+
+And some simpler follow-up prompts like:
+
+* What was the reasoning you used to arrive at that recommendation?
+* How did you choose the restaurant?
+* What actions did you take for each step and which tools did you use?
+* Why did you search for gluten-free restaurants?
+* What did you remember about each person on the team?
+
+In Dev mode, you can also use the Dev UI to chat with the LLM you've configured by going to "Extensions" and clicking "Chat" to chat. You'll find the system message pre-filled in from the content from [Bot.java](src/main/java/Bot.java)
 
 > **_NOTE:_**  Quarkus now ships with a Dev UI, which is available in dev mode only at http://localhost:8080/q/dev/.
 

scaffolder-templates/agentic-ai-template/skeleton/pom.xml

@@ -1,6 +1,8 @@
 <?xml version="1.0"?>
-<project xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd" xmlns="http://maven.apache.org/POM/4.0.0"
-    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+<project
+  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"
+  xmlns="http://maven.apache.org/POM/4.0.0"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <modelVersion>4.0.0</modelVersion>
   <groupId>org.acme</groupId>
   <artifactId>research</artifactId>
@@ -37,6 +39,36 @@
       <groupId>io.quarkus</groupId>
       <artifactId>quarkus-vertx-http</artifactId>
     </dependency>
+    <dependency>
+      <groupId>io.quarkiverse.micrometer.registry</groupId>
+      <artifactId>quarkus-micrometer-registry-otlp</artifactId>
+      <version>3.2.4</version>
+    </dependency>
+    <dependency>
+      <groupId>io.quarkus</groupId>
+      <artifactId>quarkus-opentelemetry</artifactId>
+    </dependency>
+    <dependency>
+      <groupId>io.opentelemetry.instrumentation</groupId>
+      <artifactId>opentelemetry-jdbc</artifactId>
+    </dependency>
+    <dependency>
+      <groupId>io.quarkus</groupId>
+      <artifactId>quarkus-observability-devservices-lgtm</artifactId>
+      <scope>provided</scope>
+    </dependency>
+    <dependency>
+      <groupId>io.quarkus</groupId>
+      <artifactId>quarkus-rest</artifactId>
+    </dependency>
+    <dependency>
+      <groupId>io.quarkus</groupId>
+      <artifactId>quarkus-websockets-next</artifactId>
+    </dependency>
+    <dependency>
+      <groupId>io.quarkus</groupId>
+      <artifactId>quarkus-rest-jackson</artifactId>
+    </dependency>
     <dependency>
       <groupId>io.quarkiverse.langchain4j</groupId>
       <artifactId>quarkus-langchain4j-openai</artifactId>
@@ -128,4 +160,4 @@
       </properties>
     </profile>
   </profiles>
-</project>
+</project>

scaffolder-templates/agentic-ai-template/skeleton/src/main/java/Bot.java

@@ -1,61 +1,62 @@
 import dev.langchain4j.service.SystemMessage;
 import dev.langchain4j.service.UserMessage;
 import io.quarkiverse.langchain4j.RegisterAiService;
+import io.quarkiverse.langchain4j.guardrails.OutputGuardrails;
+import io.smallrye.mutiny.Multi;
 import jakarta.enterprise.context.SessionScoped;
 
 @RegisterAiService
 @SessionScoped
+@OutputGuardrails(CalendarGuardrail.class)
 public interface Bot {
 
-     @SystemMessage("""
-               These instructions are automatically active for all conversations. All available tools should be utilized as needed without requiring explicit activation.
-
-               {% if 'GoogleMaps' in values.mcp_server %}
-               - You have tools to access google maps to calculate distances, discover new places to visit, etc.
-               {% endif %}
-
-               {% if 'BraveSearch' in values.mcp_server %}
-               - You have tools to do internet searches using Brave.
-               {% endif %}
-
-               {% if 'Slack' in values.mcp_server %}
-               - You have tools to post notifications to Slack, an online chat platform. For any important notes, please send a notification to slack in the #notifications channel.
-               {% endif %}
-
-               - You have a tool to Memory Retrieval:
-                 - You should assume that you are interacting with default_user
-                 - If you have not identified default_user, proactively try to do so.
-                  - Always begin your chat by saying only "Remembering..." and retrieve all relevant information from your knowledge graph
-                  - Always refer to your knowledge graph as your "memory"
-                   - Use any relevant knowledge to refine any results.
-
-               Follow these steps for each interaction:
-
-               - Break down the research query into core components
-               - Identify key concepts and relationships, and save them in the knowledge graph
-               - Plan search and verification strategy
-               - Determine which tools will be most effective
-               - Brave web Search must be used for any fact-finding or research queries. Do not use brave_local_search.
-
-               - While conversing with the user, be attentive to any new information that falls into these categories:
-                    a) Basic Identity (age, gender, location, job title, education level, etc.)
-                    b) Behaviors (interests, habits, etc.)
-                    c) Preferences (communication style, preferred language, etc.)
-                    d) Goals (goals, targets, aspirations, etc.)
-                    e) Relationships (personal and professional relationships up to 3 degrees of separation)
-
-               - If any new information was gathered during the interaction, update your knowledge graph as follows:
-                    a) Create entities for recurring organizations, people, and significant events
-                    b) Connect them to the current entities using relations
-                    b) Store facts about them as observations
-
-               ## Implementation Notes
-               - Tools should be used proactively without requiring user prompting
-               - Multiple tools can and should be used when appropriate
-               - Each step of analysis should be documented
-               - If asked, show the analysis steps you took and the tools you used
-               - Knowledge retention across conversations should be managed through the knowledge graph tool.
-
-                           """)
-     String chat(@UserMessage String question);
+    @SystemMessage("""
+You are a helpful personal assistant, executing tasks as requested.
+
+These instructions are automatically active for all conversations. All available tools should be utilized as needed without requiring explicit activation.
+
+{% if 'Time' in values.mcp_server %}
+- You have tools to tell you the current date and time. You should always fetch the current date and time before making any scheduling decisions.
+{% endif %}
+
+-  You have tools to interact with the local filesystem and the users will ask you to perform operations like reading and writing files. The only directory allowed to interact with is the 'playground' directory relative to the current working directory. If a user specifies a relative path to a file and it does not start with 'playground', prepend the 'playground' directory to the path.
+
+{% if 'GoogleMaps' in values.mcp_server %}
+- You have tools to access google maps to calculate distances, search for locations, discover new places to visit, etc.
+{% endif %}
+
+{% if 'Slack' in values.mcp_server %}
+- You have tools to post notifications to Slack, an online chat platform. When sending a message to slack, make sure to tag each user with <@UserID> format (look up the userID using their name), and use as much rich text formatting as possible including links and images and emojis.
+{% endif %}
+
+{% if 'BraveSearch' in values.mcp_server %}
+- you have tools search the web for arbitrary information using Brave.
+{% endif %}
+
+{% if 'Memory' in values.mcp_server %}
+- You have a tool to do Memory Retrieval. Always refer to your knowledge graph as your "memory". Use any relevant knowledge to refine any results.
+{% endif %}
+
+{% if 'BraveSearch' in values.mcp_server %}
+- Brave web search must be used for any web research needs.
+{% endif %}
+
+## Implementation Notes
+
+- Tools should be used proactively without requiring user prompting
+
+- Multiple tools can and should be used when appropriate
+
+- Each step of analysis should be documented
+
+- If asked, show the analysis steps you took and the tools you used
+
+{% if 'Memory' in values.mcp_server %}
+- Knowledge retention across conversations should be managed through the knowledge graph tool.
+{% endif %}
+
+            """
+    )
+//    @OutputGuardrails(CalendarGuardrail.class)
+    Multi<String> chat(@UserMessage String question);
 }

scaffolder-templates/agentic-ai-template/skeleton/src/main/java/BotWebsocket.java

@@ -0,0 +1,31 @@
+import io.quarkus.websockets.next.OnError;
+import io.quarkus.websockets.next.OnOpen;
+import io.quarkus.websockets.next.OnTextMessage;
+import io.quarkus.websockets.next.WebSocket;
+import io.quarkus.websockets.next.WebSocketClientConnection;
+import io.quarkus.websockets.next.WebSocketConnection;
+import io.smallrye.mutiny.Multi;
+
+@WebSocket(path = "/bot")
+public class BotWebsocket {
+
+    private final Bot bot;
+
+    public BotWebsocket(Bot bot) {
+        this.bot = bot;
+    }
+
+    @OnOpen
+    public String onOpen() {
+        return "Welcome to your personal assistant! How can I help you today?";
+    }
+
+    @OnError
+    public String onError(Throwable t) {
+        return t.getMessage();
+    }
+    @OnTextMessage
+    public Multi<String> onTextMessage(String message) {
+        return bot.chat(message);
+    }
+}

scaffolder-templates/agentic-ai-template/skeleton/src/main/java/CalendarGuardrail.java

@@ -0,0 +1,18 @@
+import dev.langchain4j.data.message.AiMessage;
+import io.quarkiverse.langchain4j.guardrails.OutputGuardrail;
+import io.quarkiverse.langchain4j.guardrails.OutputGuardrailResult;
+import jakarta.enterprise.context.ApplicationScoped;
+
+@ApplicationScoped
+public class CalendarGuardrail implements OutputGuardrail {
+
+    @Override
+    public OutputGuardrailResult validate(AiMessage responseFromLLM) {
+        if (!responseFromLLM.text().toLowerCase().contains("ics") &&
+            !responseFromLLM.text().toLowerCase().contains("calendar")) {
+            return reprompt("No calendar entry created", "Make sure you create an ICS calendar file");
+        }
+        return success();
+    }
+
+}