Merge pull request #18 from langchain-ai/brace/hookup-accommodations

feat: Hookup accommodations actions to graph

agent/agent.tsx

@@ -77,12 +77,20 @@ function handleRoute(
   return state.next;
 }
 
+const GENERAL_INPUT_SYSTEM_PROMPT = `You are an AI assistant.
+If the user asks what you can do, describe these tools.
+${allToolDescriptions}
+
+If the last message is a tool result, describe what the action was, congratulate the user, or send a friendly followup in response to the tool action. Ensure this is a clear and concise message.
+
+Otherwise, just answer as normal.`;
+
 async function handleGeneralInput(state: GenerativeUIState) {
   const llm = new ChatOpenAI({ model: "gpt-4o-mini", temperature: 0 });
   const response = await llm.invoke([
     {
       role: "system",
-      content: `You are an AI assistant.\nIf the user asks what you can do, describe these tools. Otherwise, just answer as normal.\n\n${allToolDescriptions}`,
+      content: GENERAL_INPUT_SYSTEM_PROMPT,
     },
     ...state.messages,
   ]);

agent/trip-planner/nodes/extraction.tsx

@@ -61,6 +61,7 @@ export async function extraction(
     numberOfGuests: z
       .number()
       .optional()
+      .default(2)
       .describe("The number of guests for the trip"),
   });
 
@@ -113,7 +114,10 @@ Extract only what is specified by the user. It is okay to leave fields blank if
   const extractionDetailsWithDefaults: TripDetails = {
     startDate,
     endDate,
-    numberOfGuests: extractedDetails.numberOfGuests ?? 2,
+    numberOfGuests:
+      extractedDetails.numberOfGuests !== undefined
+        ? extractedDetails.numberOfGuests
+        : 2,
     location: extractedDetails.location,
   };
 

agent/trip-planner/nodes/tools.tsx

@@ -4,6 +4,7 @@ import { typedUi } from "@langchain/langgraph-sdk/react-ui/server";
 import type ComponentMap from "../../uis/index";
 import { z } from "zod";
 import { LangGraphRunnableConfig } from "@langchain/langgraph";
