docs(travel-tutorial): make edits for clarity

Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>

Author: tylerslaton

docs/content/docs/coagents/tutorials/ai-travel-app/overview.mdx

@@ -3,6 +3,8 @@ title: Overview
 ---
 import { YouTubeVideo } from "@/components/react/youtube-video";
 import { FaGithub } from "react-icons/fa";
+import { PiMonitor } from "react-icons/pi";
+import { Button } from "@/components/ui/button";
 import Link from "next/link";
 
 # AI Travel Agentic Copilot Tutorial
@@ -28,21 +30,21 @@ In this tutorial, you will take a simple travel application and supercharge it w
 You can try out an interactive example of the end result below:
 
 <div className="flex flex-row gap-2">
-  <Link href="https://github.com/CopilotKit/CopilotKit/tree/main/examples/coagents-travel?ref=travel-tutorial" className="no-underline" target="_blank">
-    <button className="bg-neutral-800 text-white px-4 py-2 rounded-lg flex items-center gap-2 mt-2 font-medium">
-      <FaGithub className="w-4 h-4" />
-      <span>View source code on GitHub</span>
-    </button>
-  </Link>
-
-  <Link href="https://examples-coagents-ai-travel-app.vercel.app/" className="no-underline" target="_blank">
-    <button className="bg-neutral-800 text-white px-4 py-2 rounded-lg flex items-center gap-2 mt-2 font-medium">
-      <FaGithub className="w-4 h-4" />
+  <Button size="lg" asChild className="flex gap-2 items-center">
+    <Link href="https://github.com/CopilotKit/CopilotKit/tree/main/examples/coagents-travel?ref=travel-tutorial" className="no-underline" target="_blank">
+      <FaGithub className="w-6 h-6 mr-2" />
+      <span>View on GitHub</span>
+    </Link>
+  </Button>
+
+  <Button size="lg" asChild className="flex gap-2 items-center">
+    <Link href="https://examples-coagents-ai-travel-app.vercel.app/" className="no-underline" target="_blank">
+      <PiMonitor className="w-6 h-6 mr-2" />
       <span>View live app</span>
-    </button>
-  </Link>
+    </Link>
+  </Button>
 </div>
 
-<iframe src="https://examples-coagents-ai-travel-app.vercel.app/" className="w-full h-[800px] mt-4 rounded-lg" />
+<iframe src="https://examples-coagents-ai-travel-app.vercel.app/" className="w-full h-[800px] mt-4 rounded-lg border shadow-xl" />
 
 In the next step, we'll checkout the repo, install dependencies, and start the project locally.

docs/content/docs/coagents/tutorials/ai-travel-app/step-4-integrate-the-agent.mdx

@@ -25,12 +25,31 @@ Make sure you have the LangGraph Studio endpoint from the previous step!
 
 <Tabs items={['CopilotKit Cloud', 'Self-Hosted']}>
 <Tab value="CopilotKit Cloud">
-We're going to use the CopilotKit CLI to setup a tunnel between our locally running LangGraph agent and CopilotKit Cloud.
+We're going to use the CopilotKit CLI to setup a tunnel between our locally running LangGraph agent and CopilotKit Cloud. You'll 
+need the port number of the LangGraph Studio endpoint we setup earlier.
+
+<Callout title="Looking for the port number?">
+It'll be on the bottom left of the LangGraph Studio interface like this.
+
+<Frame>
+  <img src="/images/coagents/tutorials/ai-travel-app/lgs-endpoint.png" alt="LangGraph Studio Endpoint" />
+</Frame>
+
+</Callout>
 
 First, run the following command to setup the tunnel.
 
 ```bash
-npx @copilotkit/cli tunnel <port_number> # where <port_number> is the port number of the LangGraph Studio endpoint
+# replace <port_number> with the port number of the LangGraph Studio endpoint
+npx @copilotkit/cli tunnel <port_number> 
+
+✔ Tunnel created successfully!
+
+Tunnel Information:
+Local: localhost:54209
+Public URL: https://light-pandas-argue.loca.lt # copy this url! # [!code highlight]
+
+Press Ctrl+C to stop the tunnel
 ```
 
 Make sure to copy the public URL that is output by the command.
@@ -42,11 +61,13 @@ to get one. When asked, you're looking for a `Personal Access Token`.
 </Callout>
 
 
