diff --git a/registry/coder-labs/.images/avatar.svg b/registry/coder-labs/.images/avatar.svg new file mode 100644 index 0000000..68fdc75 --- /dev/null +++ b/registry/coder-labs/.images/avatar.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/registry/coder-labs/.images/tasks-screenshot.png b/registry/coder-labs/.images/tasks-screenshot.png new file mode 100644 index 0000000..1fbb82f Binary files /dev/null and b/registry/coder-labs/.images/tasks-screenshot.png differ diff --git a/registry/coder-labs/.images/tasks.svg b/registry/coder-labs/.images/tasks.svg new file mode 100644 index 0000000..67088c4 --- /dev/null +++ b/registry/coder-labs/.images/tasks.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/registry/coder-labs/README.md b/registry/coder-labs/README.md new file mode 100644 index 0000000..359bba6 --- /dev/null +++ b/registry/coder-labs/README.md @@ -0,0 +1,13 @@ +--- +display_name: Coder Labs +bio: Collection of example templates and modules for Coder. Designed for reference, not production use. +github: coder +avatar: ./.images/avatar.svg +linkedin: https://www.linkedin.com/company/coderhq +website: https://discord.gg/coder +status: community +---å + +# Coder Labs + +Collection of example templates and modules for Coder. Designed for reference, not production use. \ No newline at end of file diff --git a/registry/coder-labs/templates/tasks-docker/README.md b/registry/coder-labs/templates/tasks-docker/README.md new file mode 100644 index 0000000..eaa3e39 --- /dev/null +++ b/registry/coder-labs/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: ./.images/tasks.svg +maintainer_github: coder +verified: false +tags: [docker, container, ai, tasks] +--- + +# 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](./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/registry/coder-labs/templates/tasks-docker/main.tf b/registry/coder-labs/templates/tasks-docker/main.tf new file mode 100644 index 0000000..7e80360 --- /dev/null +++ b/registry/coder-labs/templates/tasks-docker/main.tf @@ -0,0 +1,426 @@ +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 = "2.0.0" + agent_id = coder_agent.main.id + folder = "/home/coder/projects" + install_claude_code = true + claude_code_version = "latest" + order = 999 + + experiment_post_install_script = data.coder_parameter.setup_script.value + + # This enables Coder Tasks + experiment_report_tasks = true +} + +# You can also use a model provider, like AWS Bedrock or Vertex by replacing +# this with the special env vars from the Claude Code docs. +# see: https://docs.anthropic.com/en/docs/claude-code/third-party-integrations +variable "anthropic_api_key" { + type = string + description = "Generate one at: https://console.anthropic.com/settings/keys" + sensitive = true +} +resource "coder_env" "anthropic_api_key" { + agent_id = coder_agent.main.id + name = "CODER_MCP_CLAUDE_API_KEY" + value = var.anthropic_api_key +} + +# 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" + "jetbrains_ide" = "PY" + } + + # 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 +} + +# Other variables for Claude Code +resource "coder_env" "claude_task_prompt" { + agent_id = coder_agent.main.id + name = "CODER_MCP_CLAUDE_TASK_PROMPT" + value = data.coder_parameter.ai_prompt.value +} +resource "coder_env" "app_status_slug" { + agent_id = coder_agent.main.id + name = "CODER_MCP_APP_STATUS_SLUG" + value = "claude-code" +} +resource "coder_env" "claude_system_prompt" { + agent_id = coder_agent.main.id + name = "CODER_MCP_CLAUDE_SYSTEM_PROMPT" + value = data.coder_parameter.system_prompt.value +} + +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 = <