chore: add tasks-docker first in starter templates list (#20169)

This PR: - Adds the tasks-docker template to the embeded template examples - Makes the tasks-docker template the leading template on the starter-templates page - Makes the tasks-docker template the leading template on the featured templates list (in `EmptyTemplates`) closes https://github.com/coder/coder/issues/19718 https://github.com/user-attachments/assets/c582d8c0-a32b-48c4-886b-93a052a965a5 --------- Co-authored-by: Claude <noreply@anthropic.com>
2026-09-24 15:04:27 +08:00 · 2025-10-17 13:09:50 -05:00
parent f6526b789a
commit b0a045cba0
11 changed files with 511 additions and 35 deletions
@@ -6,7 +6,7 @@ USAGE:
  Get started with a templated template.

 OPTIONS:
-      --id aws-devcontainer|aws-linux|aws-windows|azure-linux|digitalocean-linux|docker|docker-devcontainer|docker-envbuilder|gcp-devcontainer|gcp-linux|gcp-vm-container|gcp-windows|kubernetes|kubernetes-devcontainer|nomad-docker|scratch
+      --id aws-devcontainer|aws-linux|aws-windows|azure-linux|digitalocean-linux|docker|docker-devcontainer|docker-envbuilder|gcp-devcontainer|gcp-linux|gcp-vm-container|gcp-windows|kubernetes|kubernetes-devcontainer|nomad-docker|scratch|tasks-docker
          Specify a given example template by ID.

 ———
@@ -13,8 +13,8 @@ coder templates init [flags] [directory]

 ### --id

-|      |                                                                                                                                                                                                                                                                |
-|------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Type | <code>aws-devcontainer\|aws-linux\|aws-windows\|azure-linux\|digitalocean-linux\|docker\|docker-devcontainer\|docker-envbuilder\|gcp-devcontainer\|gcp-linux\|gcp-vm-container\|gcp-windows\|kubernetes\|kubernetes-devcontainer\|nomad-docker\|scratch</code> |
+|      |                                                                                                                                                                                                                                                                              |
+|------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Type | <code>aws-devcontainer\|aws-linux\|aws-windows\|azure-linux\|digitalocean-linux\|docker\|docker-devcontainer\|docker-envbuilder\|gcp-devcontainer\|gcp-linux\|gcp-vm-container\|gcp-windows\|kubernetes\|kubernetes-devcontainer\|nomad-docker\|scratch\|tasks-docker</code> |

 Specify a given example template by ID.
@@ -205,5 +205,19 @@
 		"icon": "/emojis/1f4e6.png",
 		"tags": [],
 		"markdown": "\n# A minimal Scaffolding for a Coder Template\n\nUse this starter template as a basis to create your own unique template from scratch.\n"
+	},
+	{
+		"id": "tasks-docker",
+		"url": "",
+		"name": "Tasks on Docker",
+		"description": "Run Coder Tasks on Docker with an example application",
+		"icon": "/icon/tasks.svg",
+		"tags": [
+			"docker",
+			"container",
+			"ai",
+			"tasks"
+		],
+		"markdown": "\n# Run Coder Tasks on Docker\n\nThis is an example template for running [Coder Tasks](https://coder.com/docs/ai-coder/tasks), Claude Code, along with a [real world application](https://realworld-docs.netlify.app/).\n\n![Tasks](../../.images/tasks-screenshot.png)\n\nThis is a fantastic starting point for working with AI agents with Coder Tasks. Try prompts such as:\n\n- \"Make the background color blue\"\n- \"Add a dark mode\"\n- \"Rewrite the entire backend in Go\"\n\n## Included in this template\n\nThis template is designed to be an example and a reference for building other templates with Coder Tasks. You can always run Coder Tasks on different infrastructure (e.g. as on Kubernetes, VMs) and with your own GitHub repositories, MCP servers, images, etc.\n\nAdditionally, this template uses our [Claude Code](https://registry.coder.com/modules/coder/claude-code) module, but [other agents](https://registry.coder.com/modules?search=tag%3Aagent) or even [custom agents](https://coder.com/docs/ai-coder/custom-agents) can be used in its place.\n\nThis template uses a [Workspace Preset](https://coder.com/docs/admin/templates/extending-templates/parameters#workspace-presets) that pre-defines:\n\n- Universal Container Image (e.g. contains Node.js, Java, Python, Ruby, etc)\n- MCP servers (desktop-commander for long-running logs, playwright for previewing changes)\n- System prompt and [repository](https://github.com/coder-contrib/realworld-django-rest-framework-angular) for the AI agent\n- Startup script to initialize the repository and start the development server\n\n## Add this template to your Coder deployment\n\nYou can also add this template to your Coder deployment and begin tinkering right away!\n\n### Prerequisites\n\n- Coder installed (see [our docs](https://coder.com/docs/install)), ideally a Linux VM with Docker\n- Anthropic API Key (or access to Anthropic models via Bedrock or Vertex, see [Claude Code docs](https://docs.anthropic.com/en/docs/claude-code/third-party-integrations))\n- Access to a Docker socket\n  - If on the local VM, ensure the `coder` user is added to the Docker group (docs)\n\n    ```sh\n    # Add coder user to Docker group\n    sudo adduser coder docker\n    \n    # Restart Coder server\n    sudo systemctl restart coder\n    \n    # Test Docker\n    sudo -u coder docker ps\n    ```\n\n  - If on a remote VM, see the [Docker Terraform provider documentation](https://registry.terraform.io/providers/kreuzwerker/docker/latest/docs#remote-hosts) to configure a remote host\n\nTo import this template into Coder, first create a template from \"Scratch\" in the template editor.\n\nVisit this URL for your Coder deployment:\n\n```sh\nhttps://coder.example.com/templates/new?exampleId=scratch\n```\n\nAfter creating the template, paste the contents from [main.tf](https://github.com/coder/registry/blob/main/registry/coder-labs/templates/tasks-docker/main.tf) into the template editor and save.\n\nAlternatively, you can use the Coder CLI to [push the template](https://coder.com/docs/reference/cli/templates_push)\n\n```sh\n# Download the CLI\ncurl -L https://coder.com/install.sh | sh\n\n# Log in to your deployment\ncoder login https://coder.example.com\n\n# Clone the registry\ngit clone https://github.com/coder/registry\ncd registry\n\n# Navigate to this template\ncd registry/coder-labs/templates/tasks-docker\n\n# Push the template\ncoder templates push\n```\n"
 	}
 ]
