From b0a045cba05907699db0c15a2884f29774742794 Mon Sep 17 00:00:00 2001 From: Benjamin Peinhardt <61021968+bcpeinhardt@users.noreply.github.com> Date: Fri, 17 Oct 2025 13:09:50 -0500 Subject: [PATCH] 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 --- .../coder_templates_init_--help.golden | 2 +- docs/reference/cli/templates_init.md | 6 +- examples/examples.gen.json | 14 + examples/examples.go | 1 + examples/templates/tasks-docker/README.md | 87 ++++ examples/templates/tasks-docker/main.tf | 376 ++++++++++++++++++ .../StarterTemplates.tsx | 32 +- .../pages/TemplatesPage/EmptyTemplates.tsx | 21 +- site/src/theme/externalImages.ts | 1 + site/src/theme/icons.json | 1 + site/static/icon/tasks.svg | 5 + 11 files changed, 511 insertions(+), 35 deletions(-) create mode 100644 examples/templates/tasks-docker/README.md create mode 100644 examples/templates/tasks-docker/main.tf create mode 100644 site/static/icon/tasks.svg diff --git a/cli/testdata/coder_templates_init_--help.golden b/cli/testdata/coder_templates_init_--help.golden index d44db24aee..44be7a9529 100644 --- a/cli/testdata/coder_templates_init_--help.golden +++ b/cli/testdata/coder_templates_init_--help.golden @@ -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. ——— diff --git a/docs/reference/cli/templates_init.md b/docs/reference/cli/templates_init.md index 7613144e66..3ac28749ad 100644 --- a/docs/reference/cli/templates_init.md +++ b/docs/reference/cli/templates_init.md @@ -13,8 +13,8 @@ coder templates init [flags] [directory] ### --id -| | | -|------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| Type | 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 | +| | | +|------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| Type | 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. diff --git a/examples/examples.gen.json b/examples/examples.gen.json index c891389568..432e6d3f51 100644 --- a/examples/examples.gen.json +++ b/examples/examples.gen.json @@ -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" } ] diff --git a/examples/examples.go b/examples/examples.go index 7deff18f5f..8490267b7f 100644 --- a/examples/examples.go +++ b/examples/examples.go @@ -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/" diff --git a/examples/templates/tasks-docker/README.md b/examples/templates/tasks-docker/README.md new file mode 100644 index 0000000000..02262e5d69 --- /dev/null +++ b/examples/templates/tasks-docker/README.md @@ -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 +``` diff --git a/examples/templates/tasks-docker/main.tf b/examples/templates/tasks-docker/main.tf new file mode 100644 index 0000000000..c0a165fccb --- /dev/null +++ b/examples/templates/tasks-docker/main.tf @@ -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 = < { }; 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 { diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx index 1c3ec0bff5..72a47c3417 100644 --- a/site/src/pages/TemplatesPage/EmptyTemplates.tsx +++ b/site/src/pages/TemplatesPage/EmptyTemplates.tsx @@ -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 = ({ return ( } - image={ -
- -
- } /> ); }; - -const styles = { - emptyImage: { - maxWidth: "50%", - height: 320, - overflow: "hidden", - opacity: 0.85, - - "& img": { - maxWidth: "100%", - }, - }, -} satisfies Record>; diff --git a/site/src/theme/externalImages.ts b/site/src/theme/externalImages.ts index df260d9983..0efae3419e 100644 --- a/site/src/theme/externalImages.ts +++ b/site/src/theme/externalImages.ts @@ -166,4 +166,5 @@ export const defaultParametersForBuiltinIcons = new Map([ ["/icon/widgets.svg", "monochrome"], ["/icon/windsurf.svg", "monochrome"], ["/icon/zed.svg", "monochrome"], + ["/icon/tasks.svg", "monochrome"], ]); diff --git a/site/src/theme/icons.json b/site/src/theme/icons.json index 546cdaeb4c..3686eb8a5d 100644 --- a/site/src/theme/icons.json +++ b/site/src/theme/icons.json @@ -110,6 +110,7 @@ "slack.svg", "sourcegraph-amp.svg", "swift.svg", + "tasks.svg", "tensorflow.svg", "terminal.svg", "theia.svg", diff --git a/site/static/icon/tasks.svg b/site/static/icon/tasks.svg new file mode 100644 index 0000000000..67088c4200 --- /dev/null +++ b/site/static/icon/tasks.svg @@ -0,0 +1,5 @@ + + + + +