diff --git a/public/docs-static/img/agent-network/control-center/agent-network-control-center-components-panel.png b/public/docs-static/img/agent-network/control-center/agent-network-control-center-components-panel.png new file mode 100644 index 00000000..3d4db539 Binary files /dev/null and b/public/docs-static/img/agent-network/control-center/agent-network-control-center-components-panel.png differ diff --git a/public/docs-static/img/agent-network/control-center/agent-network-control-center-draft-connected.png b/public/docs-static/img/agent-network/control-center/agent-network-control-center-draft-connected.png new file mode 100644 index 00000000..1f065afa Binary files /dev/null and b/public/docs-static/img/agent-network/control-center/agent-network-control-center-draft-connected.png differ diff --git a/public/docs-static/img/agent-network/control-center/agent-network-control-center-edit-provider.png b/public/docs-static/img/agent-network/control-center/agent-network-control-center-edit-provider.png new file mode 100644 index 00000000..5f5ac098 Binary files /dev/null and b/public/docs-static/img/agent-network/control-center/agent-network-control-center-edit-provider.png differ diff --git a/public/docs-static/img/agent-network/control-center/agent-network-control-center-focus-policy.png b/public/docs-static/img/agent-network/control-center/agent-network-control-center-focus-policy.png new file mode 100644 index 00000000..719a1c1f Binary files /dev/null and b/public/docs-static/img/agent-network/control-center/agent-network-control-center-focus-policy.png differ diff --git a/src/components/NavigationDocs.jsx b/src/components/NavigationDocs.jsx index 84c5dcb1..f5bf6287 100644 --- a/src/components/NavigationDocs.jsx +++ b/src/components/NavigationDocs.jsx @@ -546,6 +546,7 @@ export const docsNavigation = [ { title: 'Quickstart', href: '/agent-network/quickstart' }, { title: 'Providers', href: '/agent-network/providers' }, { title: 'Clusters', href: '/agent-network/clusters' }, + { title: 'Control Center', href: '/agent-network/control-center' }, ], }, { diff --git a/src/pages/agent-network/control-center.mdx b/src/pages/agent-network/control-center.mdx new file mode 100644 index 00000000..0e178890 --- /dev/null +++ b/src/pages/agent-network/control-center.mdx @@ -0,0 +1,129 @@ +import {Note} from "@/components/mdx" + +export const description = + 'See which groups can reach which AI providers in Control Center, edit providers and agent policies in place, and stage new Agent Network access with Draft Mode.' + +# Agent Network in Control Center + +Agent Network is also available in [Control Center](/manage/control-center) for a better view of who can reach which AI provider. Alongside your peers, groups, and access control policies, it draws Agent Network **providers** and **agent policies** on the same canvas, so you can follow a group to the AI providers it is allowed to reach, edit them in place, and build new access with [Draft Mode](/manage/control-center/draft-mode). + + + **Permissions:** Viewing and changing providers and agent policies in Control Center requires access to Control Center and the same Agent Network permissions as on the **Agent Network** pages. The `Agent Network Admin` role has no access to Control Center, so it manages providers and policies from the **Agent Network** pages only. Learn more about [user roles](/manage/team/user-roles). + + +One example carries through the page: giving the `Engineers` group access to the **Anthropic API** provider. + +## How It Looks on the Canvas + +Agent Network adds two node types to the graph, and they read left to right like an access control policy: + +- **Agent policy:** a pill in the policy column, showing the policy name and a status dot (green when enabled, grey when disabled). It grants its source group access to one or more providers. See [Policies](/agent-network/policies). +- **Provider:** a card in the destination column, showing the provider's logo, name, and upstream URL, like `https://api.anthropic.com`. See [Providers](/agent-network/providers). + +So the path is **group → agent policy → provider**. Disabled policies and providers stay on the canvas, dimmed, so you can still see what they would grant. + +Agent Network nodes show up in the **Peers**, **Users**, and **Groups** views: + +- **Groups:** the providers the selected group can reach, through which agent policies. +- **Peers:** the providers reachable through any of the selected peer's groups. +- **Users:** the providers reachable through the groups of each of the user's peers. + +The **Networks** view does not show Agent Network nodes, because providers are not network resources. + +### Focus on a Policy or Provider + +When the graph gets busy, use [Focus Mode](/manage/control-center#focus-mode) to isolate one path. Right-click an agent policy or provider and choose **Focus**, or press `F` and then select the node. Everything unrelated dims, leaving only the groups and providers connected to it, and a **Focusing on** pill at the top of the canvas shows what is in focus. Close the pill to return to the full view. + +

+ Control Center in the Peer view, focused on an agent policy that connects to the Anthropic API provider, with unrelated nodes dimmed +

+ +## Edit Providers and Agent Policies in Place + +You do not have to leave Control Center to change Agent Network configuration. Click a node, or right-click it and choose **Edit**, to open the same editor you know from the Agent Network pages: + +- **Provider:** the **Edit Provider** dialog, with the **Provider** tab (provider, upstream URL, API key, display name) and the **Models** tab. +- **Agent policy:** the **Update Agent Policy** dialog, with the **Policy**, **Limits**, and **Guardrails** tabs. + +

+ The Edit Provider dialog opened from Control Center, showing the Anthropic API provider, its upstream URL, a masked API key, and the display name +

+ +In the live view, saving asks you to confirm, because the change applies to your account immediately. The right-click menu also offers: + +- **Disable / Enable:** turns the provider or policy off or on right away. +- **Delete:** removes it from your account after a confirmation. + +## Build Access in Draft Mode + +For a new provider, a new policy, or both at once, switch to **Draft** and stage the change before it goes live. Draft Mode works the same as for the rest of Control Center; see [Plan and Deploy Changes with Draft Mode](/manage/control-center/draft-mode) for the full workflow. + +### Add Agent Network Nodes + +Click **Add** in the toolbar (or press `C`) and open the **Agent Network** tab of the components panel: + +- **Add new:** a **Provider** node ("Connect an AI provider or gateway") and an **Agent Policy** node ("Authorize groups to reach providers"). +- **Existing providers** and **Existing agent policies:** the ones already in your account, ready to drag onto the canvas. Each existing policy shows how many groups and providers it connects. + +

+ The Draft Mode components panel on the Agent Network tab, listing the Provider and Agent Policy nodes, existing providers, and existing agent policies +

+ +You can also right-click the canvas and choose **New Agent Policy** or **New Agent Provider**. + +- **Dropping a Provider node** opens the **Connect Provider** dialog. The provider card lands on the canvas once you save it, and its creation is tracked in the draft. +- **Dropping an Agent Policy node** places a blank policy node. It becomes a tracked change once it has a source group and at least one provider. + +For our example, drag the existing **Anthropic API** provider and the existing `Engineers` group onto the canvas. If the provider does not exist yet, drop a new **Provider** node instead and connect it in the dialog. + +### Connect Groups to Policies and Providers + +Draw connections between nodes to wire up access. Unlike access control policies, the drag direction does not matter here: a group is always the source and a provider is always the destination. + +- **Group to provider:** opens the **Create Agent Policy** dialog prefilled with both, named after them (`Engineers → Anthropic API`). This is the quickest way to grant access. +- **Group to agent policy:** sets the policy's source group. +- **Agent policy to provider:** adds the provider to the policy. A policy can reach several providers. + +For our example, connect `Engineers` to **Anthropic API**. Before saving the policy, use the **Limits** and **Guardrails** tabs to cap spend and restrict the policy to the models the team actually uses, so the first version you deploy is already scoped. See [Token & Budget Limits](/agent-network/policies/limits) and [Guardrails](/agent-network/policies/guardrails). + +

+ A draft canvas where the new Engineers group connects through a new agent policy to the Anthropic API provider, with two pending changes on the Review & Deploy button +

+ +### Review and Deploy + +Click **Review & Deploy** to see every change with the request it sends, like `POST /agent-network/policies` for the new `Engineers → Anthropic API` policy. Provider API keys are masked in the preview. + +On deploy, groups are created first, then providers, then agent policies, so a new policy can point at a group and provider created moments earlier in the same batch. + +**Approve & Deploy** stays disabled while a policy is unfinished. The review flags it when: + +- an agent policy has no source group or no provider, +- an agent policy points at a provider or group that is marked for deletion, or +- an agent policy points at a draft provider that was removed from the draft. + +### Remove and Delete + +As elsewhere in Draft Mode, **Remove** takes a node you created in the draft off the canvas, and **Delete** marks an existing provider or agent policy for deletion at deploy. Removing a draft provider also drops any new draft policy that pointed at it. + +## Recap + +- Control Center draws Agent Network as **group → agent policy → provider**, in the Peers, Users, and Groups views. +- Click a provider or agent policy to edit it in place; live saves confirm first and apply immediately. +- In Draft Mode, add providers and agent policies from the **Agent Network** tab, then connect `Engineers` to **Anthropic API** to create a scoped policy in one step. +- Review shows the exact API requests, and the batch deploys groups, then providers, then policies. + +## Related Docs + +- [Control Center overview](/manage/control-center) +- [Plan and Deploy Changes with Draft Mode](/manage/control-center/draft-mode) +- [Agent Network Providers](/agent-network/providers) +- [Agent Network Policies](/agent-network/policies) diff --git a/src/pages/manage/control-center/draft-mode.mdx b/src/pages/manage/control-center/draft-mode.mdx index 6ee5ac82..dfe0f048 100644 --- a/src/pages/manage/control-center/draft-mode.mdx +++ b/src/pages/manage/control-center/draft-mode.mdx @@ -75,6 +75,8 @@ Then drag a **Group** onto the canvas for the access we are about to grant. **Network** and **Resource** templates work the same way and integrate with [Networks](/manage/networks); connecting a policy to a network node asks which of its resources the policy should target. +When Agent Network is enabled, an **Agent Network** tab adds **Provider** and **Agent Policy** nodes; see [Agent Network in Control Center](/agent-network/control-center#build-access-in-draft-mode). + ### Undo and Redo `Ctrl/⌘+Z` undoes any canvas action, `Shift+Ctrl/⌘+Z` redoes it. diff --git a/src/pages/manage/control-center/index.mdx b/src/pages/manage/control-center/index.mdx index 75825f2d..77a4a3e7 100644 --- a/src/pages/manage/control-center/index.mdx +++ b/src/pages/manage/control-center/index.mdx @@ -88,6 +88,10 @@ Use this to see who can access resources in your routed [networks](/manage/netwo - The network node shows its resources. Connecting lines display the port allowed by the policy and which groups have access. - Click any policy chip to edit it in the standard editor. NetBird Networks and routing peers enable access to private subnets and IP resources. +### Agent Network + +When [Agent Network](/agent-network) is enabled for your account, the **Peers**, **Users**, and **Groups** views also show its providers and agent policies, so you can see which groups can reach which AI providers. You can edit providers and agent policies from the canvas and build new ones in Draft Mode. See [Agent Network in Control Center](/agent-network/control-center). + ## Focus Mode When the graph gets busy, focus a single node to see only what is connected to it. Right-click a node and choose **Focus**, or press `F` and then select the node. @@ -133,3 +137,4 @@ For changes that span several components, **Draft Mode** lets you stage the whol - [Apply posture checks to policies](/manage/access-control/posture-checks) - [Networks and routing peers](/manage/networks) - [MSP portal overview](/manage/for-partners/msp-portal) +- [Agent Network in Control Center](/agent-network/control-center)