Docs for GitHub copilot canvas extension

docs/assets/scss/_sidebar-tree.scss

@@ -64,6 +64,10 @@
         }
     }
 
+    .sidebar-new-badge {
+        font-size: .6em;
+    }
+
     a {
         font-size: .9rem;
         &:hover {

docs/content/integrations/_index.md

@@ -4,4 +4,5 @@ title: "Integrations"
 linkTitle: "Integrations"
 description: "Use Radius with other common tools"
 weight: 800
+new_badge: true
 ---

docs/content/integrations/github-copilot-app/_index.md

@@ -0,0 +1,49 @@
+---
+type: docs
+title: "GitHub Copilot app integration"
+linkTitle: "GitHub Copilot app"
+weight: 1
+new_badge: true
+description: "Use Radius with the GitHub Copilot app to model, visualize, configure, and deploy applications"
+hide_preview_release_banner: true
+---
+
+{{% alert title="Preview release" color="info" %}}
+The Radius Canvas extension preview supports containerized applications deployed to Azure.
+{{% /alert %}}
+
+The Radius integration for the GitHub Copilot app helps you understand, model, and deploy applications directly from your source code repository. Ask Copilot to analyze your repository and Radius creates an application model that captures your workloads, dependencies, connections, and infrastructure requirements. You can review the model visually in the Radius Canvas extension, configure a target Radius Environment, and plan and deploy the Application, all from within the GitHub Copilot app.
+
+## How Radius works with GitHub Copilot app
+
+The Radius integration for the GitHub Copilot app is available as the `radius` plugin. The plugin brings together Radius skills, the Radius Canvas extension, and GitHub Actions workflows.
+
+**Radius skills** let you work with your application through natural language instructions. They help Copilot analyze the source code repository, create and update application definitions, and perform Radius operations on your behalf.
+
+**Radius Canvas extension** provides the visual experience. It displays the **Application graph**, shows changes to the application model, previews how the Application will be deployed to an Environment, and enables you to deploy Applications.
+
+**GitHub Actions workflows** support Environment creation and credential verification, deploy Applications, and delete deployments. The Radius Canvas extension configures the Radius workflow templates for the Application and Environment, then adds the required workflow files to the application repository.
+
+## What you can do
+
+With the Radius integration for GitHub Copilot, you can:
+
+- **Model an application from an existing repository.** Radius analyzes application code and configuration to generate an application definition that captures workloads, resources, and connections.
+- **Visualize the application.** Use the Radius Canvas extension to visualize workloads, resources, and connections in the **Application graph**, along with the source code reference for each component.
+- **Understand application changes.** Compare application models across branches to see how changes to the source code affect the application architecture and deployment requirements.
+- **Configure the Environment.** Create and configure a Radius Environment for the application's deployment target.
+- **Preview deployment infrastructure.** See the Application and supporting infrastructure Radius plans to deploy before creating cloud resources.
+- **Deploy through GitHub Actions.** Generate a workflow that provisions the required infrastructure and deploys the Application.
+- **View deployed Applications.** Follow deployment status and inspect the Application running in the selected Environment.
+- **Keep deployment artifacts with your code.** Radius artifacts are stored in the repository so the application model and deployment configuration can be versioned and reused across branches and commits.
+
+## From source code to deployed application
+
+The Radius Canvas extension takes your Application through four stages:
+
+1. **Model:** Copilot analyzes the repository and creates an application definition in `.radius/app.bicep`.
+2. **Plan:** Select a Radius Environment to see how the Application's requirements will be fulfilled for that deployment target.
+3. **Deploy:** Deploy the Application and its infrastructure through GitHub Actions and view the resulting deployment in the Radius Canvas extension.
+4. **Diff:** Compare application models across branches to see how changes to the source code affect the application architecture and deployment requirements.
+
+Because each stage uses the same application definition, the application model you review is also the model Radius uses to plan and deploy the Application.

docs/content/integrations/github-copilot-app/canvas-extension/index.md

@@ -0,0 +1,170 @@
+---
+type: docs
+title: "Model, visualize, and deploy applications with the Radius Canvas extension"
+linkTitle: "Radius Canvas extension"
+weight: 2
+description: "Use the Radius Canvas extension to model, visualize, and deploy applications in the GitHub Copilot app"
+hide_preview_release_banner: true
+---
+
+{{% alert title="Preview release" color="info" %}}
+The Radius Canvas extension preview supports containerized applications deployed to Azure.
+{{% /alert %}}
+
+## Prerequisites
+
+- The latest version of the [GitHub Copilot app](https://docs.github.com/en/copilot/concepts/agents/github-copilot-app).
+- An Azure subscription.
+- An [Azure Kubernetes Service (AKS) cluster](https://learn.microsoft.com/azure/aks/learn/quick-kubernetes-deploy-cli).
+- The [Azure CLI](https://learn.microsoft.com/cli/azure/install-azure-cli). Run [`az login`](https://learn.microsoft.com/cli/azure/authenticate-azure-cli-interactively) before you begin.
+- The [GitHub CLI](https://cli.github.com/). Run [`gh auth login`](https://cli.github.com/manual/gh_auth_login) with package and workflow access before you begin:
+
+  ```bash
+  gh auth login --scopes read:packages,write:packages,workflow
+  ```
+
+- A GitHub repository with a containerized application. You must own the repository or have write access to it. Fork the repository if necessary.
+
+### Sample repositories
+
+You can use your own application or fork one of these open-source samples:
+
+- [Docker Example Voting App](https://github.com/dockersamples/example-voting-app)
+- [AKS Store Demo](https://github.com/Azure-Samples/aks-store-demo)
+- [Todoapp](https://github.com/dockersamples/todo-list-app/)
+- [Google Cloud Microservices Demo](https://github.com/GoogleCloudPlatform/microservices-demo)
+
+## Step 1: Install the plugin
+
+1. Open the GitHub Copilot app.
+2. Open **Settings** in the bottom-left corner, and then select **Plugins**.
+3. Select the dropdown next to **Install**, and then select **Add marketplace**.
+
+   {{< image src="open-add-marketplace-menu.png" alt="Plugins settings with the Install menu open and Add marketplace selected" width=800px >}}
+
+4. Enter `radius-project/ai-extensions`, and then select **Add marketplace**.
+
+   {{< image src="add-radius-marketplace.png" alt="Add marketplace dialog with radius-project/ai-extensions entered as the marketplace source" width=800px >}}
+
+5. In the `radius-plugins` marketplace, install the `radius-edge` plugin.
+
+   {{< image src="install-radius-plugin.png" alt="Radius plugins marketplace showing the radius-edge plugin available to install" width=700px >}}
+
+6. Restart your Copilot session so the skills and Radius Canvas extension become available.
+
+The plugin bundles the Radius skills and Radius Canvas extension into one installation. After installation, use the plugin's three-dot menu to update or uninstall it. Adding the Radius marketplace manually is temporary. The plugin will later be available from the `awesome-copilot` marketplace.
+
+## Step 2: Model your Application
+
+1. Create a new Copilot session. Select **GitHub repository**, and then add the repository you want to model.
+
+   {{< image src="select-github-repository.png" alt="GitHub Copilot app menu for starting a session from a GitHub repository" width=500px >}}
+
+2. In the chat, enter **Show me the application graph**.
+
+   {{< image src="prompt-application-graph.png" alt="GitHub Copilot app chat prompt asking Copilot to show the application graph" width=800px >}}
+
+   Copilot runs the Radius app-modeling skill. The skill analyzes your source code, manifests, and Dockerfiles, identifies your workloads and their dependencies, generates an application definition, and writes it into your repository. The Radius Canvas extension opens and renders the definition as an interactive **Application graph**.
+
+   {{< image src="modeled-application-graph-create-environment.png" alt="Radius Canvas extension Modeled view with the Create Environment action" width=800px >}}
+
+   {{% alert title="Radius Canvas extension troubleshooting" color="info" %}}
+   If the Radius Canvas extension does not open, ask Copilot to `Fix my Radius extension`. This invokes the Radius repair skill, which copies the required Radius Canvas extension files into place.
+   {{% /alert %}}
+
+   The **Modeled** view visualizes the generated application definition `.radius/app.bicep` file. The graph represents the workloads, routes, backing services, and connections Radius identified in the repository.
+
+   Review the connections in the graph:
+
+   - Verify that all application workloads appear in the graph.
+   - Check that the graph includes the expected backing services and infrastructure dependencies.
+   - Ensure that the connections between resources accurately represent the application architecture.
+   - Select **View source code** to open the file where Radius detected the service or dependency.
+
+3. Select **Create Environment** next to the **Modeled** view to begin configuring the Environment and planning the deployment.
+
+## Step 3: Configure your Environment
+
+An Environment defines where your Application runs and the infrastructure available to it. After you select **Create Environment**, the Radius Canvas extension opens the Environment configuration flow.
+
+1. Under **Choose Cloud credentials**, open the credential profile dropdown, and then select **Create new profile**.
+
+   {{< image src="choose-cloud-credentials.png" alt="Choose cloud credentials step with the option to create a credential profile" width=800px >}}
+
+2. Enter a profile name, select **Azure** as the provider, and enter your Azure tenant ID and subscription.
+
+   {{< image src="create-azure-credential-profile.png" alt="Create Credential Profile form for an Azure tenant and subscription" width=800px >}}
+
+3. Select **Verify credentials**.
+4. After verification succeeds, select **Save and continue**.
+5. Next, enter a name for the Environment and select the GitHub account and the saved credential profile under **Connect GitHub to a cloud**.
+
+   {{< image src="connect-github-to-cloud.png" alt="Create Environment form connecting a GitHub account to an Azure credential profile" width=800px >}}
+
+6. Under **Deploy identity**, the Microsoft Entra app registration name is already populated.
+7. Under **Infrastructure**, select the Azure resource group and AKS cluster. Select an existing Kubernetes namespace or enter a namespace such as `my-app`.
+8. Select **Create the Environment**. You can follow the status of the Environment configuration.
+
+   {{< image src="environment-creation-progress.png" alt="Environment creation progress showing deploy identity authorization, configuration, and credential verification" width=800px >}}
+
+   Radius establishes OIDC trust with GitHub Actions, so deployment workflows authenticate with short-lived credentials instead of long-lived secrets stored in the repository.
+
+## Step 4: Plan the deployment
+
+When the Environment configuration is complete, the Radius Canvas extension displays **View planned graph**, which opens the **Planned** view.
+
+1. Confirm that the correct Application, branch, and Environment are selected.
+
+   {{< image src="planned-application-graph.png" alt="Radius Canvas extension Planned view showing Application workloads and supporting infrastructure" width=800px >}}
+
+2. Review the planned Application and supporting infrastructure.
+3. Confirm how Radius will deploy each workload and provide its infrastructure dependencies in the selected Environment.
+
+Viewing the **Planned** view does not deploy or change cloud resources.
+
+## Step 5: Deploy your Application
+
+Select **Deploy Application**.
+
+{{< image src="deploy-application.png" alt="Deployments view for selecting an Application, Environment, and branch to deploy" width=800px >}}
+
+The Radius Canvas extension opens the **Deployments** view, where you can monitor deployment progress and open the GitHub Actions run. Radius generates a GitHub Actions workflow that provisions the required infrastructure and deploys the Application to the selected Environment. The workflow is committed to your repository, so you can review it before it runs and maintain it alongside your application code.
+
+When the deployment completes, return to the **Application graph** and open the **Deployed** view to see the Application and its resources running in the Environment.
+
+{{< image src="deployed-application-graph.png" alt="Deployed view of the Application graph" width=800px >}}
+
+## Step 6: Access your Application
+
+In the Copilot chat, enter **Access my deployed application**.
+
+Copilot sets up port forwarding and provides a URL to access the deployed Application.
+
+## Step 7: Clean up
+
+1. In the **Deployments** view, select **Delete Deployment**, and then confirm the deletion.
+2. Monitor the deletion workflow until it completes. Radius deletes the Application and the infrastructure resources owned by it.
+3. If you no longer need the Radius Environment, open the **Environments** view and delete it.
+
+Deleting the Radius deployment or Environment does not delete the AKS cluster or Azure resource group.
+
+## Compare Application changes
+
+Make changes to your Application on a branch, and then open the **Diff** view to compare the updated Application against `main`.
+
+1. Select your Application.
+2. Select `main` as the **Base** branch.
+3. Select the branch containing your changes as the **Head** branch.
+4. Review which components, connections, and dependencies your changes add, remove, or modify.
+
+You can generate a Markdown summary of the **Diff** view and post it as part of a pull request comment, so reviewers can see the architectural impact alongside the code.
+
+{{< image src="application-graph-diff.png" alt="Radius Canvas extension Diff view comparing Application resources and connections between two branches" width=800px >}}
+
+## Report bugs and feedback
+
+Before opening an issue, check the [existing Radius AI extensions backlog](https://github.com/orgs/radius-project/projects/23/views/14?layout=table) for a matching report.
+
+Submit bugs and feedback with the [feedback or bug report form](https://github.com/radius-project/ai-extensions/issues/new?template=feedback-or-bug-report.yml). You can also open the form from the feedback button in the bottom-right corner of the Radius Canvas extension.
+
+{{< image src="feedback.png" alt="Feedback button in the Radius Canvas extension" width=250px >}}

docs/layouts/_td-content-after-header.html

@@ -9,6 +9,8 @@
   list) without editing individual Markdown files. The markup mirrors the Docsy
   `alert` shortcode (color="warning").
 */ -}}
+{{- if not .Params.hide_preview_release_banner }}
 <div class="alert alert-warning" role="alert">
   <p>❗️ <strong>Preview Release</strong>: This documentation covers a preview of Radius which uses different Resource Types from the current release. Enable it by passing the <code>--preview</code> to the Radius CLI or setting<code>RADIUS_PREVIEW=true</code>.</p>
 </div>
+{{- end }}

docs/layouts/partials/sidebar-tree.html

@@ -145,7 +145,10 @@
         {{- end -}}
         <span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}">
           {{- $s.LinkTitle -}}
-        </span> {{- /**/ -}}
+        </span>
+        {{- if $s.Params.new_badge }}
+          <span class="badge bg-primary rounded-pill ms-1 sidebar-new-badge">New</span>
+        {{- end }} {{- /**/ -}}
       </a> {{- /**/ -}}
     </label>
     {{ else -}}
@@ -170,7 +173,11 @@
         {{- if and $treeRoot $s.Params.sidebar_root_for site.Params.ui.sidebar_root_enabled }} td-sidebar-root-up-icon{{ end -}}
       ">
         {{- $s.LinkTitle -}}
-      </span></a>
+      </span>
+      {{- if $s.Params.new_badge }}
+        <span class="badge bg-primary rounded-pill ms-1 sidebar-new-badge">New</span>
+      {{- end }}
+      </a>
     {{- end -}}
     {{ if $withChild -}}
     {{ $ulNr := add $ulNr 1 }}

radius.code-workspace

@@ -0,0 +1,14 @@
+{
+	"folders": [
+		{
+			"path": "../ai-extensions"
+		},
+		{
+			"path": "../blog"
+		},
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}