Claude Code di web

​

Apa itu Claude Code di web?

• Menjawab pertanyaan: Tanyakan tentang arsitektur kode dan bagaimana fitur diimplementasikan
• Perbaikan bug dan tugas rutin: Tugas yang terdefinisi dengan baik yang tidak memerlukan pengarahan sering
• Pekerjaan paralel: Tangani beberapa perbaikan bug secara bersamaan
• Repositori yang tidak ada di mesin lokal Anda: Bekerja pada kode yang tidak Anda miliki checkout secara lokal
• Perubahan backend: Di mana Claude Code dapat menulis tes dan kemudian menulis kode untuk lulus tes tersebut

​

Siapa yang dapat menggunakan Claude Code di web?

• Pengguna Pro
• Pengguna Max
• Pengguna Team
• Pengguna Enterprise dengan kursi premium atau kursi Chat + Claude Code

​

Memulai

​

Dari browser

1. Kunjungi claude.ai/code
2. Hubungkan akun GitHub Anda
3. Instal aplikasi Claude GitHub di repositori Anda
4. Pilih lingkungan default Anda
5. Kirimkan tugas pengkodean Anda
6. Tinjau perubahan dalam tampilan diff, ulangi dengan komentar, kemudian buat pull request

​

Dari terminal

​

Cara kerjanya

1. Kloning repositori: Repositori Anda dikloning ke mesin virtual yang dikelola Anthropic
2. Penyiapan lingkungan: Claude menyiapkan lingkungan cloud yang aman dengan kode Anda, kemudian menjalankan skrip setup Anda jika dikonfigurasi
3. Konfigurasi jaringan: Akses internet dikonfigurasi berdasarkan pengaturan Anda
4. Eksekusi tugas: Claude menganalisis kode, membuat perubahan, menjalankan tes, dan memeriksa pekerjaannya
5. Penyelesaian: Anda diberitahu ketika selesai dan dapat membuat PR dengan perubahan
6. Hasil: Perubahan didorong ke cabang, siap untuk pembuatan pull request

​

Tinjau perubahan dengan tampilan diff

• Meninjau perubahan file demi file
• Berkomentar pada perubahan spesifik untuk meminta modifikasi
• Terus mengulangi dengan Claude berdasarkan apa yang Anda lihat

​

Auto-fix pull requests

• PR yang dibuat di Claude Code di web: buka bilah status CI dan pilih Auto-fix
• Dari aplikasi mobile: beri tahu Claude untuk auto-fix PR, misalnya “watch this PR and fix any CI failures or review comments”
• PR yang ada: tempel URL PR ke sesi dan beri tahu Claude untuk auto-fix

​

Bagaimana Claude merespons aktivitas PR

• Perbaikan yang jelas: jika Claude yakin dengan perbaikan dan tidak bertentangan dengan instruksi sebelumnya, Claude membuat perubahan, mendorongnya, dan menjelaskan apa yang dilakukan dalam sesi
• Permintaan yang ambigu: jika komentar pengulas dapat diinterpretasikan dengan beberapa cara atau melibatkan sesuatu yang secara arsitektur signifikan, Claude bertanya kepada Anda sebelum bertindak
• Acara duplikat atau tanpa tindakan: jika acara adalah duplikat atau tidak memerlukan perubahan, Claude mencatatnya dalam sesi dan melanjutkan

​

Memindahkan tugas antara web dan terminal

​

Dari terminal ke web

claude --remote "Fix the authentication bug in src/auth/login.ts"

​

Tips untuk tugas jarak jauh

claude --permission-mode plan

claude --remote "Execute the migration plan in docs/migration-plan.md"

claude --remote "Fix the flaky test in auth.spec.ts"
claude --remote "Update the API documentation"
claude --remote "Refactor the logger to use structured output"

​

Dari web ke terminal

• Menggunakan /teleport: Dari dalam Claude Code, jalankan /teleport (atau /tp) untuk melihat pemilih interaktif sesi web Anda. Jika Anda memiliki perubahan yang tidak dikomit, Anda akan diminta untuk menyimpannya terlebih dahulu.
• Menggunakan --teleport: Dari baris perintah, jalankan claude --teleport untuk pemilih sesi interaktif, atau claude --teleport <session-id> untuk melanjutkan sesi spesifik secara langsung.
• Dari /tasks: Jalankan /tasks untuk melihat sesi latar belakang Anda, kemudian tekan t untuk teleport ke salah satunya
• Dari antarmuka web: Klik “Open in CLI” untuk menyalin perintah yang dapat Anda tempel ke terminal Anda

