wundergraph · BrendanBondurant · Oct 21, 2025 · Oct 21, 2025 · Oct 21, 2025 · Oct 21, 2025
@@ -25,7 +25,7 @@ To install the MCP Server, you'll need to create an API key and configure your I
 
 You can create an API key in [Cosmo Studio](https://cosmo.wundergraph.com).
 
-![Create API key](/images/studio/create_api_key.png)
+![Graphs section with Members tab](/images/studio/graphs-section-with-members-tab.png)
 
 ### 2. Configure your IDE
 

@@ -10,18 +10,30 @@ icon: slack
   <Step title= 'Click the "Slack Intergration" tab'/>
   <Step title= 'Click on the "Integrate" button.'>
     <Frame caption="Navigating to Notifications: Slack integration">
-      <img src="/images/studio/image-42.png" />
+      <img 
+        src="/images/studio/create-slack-integration.png" 
+        alt="Create Slack integration in Integrations section of Cosmo Docs" 
+        title="Create Slack integration" 
+      />
     </Frame>
 </Step>
 <Step title= 'Select the channel where you want to receive messages and click on the "Allow" button.'>
-<Frame>
-  <img src="/images/studio/image-43.png" />
-</Frame>
+    <Frame>
+      <img 
+        src="/images/studio/slack-access-request-for-wundergraph-cosmo.png" 
+        alt="WunderGraph Cosmo requesting access to Slack workspace with permission options" 
+        title="Slack access request for WunderGraph Cosmo" 
+      />
+    </Frame>
 </Step>
 <Step title= 'Give a name to the integration and select the events about which you wish to be notified.'>
-  <Frame caption="The Create Slack Integration modal">
-    <img src="/images/studio/image-44.png" />
-  </Frame>
+    <Frame caption="Create Slack Integration modal">
+      <img 
+        src="/images/studio/slack-integration-for-schema-updates.png" 
+        alt="Create Slack integration for federated graph schema update events" 
+        title="Slack integration for schema updates" 
+      />
+    </Frame>
 </Step>
 <Step title= 'Lastly, click on the "Create" button, and now your Slack integration is complete.'/>
 </Steps>
@@ -77,12 +77,20 @@ const isVerified = verifySignature(JSON.stringify(req.body), req.headers['x-cosm
   <Step title="Navigate to the notifications page on Cosmo"/>
   <Step title="In the Webhooks tab, click on the Create button.">
 <Frame>
-  <img src="/images/studio/webhooks.png" />
+  <img
+    src="/images/studio/webhook-configuration-page.png"
+    alt="Cosmo Studio configuration page for creating new organization webhooks."
+    title="Webhook configuration page"
+  />
 </Frame>
 </Step>
 <Step title="Provide the endpoint of the webhook, and the webhook secret for verification and then select the events you want to be notified of.">
 <Frame>
-  <img src="/images/studio/create_webhook.png" />
+  <img
+    src="/images/studio/create-webhook-dialog.png"
+    alt="Create webhook dialog showing endpoint input, secret key, and schema update event selection."
+    title="Create webhook dialog"
+  />
 </Frame>
 </Step>
 <Step title="Lastly, click on the Create button."/>

@@ -7,7 +7,11 @@ sidebarTitle: Overview
 
 The API keys are used to authorize the user to perform actions using [wgc](/cli/intro) (Wundergraph Cosmo CLI Command). On the overview, we display all keys across the organization. Only members of role Admin and Developer have the ability to create new keys.
 <Frame>
-    <img src="/images/studio/api-key-list.png" />
+  <img
+    src="/images/studio/api-keys-management-page.png"
+    alt="Cosmo Studio API keys management page showing an organization API key list with options to create new keys."
+    title="API keys management page"
+  />
 </Frame>
 
 ### How to create an API Token
@@ -17,7 +21,11 @@ The API keys are used to authorize the user to perform actions using [wgc](/cli/
 * Give the API key a name, select the expiry, the group and then click on "Generate API key".
 
 <Frame>
-    <img src="/images/studio/create_new_api_key.png" />
+  <img
+    src="/images/studio/api-key-creation-dialog.png"
+    alt="Create API key dialog with fields for name, expiry, and group selection."
+    title="API key creation dialog"
+  />
 </Frame>
 
 * Once the API key is generated, it will be displayed for the user to copy it.
@@ -27,5 +35,9 @@ The API keys are used to authorize the user to perform actions using [wgc](/cli/
 </Info>
 
 <Frame>
-    <img src="/images/studio/new_api_key.png" />
+  <img
+    src="/images/studio/api-key-generation-and-copy-prompt.png"
+    alt="API key generated prompt showing a one-time view of the new key with copy and confirmation options."
+    title="API key generation and copy prompt"
+  />
 </Frame>
@@ -11,7 +11,11 @@ The configurable permissions provided are:-
 1. System for Cross-domain Identity Management (SCIM)
 
 <Frame caption="API key creation with permissions dialog">
-    <img src="/images/studio/api-key-permissions.png" />
+  <img
+    src="/images/studio/create-api-key-dialog.png"
+    alt="Cosmo Studio Create API Key dialog showing fields for name, expiry, group, and a permissions section for SCIM."
+    title="Create API Key dialog"
+  />
 </Frame>
 
 

@@ -9,5 +9,9 @@ Audit logs are crucial for several reasons. First, they provide a detailed recor
 Navigate to your organization's page and click on "Audit Log." You will see all audit logs arranged in descending order by their creation date. Each log entry is annotated with information about who performed the action, what was done, and when it occurred. Based on the icon next to the actor, you can determine if the action was performed directly by a user or through their API key. Additionally, several events generated from the Cosmo Platform can be identified accordingly.
 
 <Frame caption="Audit Log View">
-  <img src="/images/studio/audit-logs.png" />
+  <img
+    src="/images/studio/wundergraph-dashboard-overview.png"
+    alt="Cosmo Studio Audit Log showing user actions, namespaces, and timestamps for updates and creations."
+    title="WunderGraph dashboard overview"
+  />
 </Frame>
@@ -6,8 +6,12 @@ icon: file-plus-minus
 
 The schema changes are listed in a chronological order, with the most recent changes appearing at the top. Each entry provides specific details about what was added or removed from the schema. This includes changes to types, fields, directives, and any other elements that make up your federated graph's schema.
 
-<Frame caption="An changelog example on WunderGraph Cosmo">
-  <img src="/images/studio/image-14.png" />
+<Frame caption="A changelog example on WunderGraph Cosmo">
+  <img 
+    src="/images/studio/composition-updates-in-wundergraph-docs.png" 
+    alt="WunderGraph Docs showing recent Composition updates for Mutation and Subscription" 
+    title="Composition updates in WunderGraph Docs" 
+  />
 </Frame>
 
 

@@ -13,7 +13,11 @@ As part of our OpenTelemetry instrumentation, the router sends periodically data
 ## Routers
 
 <Frame caption="Cluster overview">
-  <img src="/images/studio/image-48.png" />
+  <img 
+    src="/images/studio/router-cluster-with-memory-stats.png" 
+    alt="Router cluster view showing 3 routers, memory usage, and cluster details" 
+    title="Router cluster with memory stats" 
+  />
 </Frame>
 
 The list displays all running router instances. Upon closer inspection, you can verify the currently deployed graph composition and vital metrics such as CPU and memory utilization. Here is a summary of all provided information:
@@ -36,8 +40,13 @@ The list displays all running router instances. Upon closer inspection, you can
   If your router fails to push uptime metrics for any reason, the instance will disappear. As long as one metric sample reaches us within 45 seconds, we assume the router is operational.
 </Note>
 
+
 <Frame caption="Instance details">
-  <img src="/images/studio/image-49.png" />
+  <img 
+    src="/images/studio/router-details-with-uptime-and-cpu-stats.png" 
+    alt="Router details view showing uptime, memory, and CPU usage in Cosmo Docs" 
+    title="Router details with uptime and CPU stats" 
+  />
 </Frame>
 
 If you click on a router instance, a summary displaying all the metrics available for your router instance will be shown. We will reserve this space to add additional metrics and diagrams in the future. If you have any ideas or requirements, please don't hesitate to make a [feature request](https://github.com/wundergraph/cosmo/issues/new?assignees=\&labels=enhancement%2Cneeds+triage\&projects=\&template=feature_request.yaml).
@@ -5,7 +5,11 @@ icon: books
 ---
 
 <Frame>
-    <img src="/images/studio/image-24.png" />
+  <img 
+    src="/images/studio/compositions-list-with-composes-status.png" 
+    alt="Cosmo Docs compositions list with green Composes status icons" 
+    title="Compositions list with Composes status" 
+  />
 </Frame>
 
 The highlights of the compositions page are as follows:
@@ -19,9 +23,17 @@ The highlights of the compositions page are as follows:
 * Understand what version is currently available to the router.
 
 <Frame>
-    <img src="/images/studio/image-25.png" />
+  <img 
+    src="/images/studio/schema-composed-successfully-without-changes.png" 
+    alt="Composed schema with no changes and trigger from [email protected] in Cosmo Docs" 
+    title="Schema composed successfully without changes" 
+  />
 </Frame>
 <br/>
 <Frame caption="Composition errors">
-    <img src="/images/studio/image-26.png" />
+  <img 
+    src="/images/studio/composition-error-from-missing-field.png" 
+    alt="Cosmo Docs composition error caused by missing schema field" 
+    title="Composition error from missing field" 
+  />
 </Frame>
@@ -4,8 +4,12 @@ description: "**Graph Pruning Linter** helps manage the cleanliness and efficien
 icon: "broom-wide"
 ---
 
-<Frame>
-  ![Graph Pruning Pn](/docs/images/studio/graph_pruning.png)
+<Frame caption="Graph Pruning Lint Rules Overview">
+  <img
+    src="/images/studio/graph-pruning-lint-rules-overview.png"
+    alt="Cosmo Studio Graph Pruning Linter interface showing rules for unused, deprecated, and deleted fields with severity and period settings."
+    title="Graph Pruning Lint Rules Overview"
+  />
 </Frame>
 
 ## Rules

@@ -6,15 +6,19 @@ sidebarTitle: Overview
 ---
 
 <Note>
-    To create, modify or delete groups, you need have RBAC enabled for your organization. This feature is available starting on the Scale plan.
+    To create, modify, or delete groups, you need to have RBAC enabled for your organization. This feature is available starting on the Scale plan.
 </Note>
 
-Groups allow you to manage teams, separate people access for specific resources and much more without managing them manually. Including the benefits of SCIM.
+Groups let you manage team access to specific resources without manual setup, and include the benefits of SCIM integration.
 
 Groups can be linked to both your organization members and your [API Keys](/studio/api-keys), enabling flexible and centralized access management.
 
 <Frame>
-  <img src="/images/studio/group-list.png" />
+  <img
+    src="/images/studio/groups-default-roles-overview.png"
+    alt="Cosmo Studio Groups page showing admin, developer, and viewer roles with member counts."
+    title="Groups — default roles overview"
+  />
 </Frame>
 
 ### How to create a group
@@ -23,7 +27,11 @@ Groups can be linked to both your organization members and your [API Keys](/stud
 * Give the group a name, an optional description and then click on **Create group**.
 
 <Frame>
-  <img src="/images/studio/create-group-dialog.png" />
+  <img
+    src="/images/studio/create-group-dialog.png"
+    alt="Create group dialog with name, description, and create button."
+    title="Create group dialog"
+  />
 </Frame>
 
 Once the group has been created, the group modification screen will show up. Here you can configure the [group rules](/studio/groups/group-rules).
@@ -46,18 +54,26 @@ To learn more about managing group rules refer to the [group rules](/studio/grou
 
 To delete an existing group, click on the three dots to the right of the groups table and click **Delete**. From there, one of two scenarios may occur.
 
-**Scenario 1**: The group have not been assigned to any member, API key and/or OIDC mapper.
+**Scenario 1**: The group has not been assigned to any member, API key and/or OIDC mapper.
 
 This is the simplest scenario, as you'll only need to fill the confirmation input and press the **Delete group** button.
 
 <Frame>
-    <img src="/images/studio/delete-group-dialog.png" />
+  <img
+    src="/images/studio/group-deletion-confirmation-dialog.png"
+    alt="Confirmation dialog for deleting a group with password entry."
+    title="Group deletion confirmation dialog"
+  />
 </Frame>
 
 **Scenario 2**: The group is being used by a member, API key and/or OIDC mapper.
 
 For this scenario, you'll be shown what is using the group and you'll need to select a group to move the objects using the group to. After that, you'll just have to fill the confirmation and press the **Delete group** button.
 
 <Frame>
-    <img src="/images/studio/delete-group-dialog2.png" />
-</Frame>
+  <img
+    src="/images/studio/group-deletion-with-reassignment-option.png"
+    alt="Confirmation dialog for deleting a group that requires selecting a new group. One member has been assigned to this group. One API key has been assigned to this group."
+    title="Group deletion with reassignment option"
+  />
+</Frame>
@@ -7,7 +7,11 @@ icon: "database"
 A **group rule** defines the roles and associated resources that determine what group members and API keys can access, as well as the level of permissions granted.
 
 <Frame caption="Group with no rules">
-    <img src="/images/studio/group-rules.png" />
+  <img
+    src="/images/studio/setting-viewer-access-rules.png"
+    alt="Cosmo Studio group configuration page showing viewer rules granting access to multiple resources."
+    title="Setting viewer access rules"
+  />
 </Frame>
 
 When a group rule doesn't have any explicit resources, the group will always have access to all resources within the organization.
@@ -23,15 +27,23 @@ In the same way, if a rule is limited to a single resource and that resource is
 You can assign multiple roles to a group using the `Add rule` button. If no group rules are configured, group members will not have access to any resources.
 
 <Frame caption="Role selector">
-    <img src="/images/studio/group-role-selector.png" />
+  <img
+    src="/images/studio/selecting-user-role-for-wundergraph.png"
+    alt="Cosmo Studio role selector for a group showing organization roles like Admin, Developer, and API Key Manager."
+    title="Selecting user role for wundergraph"
+  />
 </Frame>
 
 Each role type can only be added once per group. For example, you can assign the `Organization Admin` and `Organization Viewer` roles in the same group, but you cannot assign the same role type more than once. You could also add a `Graph Admin` role to that group, as long as each role type appears only once.
 
 The order in which roles are assigned does not affect how access checks are performed. For example, given the following group:
 
 <Frame>
-    <img src="/images/studio/group-example1.png" />
+  <img
+    src="/images/studio/wundergraph-rule-without-description.png"
+    alt="Cosmo Studio group rule editor showing roles for wundergraph without a description or namespace assigned."
+    title="Wundergraph rule without description"
+  />
 </Frame>
 
 The members for this group will have **Admin** access to the `default` namespace and **Viewer** to the `test` and any other namespace that may exist in the organization.
@@ -41,7 +53,11 @@ If the namespace `default` is deleted, the **Admin** role is no longer scoped an
 With this in mind, members of the following example will have **Organization Admin** access to all resources.
 
 <Frame>
-    <img src="/images/studio/group-example2.png"/>
+  <img
+    src="/images/studio/role-permissions-settings-page.png"
+    alt="Cosmo Studio settings page showing role permissions for Admin, Developer, and API Key Manager roles."
+    title="Role permissions settings page"
+  />
 </Frame>
 
 ### Organization Roles
@@ -75,7 +91,11 @@ Graph resources can be assigned in one of two ways:
 If no graphs are explicitly assigned, the group will have access to all graphs in the organization. Groups with the **Admin** role will also be able to create new graphs.
 
 <Frame caption="Graph resource selector">
-    <img src="/images/studio/group-graph-resource-selector.png" />
+  <img
+    src="/images/studio/rule-granting-full-access-to-resources.png"
+    alt="Cosmo Studio graph resource selector showing default and test namespaces with full access permissions."
+    title="Rule granting full access to resources"
+  />
 </Frame>
 
 ### Subgraph Roles
@@ -95,7 +115,11 @@ If no subgraph resources are assigned, the group will have access to all subgrap
 ## Resources
 
 <Frame caption="Graph resource selector">
-    <img src="/images/studio/update-group-screen.png" />
+  <img
+    src="/images/studio/rule-configuration-for-test-and-admin.png"
+    alt="Cosmo Studio rule configuration screen for test and admin namespaces showing one selected rule."
+    title="Rule configuration for test and admin"
+  />
 </Frame>
 
 Resources represent entities in your organization, including but not limited to:

@@ -11,6 +11,10 @@ If you're not currently a user on Cosmo, upon receiving an invitation, you'll ge
 If you're already a user on Cosmo and receive an invitation, you'll get an email that guides you to the invitations page. Once there, you'll have the option to either accept or decline the invitation.
 
 <Frame>
-  <img src="/images/studio/image-53.png" />
+  <img 
+    src="/images/studio/organization-invitation-prompt.png" 
+    alt="Invitation to join organization with Accept or Decline options in Cosmo Docs" 
+    title="Organization invitation prompt" 
+  />
 </Frame>