-Now, head back over to [cloud.copilotkit.ai](https://cloud.copilotkit.ai) and follow these steps:
-1. Navigate to the `Remote Endpoints` section by scrolling down.
-2. Click on the `+ Add New` button.
+Now we're going to add our tunnel endpoint to Copilot Cloud. 
+
+1. Head back over to [cloud.copilotkit.ai](https://cloud.copilotkit.ai)
+2. Navigate to the `Remote Endpoints` section by scrolling down.
+3. Click on the `+ Add New` button.
 3. Select `LangGraph Platform` from the options.
-4. Add your public URL and LangSmith API key to the form.
+4. Add your public URL (should look like `https://light-pandas-argue.loca.lt`) and LangSmith API key to the form.
 5. Click create.
 
 Now, you should see the remote endpoint in the list.
@@ -59,25 +80,23 @@ In our previously setup `/api/copilotkit` route, we're going to add the followin
 ```tsx title="ui/app/api/copilotkit/route.ts"
 // ...
 
-import { langGraphCloudEndpoint } from '@copilotkit/runtime/endpoints'; // [!code ++]
+import { langGraphPlatformEndpoint } from '@copilotkit/runtime/endpoints'; // [!code ++]
 
 // ...
 
 const runtime = new CopilotRuntime();// [!code --]
-// [!code ++:15]
-const runtime = new CopilotRuntime({
-  remoteEndpoints: [ 
-    langGraphCloudEndpoint({
-      deploymentUrl: "http://localhost:<port>", // the URL from LangGraph Studio
-      agents: [
-        {
-          // the name of the graph defined in the `agent/langgraph.json` file
-          name: 'travel',
-          description: 'A travel assistant that can help with planning trips.'
-        }
-      ]
-    }),
-  ],
+// [!code ++:13]
+ const runtime = new CopilotRuntime({
+    remoteEndpoints: [
+      langGraphPlatformEndpoint({
+        deploymentUrl: "http://localhost:<port_number>",
+        langsmithApiKey: "your-langsmith-api-key",
+        agents: [{ 
+          name: 'travel', 
+          description: 'A travel assistant that can help with planning trips.' 
+        }]
+      }),
+    ],
 });
 
 // ...
@@ -115,9 +134,8 @@ Want to learn more about multi-agent routing? Checkout out the [multi-agent conc
 </CopilotKit>
 ```
 
-This will ensure that every request is sent to the `travel` agent. Its worth noting that agent should be 
-the same name as defined in `agent/langgraph.json` and in step 1.
-
+This will ensure that every request is sent to the `travel` agent. The `travel` name is defined in the [agents/langgraph.json](https://github.com/CopilotKit/CopilotKit/blob/main/examples/coagents-travel/agent/langgraph.json)
+file. When we deploy our agent to Copilot Cloud this is automatically handled for us. When self-hosting, we need to specify the name of the agent in the `langGraphPlatformEndpoint` constructor.
 </Step>
 <Step>
 

docs/content/docs/coagents/tutorials/ai-travel-app/step-5-stream-progress.mdx

@@ -173,8 +173,8 @@ All we need to do is tell CopilotKit to conditionally render the `search_progres
 
 ```tsx title="ui/lib/hooks/use-trips.tsx"
 // ...
-// [!code word:useCoAgentStateRender:1]
-import { useCoAgent, useCoAgentStateRender, useCopilotAction } from "@copilotkit/react-core"; 
+import { useCoAgent } from "@copilotkit/react-core"; // [!code --] 
+import { useCoAgent, useCoAgentStateRender } from "@copilotkit/react-core"; // [!code ++]
 import { SearchProgress } from "@/components/SearchProgress"; // [!code ++]
 
 export const TripsProvider = ({ children }: { children: ReactNode }) => {

docs/content/docs/coagents/tutorials/ai-travel-app/step-6-human-in-the-loop.mdx

@@ -137,8 +137,8 @@ we'll be adding `useCopilotAction` hooks for each tool call with the `renderAndW
 ```typescript title="ui/lib/hooks/use-trips.tsx"
 // ...
 import { AddTrips, EditTrips, DeleteTrips } from "@/components/humanInTheLoop"; // [!code ++]
-// [!code word:useCopilotAction:1]
-import { useCoAgent, useCoAgentStateRender, useCopilotAction } from "@copilotkit/react-core";
+import { useCoAgent, useCoAgentStateRender } from "@copilotkit/react-core"; // [!code --]
+import { useCoAgent, useCoAgentStateRender, useCopilotAction } from "@copilotkit/react-core"; // [!code ++]
 // ...
 
 export const TripsProvider = ({ children }: { children: ReactNode }) => {