diff --git a/apps/canvas/front/src/App.tsx b/apps/canvas/front/src/App.tsx
index 794b433..a9fd3a6 100644
--- a/apps/canvas/front/src/App.tsx
+++ b/apps/canvas/front/src/App.tsx
@@ -8,12 +8,16 @@
 import { ProjectSelect } from "./ProjectSelect";
 import { Logs } from "./Monitoring";
 import { Overview } from "./Overview";
+import { ChatManager } from "./components/ChatManager";
+import { useAgents } from "./lib/state";
+import { Bot } from "lucide-react";
 
 export default function App() {
 	return (
 		<ReactFlowProvider>
 			<div className="h-screen flex flex-col p-1">
 				<AppImpl />
+				<ChatManager />
 				<Toaster />
 			</div>
 		</ReactFlowProvider>
@@ -21,6 +25,7 @@
 }
 
 function AppImpl() {
+	const agents = useAgents();
 	return (
 		<Tabs defaultValue="overview" className="flex-1 flex flex-col min-h-0">
 			<div className="flex justify-between border-b">
@@ -30,6 +35,18 @@
 					<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
 					<TabsTrigger value="config">Config</TabsTrigger>
 					<TabsTrigger value="integrations">Integrations</TabsTrigger>
+					{agents.map((a) => {
+						return (
+							<TabsTrigger
+								key={a.agentName}
+								value={`agent-${a.agentName}`}
+								className="flex flex-row items-center gap-1"
+							>
+								<Bot className="w-4 h-4" />
+								{a.agentName}
+							</TabsTrigger>
+						);
+					})}
 				</TabsList>
 				<ProjectSelect className="w-fit min-w-[150px]" />
 			</div>
@@ -48,6 +65,11 @@
 			<TabsContent value="monitoring" className="!mt-0 flex-1 min-h-0">
 				<Logs />
 			</TabsContent>
+			{agents.map((a) => (
+				<TabsContent value={`agent-${a.agentName}`} className="!mt-0 flex-1 min-h-0">
+					<iframe key={a.name} src={a.address} title={a.agentName} className="w-full h-full" />
+				</TabsContent>
+			))}
 		</Tabs>
 	);
 }