​

Persyaratan untuk teleporting

​

Berbagi sesi

​

Berbagi dari akun Enterprise atau Teams

​

Berbagi dari akun Max atau Pro

​

Jadwalkan tugas berulang

​

Mengelola sesi

​

Mengarsipkan sesi

​

Menghapus sesi

• Dari sidebar: Filter untuk sesi yang diarsipkan, kemudian arahkan ke sesi yang ingin Anda hapus dan klik ikon hapus
• Dari menu sesi: Buka sesi, klik dropdown di sebelah judul sesi, dan pilih Delete

​

Lingkungan cloud

​

Gambar default

• Bahasa pemrograman dan runtime populer
• Alat build umum dan pengelola paket
• Framework pengujian dan linter

​

Memeriksa alat yang tersedia

check-tools

• Bahasa pemrograman dan versinya
• Pengelola paket yang tersedia
• Alat pengembangan yang diinstal

​

Penyiapan khusus bahasa

• Python: Python 3.x dengan pip, poetry, dan perpustakaan ilmiah umum
• Node.js: Versi LTS terbaru dengan npm, yarn, pnpm, dan bun
• Ruby: Versi 3.1.6, 3.2.6, 3.3.6 (default: 3.3.6) dengan gem, bundler, dan rbenv untuk manajemen versi
• PHP: Versi 8.4.14
• Java: OpenJDK dengan Maven dan Gradle
• Go: Versi stabil terbaru dengan dukungan modul
• Rust: Rust toolchain dengan cargo
• C++: Kompiler GCC dan Clang

​

Database

• PostgreSQL: Versi 16
• Redis: Versi 7.0

​

Konfigurasi lingkungan

1. Persiapan lingkungan: Kami mengkloning repositori Anda dan menjalankan skrip setup yang dikonfigurasi. Repo akan dikloning dengan cabang default di repo GitHub Anda. Jika Anda ingin checkout cabang spesifik, Anda dapat menentukan itu dalam prompt.
2. Konfigurasi jaringan: Kami mengonfigurasi akses internet untuk agen. Akses internet dibatasi secara default, tetapi Anda dapat mengonfigurasi lingkungan untuk tidak memiliki internet atau akses internet penuh berdasarkan kebutuhan Anda.
3. Eksekusi Claude Code: Claude Code berjalan untuk menyelesaikan tugas Anda, menulis kode, menjalankan tes, dan memeriksa pekerjaannya. Anda dapat memandu dan mengarahkan Claude sepanjang sesi melalui antarmuka web. Claude menghormati konteks yang telah Anda tentukan di CLAUDE.md Anda.
4. Hasil: Ketika Claude menyelesaikan pekerjaannya, itu akan mendorong cabang ke remote. Anda akan dapat membuat PR untuk cabang tersebut.

API_KEY=your_api_key
DEBUG=true

​

Setup scripts

#!/bin/bash
apt update && apt install -y gh

​

Setup scripts vs. SessionStart hooks

​

Manajemen dependensi

#!/bin/bash
npm install
pip install -r requirements.txt

{
  "hooks": {
    "SessionStart": [
      {
        "matcher": "startup",
        "hooks": [
          {
            "type": "command",
            "command": "\"$CLAUDE_PROJECT_DIR\"/scripts/install_pkgs.sh"
          }
        ]
      }
    ]
  }
}

#!/bin/bash

# Only run in remote environments
if [ "$CLAUDE_CODE_REMOTE" != "true" ]; then
  exit 0
fi

npm install
pip install -r requirements.txt
exit 0

​

Pertahankan variabel lingkungan

​

Batasan manajemen dependensi

• Hooks berjalan untuk semua sesi: SessionStart hooks berjalan di lingkungan lokal dan jarak jauh. Tidak ada konfigurasi hook untuk membatasi hook hanya ke sesi jarak jauh. Untuk melewati eksekusi lokal, periksa variabel lingkungan CLAUDE_CODE_REMOTE dalam skrip Anda seperti yang ditunjukkan di atas.
• Memerlukan akses jaringan: Perintah install memerlukan akses jaringan untuk menjangkau registri paket. Jika lingkungan Anda dikonfigurasi dengan akses “No internet”, hooks ini akan gagal. Gunakan akses jaringan “Limited” (default) atau “Full”. Daftar putih default mencakup registri umum seperti npm, PyPI, RubyGems, dan crates.io.
• Kompatibilitas proxy: Semua lalu lintas keluar di lingkungan jarak jauh melewati security proxy. Beberapa pengelola paket tidak bekerja dengan benar dengan proxy ini. Bun adalah contoh yang diketahui.
• Berjalan pada setiap awal sesi: Hooks berjalan setiap kali sesi dimulai atau dilanjutkan, menambah latensi startup. Jaga skrip install tetap cepat dengan memeriksa apakah dependensi sudah ada sebelum menginstal ulang.