+import { getAccommodationsListProps } from "../utils/get-accommodations";
 
 const schema = z.object({
   listAccommodations: z
@@ -85,11 +86,12 @@ export async function callTools(
   }
 
   if (tripPlan.listAccommodations) {
-    // TODO: Replace with an accommodations list UI component
+    ui.write(
-    ui.write("accommodations-list", { tripDetails: state.tripDetails });
+      "accommodations-list",
+      getAccommodationsListProps(state.tripDetails),
+    );
   }
   if (tripPlan.bookAccommodation && tripPlan.accommodationName) {
-    // TODO: Replace with a book accommodation UI component
     ui.write("book-accommodation", {
       tripDetails: state.tripDetails,
       accommodationName: tripPlan.accommodationName,
@@ -97,12 +99,10 @@ export async function callTools(
   }
 
   if (tripPlan.listRestaurants) {
-    // TODO: Replace with a restaurants list UI component
     ui.write("restaurants-list", { tripDetails: state.tripDetails });
   }
 
   if (tripPlan.bookRestaurant && tripPlan.restaurantName) {
-    // TODO: Replace with a book restaurant UI component
     ui.write("book-restaurant", {
       tripDetails: state.tripDetails,
       restaurantName: tripPlan.restaurantName,

agent/trip-planner/utils/get-accommodations.ts

@@ -0,0 +1,67 @@
+import { faker } from "@faker-js/faker";
+import { Accommodation } from "../../types";
+import { TripDetails } from "../types";
+
+export function getAccommodationsListProps(tripDetails: TripDetails) {
+  const IMAGE_URLS = [
+    "https://a0.muscache.com/im/pictures/c88d4356-9e33-4277-83fd-3053e5695333.jpg?im_w=1200&im_format=avif",
+    "https://a0.muscache.com/im/pictures/miso/Hosting-999231834211657440/original/fa140513-cc51-48a6-83c9-ef4e11e69bc2.jpeg?im_w=1200&im_format=avif",
+    "https://a0.muscache.com/im/pictures/miso/Hosting-5264493/original/10d2c21f-84c2-46c5-b20b-b51d1c2c971a.jpeg?im_w=1200&im_format=avif",
+    "https://a0.muscache.com/im/pictures/d0e3bb05-a96a-45cf-af92-980269168096.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/miso/Hosting-50597302/original/eb1bb383-4b70-45ae-b3ce-596f83436e6f.jpeg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/miso/Hosting-900891950206269231/original/7cc71402-9430-48b4-b4f1-e8cac69fd7d3.jpeg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/460efdcd-1286-431d-b4e5-e316d6427707.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/prohost-api/Hosting-51234810/original/5231025a-4c39-4a96-ac9c-b088fceb5531.jpeg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/miso/Hosting-14886949/original/a9d72542-cd1f-418d-b070-a73035f94fe4.jpeg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/2011683a-c045-4b5a-97a8-37bca4b98079.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/11bcbeec-749c-4897-8593-1ec6f6dc04ad.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/prohost-api/Hosting-18327626/original/fba2e4e8-9d68-47a8-838e-dab5353e5209.jpeg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/miso/Hosting-813949239894880001/original/b2abe806-b60f-4c0b-b4e6-46808024e5b6.jpeg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/prohost-api/Hosting-894877242638354447/original/29e50d48-1733-4c5b-9068-da4443dd7757.jpeg?im_w=720&im_format=avif",
+    ,
+    "https://a0.muscache.com/im/pictures/hosting/Hosting-1079897686805296552/original/b24bd803-52f2-4ca7-9389-f73c9d9b3c64.jpeg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/miso/Hosting-43730011/original/29f90186-4f83-408a-89ce-a82e520b4e36.png?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/300ae0e1-fc7e-4a05-93a4-26809311ef19.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/0c7b03c9-8907-437f-8874-628e89e00679.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/prohost-api/Hosting-1040593515802997386/original/0c910b31-03d3-450f-8dc3-2d7f7902b93e.jpeg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/d336587a-a4bf-44c9-b4a6-68b71c359be0.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/prohost-api/Hosting-50345540/original/f8e911bb-8021-4edd-aca4-913d6f41fc6f.jpeg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/prohost-api/Hosting-46122096/original/1bd27f94-cf00-4864-8ad9-bc1cd6c5e10d.jpeg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/574424e1-4935-45f5-a5f0-e960b16a3fcc.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/181d4be2-6cb2-4306-94bf-89aa45c5de66.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/miso/Hosting-50545526/original/af14ce0b-481e-41be-88d1-b84758f578e5.jpeg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/10d8309a-8ae6-492b-b1d5-20a543242c68.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/miso/Hosting-813727499556203528/original/12c1b750-4bea-40d9-9a10-66804df0530a.jpeg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/83e4c0a0-65ce-4c5d-967e-d378ed1bfe15.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/852f2d4d-6786-47b5-a3ca-ff7f21bcac2d.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/92534e36-d67a-4346-b3cf-7371b1985aca.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/ecbfed18-29d0-4f86-b6aa-4325b076dfb3.jpg?im_w=720&im_format=avif",
+    "https://a0.muscache.com/im/pictures/prohost-api/Hosting-52443635/original/05f084c6-60d0-4945-81ff-d23dfb89c3ca.jpeg?im_w=720&im_format=avif",
+  ];
+
+  const getAccommodations = (city: string): Accommodation[] => {
+    // Shuffle the image URLs array and take the first 6
+    const shuffledImages = [...IMAGE_URLS]
+      .sort(() => Math.random() - 0.5)
+      .slice(0, 6)
+      .filter((i): i is string => typeof i === "string");
+
+    return Array.from({ length: 6 }, (_, index) => ({
+      id: faker.string.uuid(),
+      name: faker.location.streetAddress(),
+      price: faker.number.int({ min: 100, max: 1000 }),
+      rating: Number(
+        faker.number
+          .float({ min: 4.0, max: 5.0, fractionDigits: 2 })
+          .toFixed(2),
+      ),
+      city: city,
+      image: shuffledImages[index],
+    }));
+  };
+
+  return {
+    tripDetails,
+    accommodations: getAccommodations(tripDetails.location),
+  };
+}

agent/types.ts

@@ -16,3 +16,12 @@ export const GenerativeUIAnnotation = Annotation.Root({
 });
 
 export type GenerativeUIState = typeof GenerativeUIAnnotation.State;
+
+export type Accommodation = {
+  id: string;
+  name: string;
+  price: number;
+  rating: number;
+  city: string;
+  image: string;
+};

agent/uis/trip-planner/accommodations-list/index.tsx

@@ -1,5 +1,5 @@
 import "./index.css";
-import React, { useEffect } from "react";
+import React from "react";
 import { X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { TripDetails } from "../../../trip-planner/types";
@@ -10,50 +10,9 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { faker } from "@faker-js/faker";
 import { format } from "date-fns";
-
+import { Accommodation } from "agent/types";
-const IMAGE_URLS = [
+import { capitalizeSentence } from "../../../utils/capitalize";
-  "https://a0.muscache.com/im/pictures/c88d4356-9e33-4277-83fd-3053e5695333.jpg?im_w=1200&im_format=avif",
-  "https://a0.muscache.com/im/pictures/miso/Hosting-999231834211657440/original/fa140513-cc51-48a6-83c9-ef4e11e69bc2.jpeg?im_w=1200&im_format=avif",
-  "https://a0.muscache.com/im/pictures/miso/Hosting-5264493/original/10d2c21f-84c2-46c5-b20b-b51d1c2c971a.jpeg?im_w=1200&im_format=avif",
-  "https://a0.muscache.com/im/pictures/d0e3bb05-a96a-45cf-af92-980269168096.jpg?im_w=720&im_format=avif",
-  "https://a0.muscache.com/im/pictures/miso/Hosting-50597302/original/eb1bb383-4b70-45ae-b3ce-596f83436e6f.jpeg?im_w=720&im_format=avif",
-  "https://a0.muscache.com/im/pictures/miso/Hosting-900891950206269231/original/7cc71402-9430-48b4-b4f1-e8cac69fd7d3.jpeg?im_w=720&im_format=avif",
-  "https://a0.muscache.com/im/pictures/460efdcd-1286-431d-b4e5-e316d6427707.jpg?im_w=720&im_format=avif",
-  "https://a0.muscache.com/im/pictures/prohost-api/Hosting-51234810/original/5231025a-4c39-4a96-ac9c-b088fceb5531.jpeg?im_w=720&im_format=avif",
-  "https://a0.muscache.com/im/pictures/miso/Hosting-14886949/original/a9d72542-cd1f-418d-b070-a73035f94fe4.jpeg?im_w=720&im_format=avif",
-  "https://a0.muscache.com/im/pictures/2011683a-c045-4b5a-97a8-37bca4b98079.jpg?im_w=720&im_format=avif",
-  "https://a0.muscache.com/im/pictures/11bcbeec-749c-4897-8593-1ec6f6dc04ad.jpg?im_w=720&im_format=avif",
-  "https://a0.muscache.com/im/pictures/prohost-api/Hosting-18327626/original/fba2e4e8-9d68-47a8-838e-dab5353e5209.jpeg?im_w=720&im_format=avif",
-];
-
-export type Accommodation = {
-  id: string;
-  name: string;
-  price: number;
-  rating: number;
-  city: string;
-  image: string;
-};
-
-function getAccommodations(city: string): Accommodation[] {
-  // Shuffle the image URLs array and take the first 6
-  const shuffledImages = [...IMAGE_URLS]
-    .sort(() => Math.random() - 0.5)
-    .slice(0, 6);
-
-  return Array.from({ length: 6 }, (_, index) => ({
-    id: faker.string.uuid(),
-    name: faker.location.streetAddress(),
-    price: faker.number.int({ min: 100, max: 1000 }),
-    rating: Number(
-      faker.number.float({ min: 4.0, max: 5.0, fractionDigits: 2 }).toFixed(2),
-    ),
-    city: city,
-    image: shuffledImages[index],
-  }));
-}
 
 const StarSVG = ({ fill = "white" }: { fill?: string }) => (
   <svg
@@ -94,7 +53,7 @@ function AccommodationCard({
           <p>·</p>
           <p>{accommodation.price}</p>
         </div>
-        <p className="text-sm">{accommodation.city}</p>
+        <p className="text-sm">{capitalizeSentence(accommodation.city)}</p>
       </div>
     </div>
   );
@@ -144,7 +103,9 @@ function SelectedAccommodation({
               <StarSVG fill="black" />
               {accommodation.rating}
             </span>
-            <p className="text-gray-600">{accommodation.city}</p>
+            <p className="text-gray-600">
+              {capitalizeSentence(accommodation.city)}
+            </p>
           </div>
           <div className="space-y-2 text-sm text-gray-600">
             <div className="flex justify-between">
@@ -179,16 +140,11 @@ function SelectedAccommodation({
 
 export default function AccommodationsList({
   tripDetails,
+  accommodations,
 }: {
   tripDetails: TripDetails;
+  accommodations: Accommodation[];
 }) {
-  const [places, setPlaces] = React.useState<Accommodation[]>([]);
-
-  useEffect(() => {
-    const accommodations = getAccommodations(tripDetails.location);
-    setPlaces(accommodations);
-  }, []);
-
   const [selectedAccommodation, setSelectedAccommodation] = React.useState<
     Accommodation | undefined
   >();
@@ -213,7 +169,7 @@ export default function AccommodationsList({
         className="w-full sm:max-w-sm md:max-w-2xl lg:max-w-3xl"
       >
         <CarouselContent>
-          {places.map((accommodation) => (
+          {accommodations.map((accommodation) => (
             <CarouselItem
               key={accommodation.id}
               className="basis-1/2 md:basis-1/4"

agent/utils/capitalize.ts

@@ -0,0 +1,18 @@
+/**
+ * Capitalizes the first letter of each word in a string.
+ */
+export function capitalizeSentence(string: string): string {
+  return string
+    .split(" ")
+    .map((word) => {
+      return word.charAt(0).toUpperCase() + word.slice(1);
+    })
+    .join(" ");
+}
+
+/**
+ * Capitalizes the first letter of a string.
+ */
+export function capitalize(string: string): string {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}