diff --git a/packages/app/bundles/masks.ts b/packages/app/bundles/masks.ts
index 9a70d9aa2..4da6f91b1 100644
--- a/packages/app/bundles/masks.ts
+++ b/packages/app/bundles/masks.ts
@@ -22,6 +22,7 @@ import logsMasks from 'protolib/bundles/logs/masks'
 import playwrightMasks from 'protolib/bundles/playwright/masks'
 import networkMasks from 'protolib/bundles/network/masks'
 import stateMachineMasks from 'protolib/bundles/stateMachines/masks'
+import agentsMasks from 'protolib/bundles/agents/agents/masks'
 import { paths } from './flows';
 
 export const getFlowsCustomComponents = (path: string, queryParams: {}) => {
@@ -58,8 +59,9 @@ export const getFlowsCustomComponents = (path: string, queryParams: {}) => {
         ...discordMasks,
         ...logsMasks,
         ...playwrightMasks,
-        ...networkMasks, 
-        ...stateMachineMasks
+        ...networkMasks,
+        ...stateMachineMasks, 
+        ...agentsMasks
     ]
     return []
 }
diff --git a/packages/protolib/src/bundles/agents/agents/context/CreateAgent.ts b/packages/protolib/src/bundles/agents/agents/context/CreateAgent.ts
deleted file mode 100644
index b6ec1a7ba..000000000
--- a/packages/protolib/src/bundles/agents/agents/context/CreateAgent.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { ProtoAgent } from 'agents'
-export default function (agentName) {
-    return ProtoAgent.mqtt(agentName)
-}
diff --git a/packages/protolib/src/bundles/agents/agents/context/index.ts b/packages/protolib/src/bundles/agents/agents/context/index.ts
index 548faf90c..8d98f8892 100644
--- a/packages/protolib/src/bundles/agents/agents/context/index.ts
+++ b/packages/protolib/src/bundles/agents/agents/context/index.ts
@@ -1,5 +1,5 @@
-import CreateAgent from "./CreateAgent"
+import spawnAgent from "./SpawnAgent"
 
 export default {
-    CreateAgent
+    spawnAgent
 }
\ No newline at end of file
diff --git a/packages/protolib/src/bundles/agents/agents/context/spawnAgent.ts b/packages/protolib/src/bundles/agents/agents/context/spawnAgent.ts
new file mode 100644
index 000000000..d45566dc2
--- /dev/null
+++ b/packages/protolib/src/bundles/agents/agents/context/spawnAgent.ts
@@ -0,0 +1,28 @@
+import { ProtoAgent } from 'agents'
+
+export default function (options: {
+    agentName: string,
+    connectionType: string,
+    subsystems: object[],
+    host: string,
+    hostPort: number,
+    onConnect: () => void
+}) {
+    const {
+        agentName,
+        connectionType,
+        subsystems,
+        host,
+        hostPort,
+        onConnect,
+    } = options
+
+    switch (connectionType) {
+        case "mqtt":
+            const agent = ProtoAgent.mqtt(agentName).configure(subsystems)
+            agent.on("connect", onConnect)
+            agent.connect(host, hostPort)
+        default:
+            return ProtoAgent.mqtt(agentName)
+    }
+}
diff --git a/packages/protolib/src/bundles/agents/agents/masks/SpawnAgent.tsx b/packages/protolib/src/bundles/agents/agents/masks/SpawnAgent.tsx
new file mode 100644
index 000000000..4f23edc4f
--- /dev/null
+++ b/packages/protolib/src/bundles/agents/agents/masks/SpawnAgent.tsx
@@ -0,0 +1,79 @@
+import { Node, NodeOutput, FallbackPort, NodeParams, filterConnection, getId, connectNodes, filterObject, restoreObject } from 'protoflow';
+import { useColorFromPalette } from 'protoflow/src/diagram/Theme'
+import { Split } from '@tamagui/lucide-icons';
+import { agentBusTypes } from './index';
+
+const SpawnAgent = ({ node = {}, nodeData = {}, children }: any) => {
+  const color = useColorFromPalette(10)
+
+  return (
+    <Node icon={Split} node={node} isPreview={!node.id} title='Spawn Agent' color={color} id={node.id} skipCustom={true}>
+      <p style={{ fontSize: "22px" }}>Client</p>
+      <NodeParams id={node.id} params={[{ label: 'Agent name', field: 'mask-agentName', type: 'input' }]} />
+      <NodeParams id={node.id} params={[{ label: 'Exposed Subsystems', field: 'mask-subsystems', type: 'input' }]} />
+      <div style={{ height: '30px' }} />
+      <p style={{ fontSize: "22px" }}>Server</p>
+      <NodeParams id={node.id} params={[{ label: 'Host', field: 'mask-host', type: 'input', }]} />
+      <NodeParams id={node.id} params={[{ label: 'Host Port', field: 'mask-hostPort', type: 'input', }]} />
+      <NodeParams id={node.id} params={[{ label: 'Connection type', field: 'mask-connectionType', type: 'select', data: agentBusTypes }]} />
+      <div style={{ height: '30px' }} />
+      <p style={{ fontSize: "22px" }}>Handlers</p>
+      <NodeOutput id={node.id} type={'input'} label={'On Connect'} vars={[]} handleId={'mask-onConnect'} />
+    </Node>
+  )
+}
+
+export default {
+  id: 'agents.spawnAgent',
+  type: 'CallExpression',
+  category: "Agents",
+  keywords: ["Agents", "remote", "connection"],
+  check: (node, nodeData) => {
+    return node.type == "CallExpression" && nodeData.to?.startsWith('context.agents.spawnAgent')
+  },
+  getComponent: (node, nodeData, children) => <SpawnAgent node={node} nodeData={nodeData} children={children} />,
+  filterChildren: filterObject({
+    keys: {
+      agentName: 'input',
+      connectionType: 'input',
+      subsystems: 'input',
+      host: 'input',
+      hostPort: 'input',
+      onConnect: 'output',
+    }
+  }),
+  restoreChildren: restoreObject({
+    keys: {
+      agentName: 'input',
+      connectionType: 'input',
+      subsystems: 'input',
+      host: 'input',
+      hostPort: 'input',
+      onConnect: {
+        params: { 'mask-onConnect': {}, }
+      },
+    }
+  }),
+  getInitialData: () => {
+    return {
+      await: true,
+      to: 'context.agents.spawnAgent',
+      "mask-agentName": {
+        value: "",
+        kind: "StringLiteral"
+      },
+      "mask-subsystems": {
+        value: [],
+        kind: "Identifier"
+      },
+      "mask-host": {
+        value: "127.0.0.1",
+        kind: "StringLiteral"
+      },
+      "mask-hostPort": {
+        value: 1883,
+        kind: "Identifier"
+      },
+    }
+  }
+}
diff --git a/packages/protolib/src/bundles/agents/agents/masks/index.tsx b/packages/protolib/src/bundles/agents/agents/masks/index.tsx
index 13ee1be3c..76618e2ef 100644
--- a/packages/protolib/src/bundles/agents/agents/masks/index.tsx
+++ b/packages/protolib/src/bundles/agents/agents/masks/index.tsx
@@ -1,3 +1,6 @@
-export default [
+import SpawnAgent from "./SpawnAgent";
 
+export const agentBusTypes = ["mqtt"]
+export default [
+  SpawnAgent
 ];
\ No newline at end of file