​

Akses jaringan dan keamanan

​

Kebijakan jaringan

​

Proxy GitHub

• Mengelola autentikasi GitHub dengan aman - klien git menggunakan kredensial bersistem di dalam sandbox, yang diverifikasi proxy dan diterjemahkan ke token autentikasi GitHub aktual Anda
• Membatasi operasi git push ke cabang kerja saat ini untuk keamanan
• Memungkinkan kloning, pengambilan, dan operasi PR yang mulus sambil mempertahankan batas keamanan

​

Security proxy

• Perlindungan terhadap permintaan berbahaya
• Pembatasan laju dan pencegahan penyalahgunaan
• Penyaringan konten untuk keamanan yang ditingkatkan

​

Tingkat akses

​

Domain yang diizinkan secara default

​

Layanan Anthropic

• api.anthropic.com
• statsig.anthropic.com
• platform.claude.com
• code.claude.com
• claude.ai

​

Kontrol Versi

• github.com
• www.github.com
• api.github.com
• npm.pkg.github.com
• raw.githubusercontent.com
• pkg-npm.githubusercontent.com
• objects.githubusercontent.com
• codeload.github.com
• avatars.githubusercontent.com
• camo.githubusercontent.com
• gist.github.com
• gitlab.com
• www.gitlab.com
• registry.gitlab.com
• bitbucket.org
• www.bitbucket.org
• api.bitbucket.org

​

Registri Kontainer

• registry-1.docker.io
• auth.docker.io
• index.docker.io
• hub.docker.com
• www.docker.com
• production.cloudflare.docker.com
• download.docker.com
• gcr.io
• *.gcr.io
• ghcr.io
• mcr.microsoft.com
• *.data.mcr.microsoft.com
• public.ecr.aws

​

Platform Cloud

• cloud.google.com
• accounts.google.com
• gcloud.google.com
• *.googleapis.com
• storage.googleapis.com
• compute.googleapis.com
• container.googleapis.com
• azure.com
• portal.azure.com
• microsoft.com
• www.microsoft.com
• *.microsoftonline.com
• packages.microsoft.com
• dotnet.microsoft.com
• dot.net
• visualstudio.com
• dev.azure.com
• *.amazonaws.com
• *.api.aws
• oracle.com
• www.oracle.com
• java.com
• www.java.com
• java.net
• www.java.net
• download.oracle.com
• yum.oracle.com

​

Pengelola Paket - JavaScript/Node

• registry.npmjs.org
• www.npmjs.com
• www.npmjs.org
• npmjs.com
• npmjs.org
• yarnpkg.com
• registry.yarnpkg.com

​

Pengelola Paket - Python

• pypi.org
• www.pypi.org
• files.pythonhosted.org
• pythonhosted.org
• test.pypi.org
• pypi.python.org
• pypa.io
• www.pypa.io

​

Pengelola Paket - Ruby

• rubygems.org
• www.rubygems.org
• api.rubygems.org
• index.rubygems.org
• ruby-lang.org
• www.ruby-lang.org
• rubyforge.org
• www.rubyforge.org
• rubyonrails.org
• www.rubyonrails.org
• rvm.io
• get.rvm.io

​

Pengelola Paket - Rust

• crates.io
• www.crates.io
• index.crates.io
• static.crates.io
• rustup.rs
• static.rust-lang.org
• www.rust-lang.org

​

Pengelola Paket - Go

• proxy.golang.org
• sum.golang.org
• index.golang.org
• golang.org
• www.golang.org
• goproxy.io
• pkg.go.dev

​

Pengelola Paket - JVM

• maven.org
• repo.maven.org
• central.maven.org
• repo1.maven.org
• jcenter.bintray.com
• gradle.org
• www.gradle.org
• services.gradle.org
• plugins.gradle.org
• kotlin.org
• www.kotlin.org
• spring.io
• repo.spring.io

​

Pengelola Paket - Bahasa Lain