@@ -40,6 +40,7 @@ var (
 	//go:embed templates/kubernetes-devcontainer
 	//go:embed templates/nomad-docker
 	//go:embed templates/scratch
+	//go:embed templates/tasks-docker
 	files embed.FS

 	exampleBasePath = "https://github.com/coder/coder/tree/main/examples/templates/"
@@ -0,0 +1,87 @@
+---
+display_name: Tasks on Docker
+description: Run Coder Tasks on Docker with an example application
+icon: ../../../site/static/icon/tasks.svg
+verified: false
+tags: [docker, container, ai, tasks]
+maintainer_github: coder
+---
+
+# Run Coder Tasks on Docker
+
+This is an example template for running [Coder Tasks](https://coder.com/docs/ai-coder/tasks), Claude Code, along with a [real world application](https://realworld-docs.netlify.app/).
+
+![Tasks](../../.images/tasks-screenshot.png)
+
+This is a fantastic starting point for working with AI agents with Coder Tasks. Try prompts such as:
+
+- "Make the background color blue"
+- "Add a dark mode"
+- "Rewrite the entire backend in Go"
+
+## Included in this template
+
+This template is designed to be an example and a reference for building other templates with Coder Tasks. You can always run Coder Tasks on different infrastructure (e.g. as on Kubernetes, VMs) and with your own GitHub repositories, MCP servers, images, etc.
+
+Additionally, this template uses our [Claude Code](https://registry.coder.com/modules/coder/claude-code) module, but [other agents](https://registry.coder.com/modules?search=tag%3Aagent) or even [custom agents](https://coder.com/docs/ai-coder/custom-agents) can be used in its place.
+
+This template uses a [Workspace Preset](https://coder.com/docs/admin/templates/extending-templates/parameters#workspace-presets) that pre-defines:
+
+- Universal Container Image (e.g. contains Node.js, Java, Python, Ruby, etc)
+- MCP servers (desktop-commander for long-running logs, playwright for previewing changes)
+- System prompt and [repository](https://github.com/coder-contrib/realworld-django-rest-framework-angular) for the AI agent
+- Startup script to initialize the repository and start the development server
+
+## Add this template to your Coder deployment
+
+You can also add this template to your Coder deployment and begin tinkering right away!
+
+### Prerequisites
+
+- Coder installed (see [our docs](https://coder.com/docs/install)), ideally a Linux VM with Docker
+- Anthropic API Key (or access to Anthropic models via Bedrock or Vertex, see [Claude Code docs](https://docs.anthropic.com/en/docs/claude-code/third-party-integrations))
+- Access to a Docker socket
+  - If on the local VM, ensure the `coder` user is added to the Docker group (docs)
+
+    ```sh
+    # Add coder user to Docker group
+    sudo adduser coder docker
+    
+    # Restart Coder server
+    sudo systemctl restart coder
+    
+    # Test Docker
+    sudo -u coder docker ps
+    ```
+
+  - If on a remote VM, see the [Docker Terraform provider documentation](https://registry.terraform.io/providers/kreuzwerker/docker/latest/docs#remote-hosts) to configure a remote host
+
+To import this template into Coder, first create a template from "Scratch" in the template editor.
+
+Visit this URL for your Coder deployment:
+
+```sh
+https://coder.example.com/templates/new?exampleId=scratch
+```
+
+After creating the template, paste the contents from [main.tf](https://github.com/coder/registry/blob/main/registry/coder-labs/templates/tasks-docker/main.tf) into the template editor and save.
+
+Alternatively, you can use the Coder CLI to [push the template](https://coder.com/docs/reference/cli/templates_push)
+
+```sh
+# Download the CLI
+curl -L https://coder.com/install.sh | sh
+
+# Log in to your deployment
+coder login https://coder.example.com
+
+# Clone the registry
+git clone https://github.com/coder/registry
+cd registry
+
+# Navigate to this template
+cd registry/coder-labs/templates/tasks-docker
+
+# Push the template
+coder templates push
+```
@@ -0,0 +1,376 @@
+terraform {
+  required_providers {
+    coder = {
+      source = "coder/coder"
+    }
+    docker = {
+      source = "kreuzwerker/docker"
+    }
+  }
+}
+
+# This template requires a valid Docker socket
+# However, you can reference our Kubernetes/VM
+# example templates and adapt the Claude Code module
+# 
+# see: https://registry.coder.com/templates 
+provider "docker" {}
+
+# The Claude Code module does the automatic task reporting
+# Other agent modules: https://registry.coder.com/modules?search=agent
+# Or use a custom agent:  
+module "claude-code" {
+  count               = data.coder_workspace.me.start_count
+  source              = "registry.coder.com/coder/claude-code/coder"
+  version             = "3.0.0"
+  agent_id            = coder_agent.main.id
+  workdir             = "/home/coder/projects"
+  order               = 999
+  claude_api_key      = ""
+  ai_prompt           = data.coder_parameter.ai_prompt.value
+  system_prompt       = data.coder_parameter.system_prompt.value
+  model               = "sonnet"
+  permission_mode     = "plan"
+  post_install_script = data.coder_parameter.setup_script.value
+}
+
+# We are using presets to set the prompts, image, and set up instructions
+# See https://coder.com/docs/admin/templates/extending-templates/parameters#workspace-presets
+data "coder_workspace_preset" "default" {
+  name    = "Real World App: Angular + Django"
+  default = true
+  parameters = {
+    "system_prompt" = <<-EOT
+      -- Framing --
+      You are a helpful assistant that can help with code. You are running inside a Coder Workspace and provide status updates to the user via Coder MCP. Stay on track, feel free to debug, but when the original plan fails, do not choose a different route/architecture without checking the user first.
+
+      -- Tool Selection --
+      - playwright: previewing your changes after you made them
+        to confirm it worked as expected
+	    -	desktop-commander - use only for commands that keep running
+        (servers, dev watchers, GUI apps).
+      -	Built-in tools - use for everything else:
+       (file operations, git commands, builds & installs, one-off shell commands)
+	    
+      Remember this decision rule:
+      - Stays running? → desktop-commander
+      - Finishes immediately? → built-in tools
+      
+      -- Context --
+      There is an existing app and tmux dev server running on port 8000. Be sure to read it's CLAUDE.md (./realworld-django-rest-framework-angular/CLAUDE.md) to learn more about it. 
+
+      Since this app is for demo purposes and the user is previewing the homepage and subsequent pages, aim to make the first visual change/prototype very quickly so the user can preview it, then focus on backend or logic which can be a more involved, long-running architecture plan.
+
+    EOT
+
+    "setup_script"    = <<-EOT
+    # Set up projects dir
+    mkdir -p /home/coder/projects
+    cd $HOME/projects
+
+    # Packages: Install additional packages
+    sudo apt-get update && sudo apt-get install -y tmux
+    if ! command -v google-chrome >/dev/null 2>&1; then
+      yes | npx playwright install chrome
+    fi
+
+    # MCP: Install and configure MCP Servers
+    npm install -g @wonderwhy-er/desktop-commander
+    claude mcp add playwright npx -- @playwright/mcp@latest --headless --isolated --no-sandbox
+    claude mcp add desktop-commander desktop-commander
+
+    # Repo: Clone and pull changes from the git repository
+    if [ ! -d "realworld-django-rest-framework-angular" ]; then
+      git clone https://github.com/coder-contrib/realworld-django-rest-framework-angular.git
+    else
+      cd realworld-django-rest-framework-angular
+      git fetch
+      # Check for uncommitted changes
+      if git diff-index --quiet HEAD -- && \
+        [ -z "$(git status --porcelain --untracked-files=no)" ] && \
+        [ -z "$(git log --branches --not --remotes)" ]; then
+        echo "Repo is clean. Pulling latest changes..."
+        git pull
+      else
+        echo "Repo has uncommitted or unpushed changes. Skipping pull."
+      fi
+
+      cd ..
+    fi
+
+    # Initialize: Start the development server
+    cd realworld-django-rest-framework-angular && ./start-dev.sh
+    EOT
+    "preview_port"    = "4200"
+    "container_image" = "codercom/example-universal:ubuntu"
+  }
+
+  # Pre-builds is a Coder Premium
+  # feature to speed up workspace creation
+  # 
+  # see https://coder.com/docs/admin/templates/extending-templates/prebuilt-workspaces
+  # prebuilds {
+  #   instances = 1
+  #   expiration_policy {
+  #      ttl = 86400  # Time (in seconds) after which unclaimed prebuilds are expired (1 day)
+  #  }
+  # }
+}
+
+# Advanced parameters (these are all set via preset)
+data "coder_parameter" "system_prompt" {
+  name         = "system_prompt"
+  display_name = "System Prompt"
+  type         = "string"
+  form_type    = "textarea"
+  description  = "System prompt for the agent with generalized instructions"
+  mutable      = false
+}
+data "coder_parameter" "ai_prompt" {
+  type        = "string"
+  name        = "AI Prompt"
+  default     = ""
+  description = "Write a prompt for Claude Code"
+  mutable     = true
+}
+data "coder_parameter" "setup_script" {
+  name         = "setup_script"
+  display_name = "Setup Script"
+  type         = "string"
+  form_type    = "textarea"
+  description  = "Script to run before running the agent"
+  mutable      = false
+}
+data "coder_parameter" "container_image" {
+  name         = "container_image"
+  display_name = "Container Image"
+  type         = "string"
+  default      = "codercom/example-universal:ubuntu"
+  mutable      = false
+}
+data "coder_parameter" "preview_port" {
+  name         = "preview_port"
+  display_name = "Preview Port"
+  description  = "The port the web app is running to preview in Tasks"
+  type         = "number"
+  default      = "3000"
+  mutable      = false
+}
+
+data "coder_provisioner" "me" {}
+data "coder_workspace" "me" {}
+data "coder_workspace_owner" "me" {}
+
+resource "coder_agent" "main" {
+  arch           = data.coder_provisioner.me.arch
+  os             = "linux"
+  startup_script = <<-EOT
+    set -e
+    # Prepare user home with default files on first start.
+    if [ ! -f ~/.init_done ]; then
+      cp -rT /etc/skel ~
+      touch ~/.init_done
+    fi
+  EOT
+
+  # These environment variables allow you to make Git commits right away after creating a
+  # workspace. Note that they take precedence over configuration defined in ~/.gitconfig!
+  # You can remove this block if you'd prefer to configure Git manually or using
+  # dotfiles. (see docs/dotfiles.md)
+  env = {
+    GIT_AUTHOR_NAME     = coalesce(data.coder_workspace_owner.me.full_name, data.coder_workspace_owner.me.name)
+    GIT_AUTHOR_EMAIL    = "${data.coder_workspace_owner.me.email}"
+    GIT_COMMITTER_NAME  = coalesce(data.coder_workspace_owner.me.full_name, data.coder_workspace_owner.me.name)
+    GIT_COMMITTER_EMAIL = "${data.coder_workspace_owner.me.email}"
+  }
+
+  # The following metadata blocks are optional. They are used to display
+  # information about your workspace in the dashboard. You can remove them
+  # if you don't want to display any information.
+  # For basic resources, you can use the `coder stat` command.
+  # If you need more control, you can write your own script.
+  metadata {
+    display_name = "CPU Usage"
+    key          = "0_cpu_usage"
+    script       = "coder stat cpu"
+    interval     = 10
+    timeout      = 1
+  }
+
+  metadata {
+    display_name = "RAM Usage"
+    key          = "1_ram_usage"
+    script       = "coder stat mem"
+    interval     = 10
+    timeout      = 1
+  }
+
+  metadata {
+    display_name = "Home Disk"
+    key          = "3_home_disk"
+    script       = "coder stat disk --path $${HOME}"
+    interval     = 60
+    timeout      = 1
+  }
+
+  metadata {
+    display_name = "CPU Usage (Host)"
+    key          = "4_cpu_usage_host"
+    script       = "coder stat cpu --host"
+    interval     = 10
+    timeout      = 1
+  }
+
+  metadata {
+    display_name = "Memory Usage (Host)"
+    key          = "5_mem_usage_host"
+    script       = "coder stat mem --host"
+    interval     = 10
+    timeout      = 1
+  }
+
+  metadata {
+    display_name = "Load Average (Host)"
+    key          = "6_load_host"
+    # get load avg scaled by number of cores
+    script   = <<EOT
+      echo "`cat /proc/loadavg | awk '{ print $1 }'` `nproc`" | awk '{ printf "%0.2f", $1/$2 }'
+    EOT
+    interval = 60
+    timeout  = 1
+  }
+
+  metadata {
+    display_name = "Swap Usage (Host)"
+    key          = "7_swap_host"
+    script       = <<EOT
+      free -b | awk '/^Swap/ { printf("%.1f/%.1f", $3/1024.0/1024.0/1024.0, $2/1024.0/1024.0/1024.0) }'
+    EOT
+    interval     = 10
+    timeout      = 1
+  }
+}
+
+# See https://registry.coder.com/modules/coder/code-server
+module "code-server" {
+  count  = data.coder_workspace.me.start_count
+  folder = "/home/coder/projects"
+  source = "registry.coder.com/coder/code-server/coder"
+
+  settings = {
+    "workbench.colorTheme" : "Default Dark Modern"
+  }
+
+  # This ensures that the latest non-breaking version of the module gets downloaded, you can also pin the module version to prevent breaking changes in production.
+  version = "~> 1.0"
+
+  agent_id = coder_agent.main.id
+  order    = 1
+}
+
+module "windsurf" {
+  count    = data.coder_workspace.me.start_count
+  source   = "registry.coder.com/coder/windsurf/coder"
+  version  = "1.1.0"
+  agent_id = coder_agent.main.id
+}
+
+module "cursor" {
+  count    = data.coder_workspace.me.start_count
+  source   = "registry.coder.com/coder/cursor/coder"
+  version  = "1.2.0"
+  agent_id = coder_agent.main.id
+}
+
+module "jetbrains" {
+  count      = data.coder_workspace.me.start_count
+  source     = "registry.coder.com/coder/jetbrains/coder"
+  version    = "~> 1.0"
+  agent_id   = coder_agent.main.id
+  agent_name = "main"
+  folder     = "/home/coder/projects"
+}
+
+resource "docker_volume" "home_volume" {
+  name = "coder-${data.coder_workspace.me.id}-home"
+  # Protect the volume from being deleted due to changes in attributes.
+  lifecycle {
+    ignore_changes = all
+  }
+  # Add labels in Docker to keep track of orphan resources.
+  labels {
+    label = "coder.owner"
+    value = data.coder_workspace_owner.me.name
+  }
+  labels {
+    label = "coder.owner_id"
+    value = data.coder_workspace_owner.me.id
+  }
+  labels {
+    label = "coder.workspace_id"
+    value = data.coder_workspace.me.id
+  }
+  # This field becomes outdated if the workspace is renamed but can
+  # be useful for debugging or cleaning out dangling volumes.
+  labels {
+    label = "coder.workspace_name_at_creation"
+    value = data.coder_workspace.me.name
+  }
+}
+
+resource "coder_app" "preview" {
+  agent_id     = coder_agent.main.id
+  slug         = "preview"
+  display_name = "Preview your app"
+  icon         = "${data.coder_workspace.me.access_url}/emojis/1f50e.png"
+  url          = "http://localhost:${data.coder_parameter.preview_port.value}"
+  share        = "authenticated"
+  subdomain    = true
+  open_in      = "tab"
+  order        = 0
+  healthcheck {
+    url       = "http://localhost:${data.coder_parameter.preview_port.value}/"
+    interval  = 5
+    threshold = 15
+  }
+}
+
+resource "docker_container" "workspace" {
+  count = data.coder_workspace.me.start_count
+  image = data.coder_parameter.container_image.value
+  # Uses lower() to avoid Docker restriction on container names.
+  name = "coder-${data.coder_workspace_owner.me.name}-${lower(data.coder_workspace.me.name)}"
+  # Hostname makes the shell more user friendly: coder@my-workspace:~$
+  hostname = data.coder_workspace.me.name
+  user     = "coder"
+  # Use the docker gateway if the access URL is 127.0.0.1
+  entrypoint = ["sh", "-c", replace(coder_agent.main.init_script, "/localhost|127\\.0\\.0\\.1/", "host.docker.internal")]
+  env        = ["CODER_AGENT_TOKEN=${coder_agent.main.token}"]
+  host {
+    host = "host.docker.internal"
+    ip   = "host-gateway"
+  }
+  volumes {
+    container_path = "/home/coder"
+    volume_name    = docker_volume.home_volume.name
+    read_only      = false
+  }
+
+  # Add labels in Docker to keep track of orphan resources.
+  labels {
+    label = "coder.owner"
+    value = data.coder_workspace_owner.me.name
+  }
+  labels {
+    label = "coder.owner_id"
+    value = data.coder_workspace_owner.me.id
+  }
+  labels {
+    label = "coder.workspace_id"
+    value = data.coder_workspace.me.id
+  }
+  labels {
+    label = "coder.workspace_name"
+    value = data.coder_workspace.me.name
+  }
+}
@@ -23,18 +23,28 @@ const selectTags = (starterTemplatesByTag: StarterTemplatesByTag) => {
 };

 const sortVisibleTemplates = (templates: TemplateExample[]) => {
-	// The docker template should be the first template in the list,
-	// as it's the easiest way to get started with Coder.
-	const dockerTemplateId = "docker";
-	return [...templates].sort((a, b) => {
-		if (a.id === dockerTemplateId) {
-			return -1;
+	// The tasks-docker template should be first, as it's the easiest way to
+	// get started with Coder. The docker template should be second.
+	const featuredTemplateIds = ["tasks-docker", "docker"];
+
+	const featuredTemplates: TemplateExample[] = [];
+	for (const id of featuredTemplateIds) {
+		for (const template of templates) {
+			if (id === template.id) {
+				featuredTemplates.push(template);
+			}
 		}
-		if (b.id === dockerTemplateId) {
-			return 1;
-		}
-		return a.name.localeCompare(b.name);
-	});
+	}
+
+	const nonFeaturedTemplates = templates
+		.filter((template) => {
+			return !featuredTemplateIds.includes(template.id);
+		})
+		.sort((a, b) => {
+			return a.name.localeCompare(b.name);
+		});
+
+	return [...featuredTemplates, ...nonFeaturedTemplates];
 };

 interface StarterTemplatesProps {
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import Link from "@mui/material/Link";
 import type { TemplateExample } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
@@ -12,6 +11,7 @@ import { docs } from "utils/docs";

 // Those are from https://github.com/coder/coder/tree/main/examples/templates
 const featuredExampleIds = [
+	"tasks-docker",
 	"docker",
 	"kubernetes",
 	"aws-linux",
@@ -91,28 +91,9 @@ export const EmptyTemplates: FC<EmptyTemplatesProps> = ({

 	return (
 		<TableEmpty
-			className="pb-0"
 			message="Create a Template"
 			description="Contact your Coder administrator to create a template. You can share the code below."
 			cta={<CodeExample secret={false} code="coder templates init" />}
-			image={
-				<div css={styles.emptyImage}>
-					<img src="/featured/templates.webp" alt="" />
-				</div>
-			}
 		/>
 	);
 };
-
-const styles = {
-	emptyImage: {
-		maxWidth: "50%",
-		height: 320,
-		overflow: "hidden",
-		opacity: 0.85,
-
-		"& img": {
-			maxWidth: "100%",
-		},
-	},
-} satisfies Record<string, Interpolation<Theme>>;
@@ -166,4 +166,5 @@ export const defaultParametersForBuiltinIcons = new Map<string, string>([
 	["/icon/widgets.svg", "monochrome"],
 	["/icon/windsurf.svg", "monochrome"],
 	["/icon/zed.svg", "monochrome"],
+	["/icon/tasks.svg", "monochrome"],
 ]);
@@ -110,6 +110,7 @@
 	"slack.svg",
 	"sourcegraph-amp.svg",
 	"swift.svg",
+	"tasks.svg",
 	"tensorflow.svg",
 	"terminal.svg",
 	"theia.svg",
@@ -0,0 +1,5 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M66.1403 24.9315H106.4V33.5714H14.6005V99.3601H106.4V33.5714L115 33.5682V107.997L14.591 108V99.3695H6V24.9409H14.0531V24.9346L57.5399 24.9315V12H66.1403V24.9315Z" fill="white"/>
+    <path d="M77.94 57.3044V70.2485H69.3521V57.3044H77.94Z" fill="white"/>
+    <path d="M52.1701 57.3044V70.2485H43.5822V57.3044H52.1701Z" fill="white"/>
+</svg>