• packagist.org (PHP Composer)
• www.packagist.org
• repo.packagist.org
• nuget.org (.NET NuGet)
• www.nuget.org
• api.nuget.org
• pub.dev (Dart/Flutter)
• api.pub.dev
• hex.pm (Elixir/Erlang)
• www.hex.pm
• cpan.org (Perl CPAN)
• www.cpan.org
• metacpan.org
• www.metacpan.org
• api.metacpan.org
• cocoapods.org (iOS/macOS)
• www.cocoapods.org
• cdn.cocoapods.org
• haskell.org
• www.haskell.org
• hackage.haskell.org
• swift.org
• www.swift.org

​

Distribusi Linux

• archive.ubuntu.com
• security.ubuntu.com
• ubuntu.com
• www.ubuntu.com
• *.ubuntu.com
• ppa.launchpad.net
• launchpad.net
• www.launchpad.net

​

Alat Pengembangan & Platform

• dl.k8s.io (Kubernetes)
• pkgs.k8s.io
• k8s.io
• www.k8s.io
• releases.hashicorp.com (HashiCorp)
• apt.releases.hashicorp.com
• rpm.releases.hashicorp.com
• archive.releases.hashicorp.com
• hashicorp.com
• www.hashicorp.com
• repo.anaconda.com (Anaconda/Conda)
• conda.anaconda.org
• anaconda.org
• www.anaconda.com
• anaconda.com
• continuum.io
• apache.org (Apache)
• www.apache.org
• archive.apache.org
• downloads.apache.org
• eclipse.org (Eclipse)
• www.eclipse.org
• download.eclipse.org
• nodejs.org (Node.js)
• www.nodejs.org

​

Layanan Cloud & Monitoring

• statsig.com
• www.statsig.com
• api.statsig.com
• sentry.io
• *.sentry.io
• http-intake.logs.datadoghq.com
• *.datadoghq.com
• *.datadoghq.eu

​

Pengiriman Konten & Mirror

• sourceforge.net
• *.sourceforge.net
• packagecloud.io
• *.packagecloud.io

​

Skema & Konfigurasi

• json-schema.org
• www.json-schema.org
• json.schemastore.org
• www.schemastore.org

​

Model Context Protocol

• *.modelcontextprotocol.io

​

Praktik terbaik keamanan untuk akses jaringan yang disesuaikan

1. Prinsip privilege minimal: Hanya aktifkan akses jaringan minimum yang diperlukan
2. Audit secara teratur: Tinjau domain yang diizinkan secara berkala
3. Gunakan HTTPS: Selalu lebih suka endpoint HTTPS daripada HTTP

​

Keamanan dan isolasi

• Mesin virtual terisolasi: Setiap sesi berjalan di VM yang terisolasi dan dikelola Anthropic
• Kontrol akses jaringan: Akses jaringan dibatasi secara default, dan dapat dinonaktifkan

• Perlindungan kredensial: Kredensial sensitif (seperti kredensial git atau kunci penandatanganan) tidak pernah ada di dalam sandbox dengan Claude Code. Autentikasi ditangani melalui proxy aman menggunakan kredensial bersistem
• Analisis aman: Kode dianalisis dan dimodifikasi dalam VM terisolasi sebelum membuat PR

​

Harga dan batas laju

​

Batasan

• Autentikasi repositori: Anda hanya dapat memindahkan sesi dari web ke lokal saat Anda diautentikasi ke akun yang sama
• Pembatasan platform: Claude Code di web hanya bekerja dengan kode yang dihosting di GitHub. Instans GitHub Enterprise Server yang di-host sendiri didukung untuk rencana Teams dan Enterprise. Repositori GitLab dan non-GitHub lainnya tidak dapat digunakan dengan sesi cloud

​

Praktik terbaik

1. Otomatisasi penyiapan lingkungan: Gunakan setup scripts untuk menginstal dependensi dan mengonfigurasi alat sebelum Claude Code diluncurkan. Untuk skenario yang lebih canggih, konfigurasikan SessionStart hooks.
2. Dokumentasikan persyaratan: Tentukan dengan jelas dependensi dan perintah di file CLAUDE.md Anda. Jika Anda memiliki file AGENTS.md, Anda dapat bersumber di CLAUDE.md Anda menggunakan @AGENTS.md untuk mempertahankan sumber kebenaran tunggal.

​

Sumber daya terkait

• Konfigurasi Hooks
• Referensi Pengaturan
• Keamanan
• Penggunaan Data