Cowork: Claude Code for the rest of your work .button_main_icon { transition: color 300ms ease; } .button_main_wrap:hover .button_main_icon { color: var(--_button-style---icon-hover); } .button_main_wrap:focus-within .button_main_icon { color: var(--_button-style---text-hover) !important; } .button_main_wrap:focus-within { color: var(--_button-style---text-hover) !important; } .button_main_icon { transition: color 300ms ease; } .button_main_wrap:hover .button_main_icon { color: var(--_button-style---icon-hover); } .button_main_wrap:focus-within .button_main_icon { color: var(--_button-style---text-hover) !important; } .button_main_wrap:focus-within { color: var(--_button-style---text-hover) !important; } CategoryProduct announcementsAgentsProductClaude appsDateJanuary 12, 2026Reading time5minShareCopy linkhttps://claude.com/blog/cowork-research-previewUpdate: Cowork is now available to Team and Enterprise plans in research preview. (January 23, 2026)Update: Cowork is now available to Pro subscribers in research preview. (January 16, 2026)‍When we released Claude Code, we expected developers to use it for coding. They did—and then quickly began using it for almost everything else. This prompted us to build Cowork: a simpler way for anyone—not just developers—to work with Claude in the very same way. Cowork is available today as a research preview for Claude Max subscribers on our macOS app, and we will improve it rapidly from here.How is using Cowork different from a regular conversation? In Cowork, you give Claude access to a folder of your choosing on your computer. Claude can then read, edit, or create files in that folder. It can, for example, re-organize your downloads by sorting and renaming each file, create a new spreadsheet with a list of expenses from a pile of screenshots, or produce a first draft of a report from your scattered notes. In Cowork, Claude completes work like this with much more agency than you’d see in a regular conversation. Once you’ve set it a task, Claude will make a plan and steadily complete it, while looping you in on what it’s up to. If you’ve used Claude Code, this will feel familiar—Cowork is built on the very same foundations. This means Cowork can take on many of the same tasks that Claude Code can handle, but in a more approachable form for non-coding tasks. When you’ve mastered the basics, you can make Cowork more powerful still. Claude can use your existing connectors, which link Claude to external information, and in Cowork we’ve added an initial set of skills that improve Claude’s ability to create documents, presentations, and other files. If you pair Cowork with Claude in Chrome, Claude can complete tasks that require browser access, too.Cowork is designed to make using Claude for new work as simple as possible. You don’t need to keep manually providing context or converting Claude’s outputs into the right format. Nor do you have to wait for Claude to finish before offering further ideas or feedback: you can queue up tasks and let Claude work through them in parallel. It feels much less like a back-and-forth and much more like leaving messages for a coworker. Stay in controlIn Cowork, you can choose which folders and connectors Claude can see: Claude can’t read or edit anything you don’t give it explicit access to. Claude will also ask before taking any significant actions, so you can steer or course-correct it as you need. That said, there are still things to be aware of before you give Claude control. By default, the main thing to know is that Claude can take potentially destructive actions (such as deleting local files) if it’s instructed to. Since there’s always some chance that Claude might misinterpret your instructions, you should give Claude very clear guidance around things like this. You should also be aware of the risk of “prompt injections”: attempts by attackers to alter Claude’s plans through content it might encounter on the internet. We’ve built sophisticated defenses against prompt injections, but agent safety—that is, the task of securing Claude’s real-world actions—is still an active area of development in the industry. These risks aren’t new with Cowork, but it might be the first time you’re using a more advanced tool that moves beyond a simple conversation. We recommend taking precautions, particularly while you learn how it works. We provide more detail in our Help Center. Looking forwardThis is a research preview. We’re releasing Cowork early because we want to learn what people use it for, and how they think it could be better. We encourage you to experiment with what Cowork can do for you, and to try things you don’t expect to work: you might be surprised! As we learn more from this preview, we plan to make lots of improvements (including by adding cross-device sync and bringing it to Windows), and we’ll identify further ways to make it safer. Claude Max subscribers can try Cowork now by downloading the macOS app, then clicking on “Cowork” in the sidebar. If you're on another plan, you can join the waitlist for future access. [data-slider-shell]{ display: none; } [data-slider-track] > [data-slider-card]{ flex: 0 0 auto; width: auto; min-width: 0; box-sizing: border-box; padding-left: 1rem; padding-right: 1rem; } [data-slider-prev], [data-slider-next] { transition: opacity 0.3s ease; } [data-slider-prev].is-disabled, [data-slider-next].is-disabled { opacity: 0.3; pointer-events: none; cursor: default; } [data-slider-dot] { width: 1.75rem; justify-content: center; display: flex; height: 1.75rem; align-items: center; } [data-slider-dot] span { display: block; width: 0.3125rem; height: 0.3125rem; border-radius: 999px; background: var(--_theme---border-secondary); transition: background 0.3s ease; } [data-slider-dot].is-active span { background: var(--_theme---foreground-primary); } document.addEventListener("DOMContentLoaded", function () { try { gsap.registerPlugin(Draggable); } catch (e) { return; } if (typeof Draggable === "undefined") return; function debounce(fn, wait){ let t; return (...a)=>{ clearTimeout(t); t=setTimeout(()=>fn(...a), wait); }; } document.querySelectorAll("[data-slider]").forEach(function (root) { if (root.dataset.scriptInitialized) return; root.dataset.scriptInitialized = "true"; var viewportConfigs = { desktop: { minWidth: 1200, slidesToShow: parseInt(root.getAttribute("data-slider-desktop-threshold")) || 4 }, tablet: { minWidth: 768, maxWidth: 1199, slidesToShow: parseInt(root.getAttribute("data-slider-tablet-threshold")) || 2 }, mobile: { maxWidth: 767, slidesToShow: 1 } }; var loopAttr = (root.getAttribute("data-slider-loop") || "").toLowerCase(); var centerAttr = (root.getAttribute("data-slider-center") || "").toLowerCase(); var LOOP = loopAttr === "true" || loopAttr === "1" || loopAttr === ""; var CENTER_MODE = centerAttr === "true" || centerAttr === "1"; var grid = root.querySelector("[data-slider-grid]"); var shell = root.querySelector("[data-slider-shell]"); var viewport = shell && shell.querySelector("[data-slider-viewport]"); var track = shell && shell.querySelector("[data-slider-track]"); var prevBtn = shell && shell.querySelector("[data-slider-prev]"); var nextBtn = shell && shell.querySelector("[data-slider-next]"); var controls = shell && shell.querySelector("[data-slider-controls]"); var dotsWrap = shell && shell.querySelector("[data-slider-dots]"); var mobileActive = shell && shell.querySelector("[data-slider-mobile-active]"); var mobileTotal = shell && shell.querySelector("[data-slider-mobile-total]"); if (!grid || !shell || !viewport || !track) return; try { viewport.style.touchAction = "pan-y"; } catch(e) {} var cards = Array.prototype.slice.call(grid.querySelectorAll("[data-slider-card]")); if (!cards.length) return; var placeholders = new Map(); cards.forEach(function (card) { var m = document.createComment("card-slot"); card.parentNode.insertBefore(m, card); placeholders.set(card, m); }); var currentMode = "grid"; var currentApi = null; var currentConfig = null; var activeIndex = 0; var originalLength = cards.length; var resizeObserver = null; function updateActiveSlide(currentSlide) { Array.prototype.slice.call(track.querySelectorAll("[data-slider-card]")).forEach(function (s){ s.classList.remove("is-active"); }); (currentSlide || cards[activeIndex]) && (currentSlide || cards[activeIndex]).classList.add("is-active"); } function getViewportConfig() { var w = window.innerWidth; if (w >= viewportConfigs.desktop.minWidth) return { key:'desktop', config: viewportConfigs.desktop }; if (w >= viewportConfigs.tablet.minWidth) return { key:'tablet', config: viewportConfigs.tablet }; return { key:'mobile', config: viewportConfigs.mobile }; } function shouldUseSlider() { var vp = getViewportConfig(); return cards.length > vp.config.slidesToShow; } function moveCardsToTrack() { cards.forEach(function (c, i) { c.setAttribute("data-slider-origin-index", String(i)); track.appendChild(c); }); grid.style.display = "none"; } function moveCardsBackToGrid() { Array.prototype.slice.call(track.querySelectorAll('[data-slider-clone="true"]')).forEach(function(n){ n.remove(); }); cards.forEach(function (c) { var m = placeholders.get(c); if (m && m.parentNode) m.parentNode.insertBefore(c, m); c.classList.remove("is-active"); }); gsap.set(cards, { clearProps: "all" }); gsap.set(track, { clearProps: "all" }); grid.style.display = ""; // 👈 show grid again } function ensureDots(count) { if (!dotsWrap) { dotsWrap = document.createElement("div"); dotsWrap.setAttribute("data-slider-dots", ""); (controls || shell).appendChild(dotsWrap); } if (dotsWrap.childElementCount !== count) { dotsWrap.innerHTML = ""; var frag = document.createDocumentFragment(); for (var i = 0; i < count; i++) { (function (ii) { var b = document.createElement("button"); b.type = "button"; b.setAttribute("data-slider-dot", ""); b.setAttribute("aria-label", "Go to item " + (ii + 1)); var span = document.createElement("span"); b.appendChild(span); b.addEventListener("click", function () { currentApi && currentApi.toIndex(ii, { duration: 0.5, ease: "power1.inOut" }); }); frag.appendChild(b); })(i); } dotsWrap.appendChild(frag); } dotsWrap.style.display = LOOP ? "" : "none"; updateDots(); } function updateDots() { if (!dotsWrap || !LOOP) return; Array.prototype.slice.call(dotsWrap.querySelectorAll("[data-slider-dot]")).forEach(function (d, i) { var on = i === activeIndex; d.classList.toggle("is-active", on); d.setAttribute("aria-current", on ? "true" : "false"); }); } function updateMobileCounter() { if (mobileActive) mobileActive.textContent = String(activeIndex + 1); if (mobileTotal) mobileTotal.textContent = String(originalLength); } function setBtnState(btn, disabled) { if (!btn) return; btn.disabled = !!disabled; btn.classList.toggle("is-disabled", !!disabled); btn.setAttribute("aria-disabled", disabled ? "true" : "false"); } function updateButtonsState() { if (!currentConfig) return; if (LOOP) { setBtnState(prevBtn,false); setBtnState(nextBtn,false); return; } var maxIndex = Math.max(0, originalLength - currentConfig.slidesToShow); setBtnState(prevBtn, activeIndex <= 0); setBtnState(nextBtn, activeIndex >= maxIndex); } function showControls(show) { if (controls) controls.style.display = show ? "" : "none"; } function initializeSlider() { var vp = getViewportConfig(); currentConfig = vp.config; if (currentApi) { currentApi.kill && currentApi.kill(); currentApi = null; } gsap.set(track, { clearProps: "all" }); gsap.set(cards, { clearProps: "all" }); shell.style.display = "block"; moveCardsToTrack(); track.style.display = "flex"; track.style.flexWrap = "nowrap"; track.style.willChange = "transform"; gsap.set(track, { x: 0, xPercent: 0 }); requestAnimationFrame(() => { requestAnimationFrame(() => { if (LOOP) addClonesForLooping(); ensureDots(originalLength); currentApi = LOOP ? buildLoopingSlider() : buildLinearSlider(currentConfig); prevBtn && prevBtn.addEventListener("click", onPrev); nextBtn && nextBtn.addEventListener("click", onNext); showControls(true); updateButtonsState(); currentMode = "slider"; }); }); } function initializeGrid() { if (currentApi) { currentApi.kill && currentApi.kill(); currentApi = null; } prevBtn && prevBtn.removeEventListener("click", onPrev); nextBtn && nextBtn.removeEventListener("click", onNext); shell.style.display = "none"; moveCardsBackToGrid(); showControls(false); currentMode = "grid"; currentConfig = null; } function evaluateAndUpdate() { var needs = shouldUseSlider(); var vp = getViewportConfig(); if (needs) { if (currentMode !== "slider" || !currentConfig || currentConfig !== vp.config) initializeSlider(); } else { if (currentMode !== "grid") initializeGrid(); } } function onPrev(){ currentApi && currentApi.previous({ duration: 0.45, ease: "power1.inOut" }); } function onNext(){ currentApi && currentApi.next({ duration: 0.45, ease: "power1.inOut" }); } function handleResize(){ evaluateAndUpdate(); } if (window.ResizeObserver) { resizeObserver = new ResizeObserver(debounce(handleResize, 200)); resizeObserver.observe(document.documentElement); } window.addEventListener("resize", debounce(handleResize, 200)); evaluateAndUpdate(); function cleanup() { if (resizeObserver) resizeObserver.disconnect(); if (currentApi) currentApi.kill && currentApi.kill(); } root._sliderCleanup = cleanup; function addClonesForLooping() { Array.prototype.slice.call(track.querySelectorAll('[data-slider-clone="true"]')).forEach(function(n){ n.remove(); }); var widths = cards.map(function (el) { return el.getBoundingClientRect().width; }); var avgW = widths.reduce((a, b) => a + b, 0) / Math.max(widths.length, 1); var needAcross = Math.ceil((viewport.clientWidth * 1.5) / Math.max(avgW, 1)); var clonesEachSide = Math.max(2, needAcross); for (var i = 0; i < clonesEachSide; i++) { var src = cards[cards.length - 1 - (i % cards.length)]; var clone = src.cloneNode(true); clone.setAttribute("data-slider-clone", "true"); clone.setAttribute("data-slider-origin-index", src.getAttribute("data-slider-origin-index")); track.insertBefore(clone, track.firstChild); } for (var j = 0; j < clonesEachSide; j++) { var src2 = cards[j % cards.length]; var clone2 = src2.cloneNode(true); clone2.setAttribute("data-slider-clone", "true"); clone2.setAttribute("data-slider-origin-index", src2.getAttribute("data-slider-origin-index")); track.appendChild(clone2); } } function buildLoopingSlider() { var items = Array.prototype.slice.call(track.children); var tl = horizontalLoop(items, { paused: true, draggable: true, center: CENTER_MODE ? viewport : false, speed: 1, snap: false, onChange: function (el) { var mapped = parseInt(el.getAttribute("data-slider-origin-index") || "0", 10) || 0; activeIndex = mapped; updateDots(); updateMobileCounter(); updateButtonsState(); updateActiveSlide(el); }, _trigger: viewport }); tl.pause(0); var api = { toIndex: function(i, vars) { var idxInItems = tl.findNearestIndexForOrigin(i); return tl.toIndex(idxInItems, vars); }, next: (vars) => { var target = tl.findNearestIndexForOrigin((activeIndex + 1) % originalLength); return tl.toIndex(target, vars); }, previous: (vars) => { var target = tl.findNearestIndexForOrigin((activeIndex - 1 + originalLength) % originalLength); return tl.toIndex(target, vars); }, current: () => activeIndex, kill: () => { try { if (tl.draggable) tl.draggable.kill(); } catch (e) {} try { tl.kill(); } catch (e) {} } }; api.toIndex(0, { duration: 0 }); updateMobileCounter(); return api; } function buildLinearSlider(config) { var items = cards.slice(); var cur = 0; var bounds = { minX: 0, maxX: 0 }; var offsets = []; var draggable; function innerViewportWidth() { var cs = getComputedStyle(viewport); var padL = parseFloat(cs.paddingLeft) || 0; var padR = parseFloat(cs.paddingRight) || 0; return Math.max(0, viewport.clientWidth - padL - padR); } function measure() { return new Promise(function (resolve) { requestAnimationFrame(function () { requestAnimationFrame(function () { var trackW = track.scrollWidth; if (!trackW || trackW < 1) { var last = items[items.length - 1]; trackW = last ? last.offsetLeft + last.offsetWidth : 0; } var innerW = innerViewportWidth(); var maxOffset = Math.max(0, trackW - innerW); offsets = items.map(function (el) { var left = el.offsetLeft; var w = el.offsetWidth; var target = CENTER_MODE ? left + w / 2 - innerW / 2 : left; if (target < 0) target = 0; if (target > maxOffset) target = maxOffset; return target; }); bounds.maxX = 0; bounds.minX = -maxOffset; resolve(); }); }); }); } function applyIndex(i, vars) { var maxIndex = Math.max(0, items.length - config.slidesToShow); i = Math.max(0, Math.min(maxIndex, i)); cur = i; activeIndex = cur; updateMobileCounter(); updateButtonsState(); updateActiveSlide(cards[cur]); var x = -offsets[i]; return gsap.to(track, Object.assign({ x: x, duration: 0.45, ease: "power1.inOut" }, vars)); } function next(vars){ return applyIndex(cur + 1, vars); } function previous(vars){ return applyIndex(cur - 1, vars); } draggable = Draggable.create(track, { type: "x", bounds: bounds, inertia: false, trigger: viewport, dragClickables: true, minimumMovement: 4, onPressInit: async function () { gsap.killTweensOf(track); await measure(); this.applyBounds(bounds); gsap.set(track, { x: -offsets[cur] }); }, onRelease: function () { var xNow = this.x; var best = 0, bestDist = Infinity; var maxIndex = Math.max(0, items.length - config.slidesToShow); for (var k = 0; k <= maxIndex; k++) { var targetX = -offsets[k]; var d = Math.abs(xNow - targetX); if (d < bestDist) { bestDist = d; best = k; } } applyIndex(best, { duration: 0.25, ease: "power2.out" }); } })[0]; (async function init(){ await measure(); draggable && draggable.applyBounds(bounds); gsap.set(track, { x: -offsets[0] }); activeIndex = 0; updateMobileCounter(); updateButtonsState(); updateActiveSlide(cards[0]); })(); return { toIndex: (i, vars) => applyIndex(i, vars), next: next, previous: previous, current: () => cur, kill: function () { try { draggable && draggable.kill(); } catch (e) {} } }; } function horizontalLoop(items, config) { items = gsap.utils.toArray(items); config = config || {}; let triggerEl = config._trigger || items[0].parentNode; let timeline; gsap.context(() => { let onChange = config.onChange, lastIndex = 0, tl = gsap.timeline({ repeat: config.repeat, onUpdate: onChange && function () { let i = tl.closestIndex(); if (lastIndex !== i) { lastIndex = i; onChange(items[i], i); } }, paused: config.paused, defaults: { ease: "none" }, onReverseComplete: () => tl.totalTime(tl.rawTime() + tl.duration() * 100) }), length = items.length, startX = items[0].offsetLeft, times = [], widths = [], spaceBefore = [], xPercents = [], curIndex = 0, center = config.center, pixelsPerSecond = (config.speed || 1) * 100, snap = config.snap === false ? (v) => v : gsap.utils.snap(config.snap || 1), container = center === true ? items[0].parentNode : gsap.utils.toArray(center)[0] || items[0].parentNode, totalWidth, timePerPixel; const getTotalWidth = () => items[length - 1].offsetLeft + (xPercents[length - 1] / 100) * widths[length - 1] - startX + spaceBefore[0] + items[length - 1].offsetWidth * gsap.getProperty(items[length - 1], "scaleX") + (parseFloat(config.paddingRight) || 0); const populateWidths = () => { let b1 = container.getBoundingClientRect(), b2; items.forEach((el, i) => { widths[i] = el.offsetWidth; xPercents[i] = snap( (parseFloat(gsap.getProperty(el, "x", "px")) / widths[i]) * 100 + gsap.getProperty(el, "xPercent") ); b2 = el.getBoundingClientRect(); spaceBefore[i] = b2.left - (i ? b1.right : b1.left); b1 = b2; }); gsap.set(items, { xPercent: (i) => xPercents[i] }); totalWidth = getTotalWidth(); }; const populateTimeline = () => { let i, item, curX, distanceToStart, distanceToLoop; tl.clear(); for (i = 0; i < length; i++) { item = items[i]; curX = (xPercents[i] / 100) * widths[i]; distanceToStart = item.offsetLeft + curX - startX + spaceBefore[0]; distanceToLoop = distanceToStart + widths[i] * gsap.getProperty(item, "scaleX"); tl.to(item, { xPercent: snap(((curX - distanceToLoop) / widths[i]) * 100), duration: distanceToLoop / pixelsPerSecond }, 0) .fromTo(item, { xPercent: snap(((curX - distanceToLoop + totalWidth) / widths[i]) * 100) }, { xPercent: xPercents[i], duration: (curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond, immediateRender: false }, distanceToLoop / pixelsPerSecond) .add("label" + i, distanceToStart / pixelsPerSecond); times[i] = distanceToStart / pixelsPerSecond; } timePerPixel = tl.duration() / (totalWidth || 1); }; gsap.set(items, { x: 0 }); populateWidths(); populateTimeline(); function toIndex(index, vars) { vars = vars || {}; Math.abs(index - curIndex) > length / 2 && (index += index > curIndex ? -length : length); let newIndex = gsap.utils.wrap(0, length, index); let time = times[newIndex]; if (time > tl.time() !== index > curIndex && index !== curIndex) { time += tl.duration() * (index > curIndex ? 1 : -1); } curIndex = newIndex; vars.overwrite = true; return vars.duration === 0 ? tl.time(time) : tl.tweenTo(time, vars); } tl.toIndex = (index, vars) => toIndex(index, vars); tl.closestIndex = () => { let i = times.length, closest = 1e10, index = 0, d; while (i--) { d = Math.abs(times[i] - tl.time()); if (d < closest) { closest = d; index = i; } } return index; }; tl.current = () => curIndex; tl.next = (vars) => toIndex(tl.current() + 1, vars); tl.previous = (vars) => toIndex(tl.current() - 1, vars); tl.progress(1, true).progress(0, true); tl.findNearestIndexForOrigin = function (originIndex) { originIndex = Number(originIndex) || 0; var candidates = []; for (var i = 0; i < items.length; i++) { var oi = Number(items[i].getAttribute("data-slider-origin-index") || -1); if (oi === originIndex) candidates.push(i); } if (!candidates.length) return tl.closestIndex(); var t = tl.time(); var best = candidates[0], bestD = Math.abs(times[best] - t); for (var j = 1; j < candidates.length; j++) { var k = candidates[j], d = Math.abs(times[k] - t); if (d < bestD) { bestD = d; best = k; } } return best; }; if (config.draggable && typeof Draggable === "function") { const proxy = document.createElement("div"); let lastX = 0; tl.draggable = Draggable.create(proxy, { type: "x", trigger: triggerEl, inertia: false, dragClickables: true, minimumMovement: 4, onPressInit: function () { lastX = this.x; tl.pause(); }, onDrag: function () { const dx = this.x - lastX; lastX = this.x; const dt = (-dx) * timePerPixel; tl.time(gsap.utils.wrap(0, tl.duration(), tl.time() + dt)); }, onRelease: function () { const idx = tl.closestIndex(); tl.toIndex(idx, { duration: 0.25, ease: "power2.out" }); } })[0]; } tl._refresh = function () { var keepIdx = tl.closestIndex(); populateWidths(); populateTimeline(); var oi = Number(items[keepIdx].getAttribute("data-slider-origin-index") || 0); var best = tl.findNearestIndexForOrigin(oi); tl.toIndex(best, { duration: 0 }); }; timeline = tl; }); timeline.kill = function () { try { timeline.draggable && timeline.draggable.kill(); } catch (e) {} try { timeline.clear && timeline.clear(); } catch (e) {} }; return timeline; } }); }); No items found.PrevPrev0/5NextNexteBook .button_small_icon { transition: color 300ms ease; } .button_small_wrap:hover .button_small_icon { color: var(--_button-style---icon-hover); } .button_small_wrap:focus-within .button_small_icon { color: var(--_button-style---text-hover) !important; } .button_small_wrap:focus-within { color: var(--_button-style---text-hover) !important; } FAQNo items found. .wf-design-mode [data-accordion="content"] { display: block; } .accordion_toggle_line.is-2 { transition: transform 500ms var(--ease-expo-out); } [data-accordion="component"].is-opened .accordion_toggle_line.is-2 { transform: rotate(0deg); } document.addEventListener("DOMContentLoaded", function () { document.querySelectorAll("[data-accordion='wrap']").forEach((component, listIndex) => { if (component.dataset.scriptInitialized) return; component.dataset.scriptInitialized = "true"; const closePrevious = component.getAttribute("data-close-previous") !== "false"; const closeOnSecondClick = component.getAttribute("data-close-on-second-click") !== "false"; const openOnHover = component.getAttribute("data-open-on-hover") === "true"; const openByDefault = component.getAttribute("data-open-by-default") !== null && !isNaN(+component.getAttribute("data-open-by-default")) ? +component.getAttribute("data-open-by-default") : false; const list = component.querySelector("[data-accordion='list']"); let previousIndex = null, closeFunctions = []; function removeCMSList(slot) { const dynList = Array.from(slot.children).find((child) => child.classList.contains("w-dyn-list")); if (!dynList) return; const nestedItems = dynList?.firstElementChild?.children; if (!nestedItems) return; const staticWrapper = [...slot.children]; [...nestedItems].forEach(el => el.firstElementChild && slot.appendChild(el.firstElementChild)); staticWrapper.forEach((el) => el.remove()); } removeCMSList(list); component.querySelectorAll("[data-accordion='component']").forEach((card, cardIndex) => { const button = card.querySelector("[data-accordion='toggle']"); const content = card.querySelector("[data-accordion='content']"); if (!button || !content ) return console.warn("Missing elements:", card); button.setAttribute("aria-expanded", "false"); button.setAttribute("id", "accordion_button_" + listIndex + "_" + cardIndex); content.setAttribute("id", "accordion_content_" + listIndex + "_" + cardIndex); button.setAttribute("aria-controls", content.id); content.setAttribute("aria-labelledby", button.id); content.style.display = "none"; const refresh = () => { tl.invalidate(); if (typeof ScrollTrigger !== "undefined") ScrollTrigger.refresh(); }; const tl = gsap.timeline({ paused: true, defaults: { duration: 0.3, ease: "power1.inOut" }, onComplete: refresh, onReverseComplete: refresh }); tl.set(content, { display: "block" }); tl.fromTo(content, { height: 0 }, { height: "auto" }); const closeAccordion = () => card.classList.contains("is-opened") && (card.classList.remove("is-opened"), tl.reverse(), button.setAttribute("aria-expanded", "false")); closeFunctions[cardIndex] = closeAccordion; const openAccordion = (instant = false) => { if (closePrevious && previousIndex !== null && previousIndex !== cardIndex) closeFunctions[previousIndex]?.(); previousIndex = cardIndex; button.setAttribute("aria-expanded", "true"); card.classList.add("is-opened"); instant ? tl.progress(1) : tl.play(); }; if (openByDefault === cardIndex + 1) openAccordion(true); button.addEventListener("click", () => (card.classList.contains("is-opened") && closeOnSecondClick ? (closeAccordion(), (previousIndex = null)) : openAccordion())); if (openOnHover) button.addEventListener("mouseenter", () => openAccordion()); }); }); }); .button_main_icon { transition: color 300ms ease; } .button_main_wrap:hover .button_main_icon { color: var(--_button-style---icon-hover); } .button_main_wrap:focus-within .button_main_icon { color: var(--_button-style---text-hover) !important; } .button_main_wrap:focus-within { color: var(--_button-style---text-hover) !important; } @container threshold-medium (width < 48em) { .header_col_title_wrap { flex-flow: column ; justify-content: flex-start; align-items: flex-start; } } Related postsExplore more product news and best practices for teams building with Claude.Jan 23, 2026Building multi-agent systems: when and how to use themAgentsBuilding multi-agent systems: when and how to use themBuilding multi-agent systems: when and how to use themBuilding multi-agent systems: when and how to use themBuilding multi-agent systems: when and how to use themJan 22, 2026Building agents with Skills: Equipping agents for specialized workAgentsBuilding agents with Skills: Equipping agents for specialized workBuilding agents with Skills: Equipping agents for specialized workBuilding agents with Skills: Equipping agents for specialized workBuilding agents with Skills: Equipping agents for specialized workJan 21, 2026Eight trends defining how software gets built in 2026AgentsEight trends defining how software gets built in 2026Eight trends defining how software gets built in 2026Eight trends defining how software gets built in 2026Eight trends defining how software gets built in 2026Nov 13, 2025Skills explained: How Skills compares to prompts, Projects, MCP, and subagents AgentsSkills explained: How Skills compares to prompts, Projects, MCP, and subagents Skills explained: How Skills compares to prompts, Projects, MCP, and subagents Skills explained: How Skills compares to prompts, Projects, MCP, and subagents Skills explained: How Skills compares to prompts, Projects, MCP, and subagents Transform how your organization operates with Claude .button_main_icon { transition: color 300ms ease; } .button_main_wrap:hover .button_main_icon { color: var(--_button-style---icon-hover); } .button_main_wrap:focus-within .button_main_icon { color: var(--_button-style---text-hover) !important; } .button_main_wrap:focus-within { color: var(--_button-style---text-hover) !important; } See pricingSee pricingSee pricing .button_main_icon { transition: color 300ms ease; } .button_main_wrap:hover .button_main_icon { color: var(--_button-style---icon-hover); } .button_main_wrap:focus-within .button_main_icon { color: var(--_button-style---text-hover) !important; } .button_main_wrap:focus-within { color: var(--_button-style---text-hover) !important; } Contact salesContact salesContact salesGet the developer newsletterProduct updates, how-tos, community spotlights, and more. Delivered monthly to your inbox. document.addEventListener('DOMContentLoaded', function() { // Find all forms with data-form='iterable' function initializeIterableForms() { const forms = document.querySelectorAll('form[data-form="iterable"]'); forms.forEach(form => { // Skip if already initialized if (form.dataset.iterableInitialized) return; form.dataset.iterableInitialized = 'true'; // Store original action const originalAction = form.getAttribute('action'); form.removeAttribute('action'); // Handle form submission form.addEventListener('submit', async function(e) { e.preventDefault(); e.stopPropagation(); const emailInput = form.querySelector('input[type="email"]'); const email = emailInput ? emailInput.value : ''; if (!email) return; // Disable submit button const submitBtn = form.querySelector('button[type="submit"]'); if (submitBtn) { submitBtn.disabled = true; } try { // Submit to Iterable await fetch(originalAction || 'https://links.iterable.com/lists/publicAddSubscriberForm?publicIdString=f12dbb96-5d68-4b76-8013-9f175aa07346', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: `email=${encodeURIComponent(email)}`, mode: 'no-cors' }); // Show success message const successDiv = form.parentElement.querySelector('.w-form-done'); const errorDiv = form.parentElement.querySelector('.w-form-fail'); if (successDiv) { successDiv.style.display = 'block'; form.style.display = 'none'; } if (errorDiv) { errorDiv.style.display = 'none'; } } catch (error) { // Show error message const errorDiv = form.parentElement.querySelector('.w-form-fail'); if (errorDiv) { errorDiv.style.display = 'block'; } } finally { // Re-enable submit button if (submitBtn) { submitBtn.disabled = false; } } }); }); } // Initialize on load initializeIterableForms(); // Watch for dynamically added forms const observer = new MutationObserver(() => { initializeIterableForms(); }); observer.observe(document.body, { childList: true, subtree: true }); }); SubscribeSubscribePlease provide your email address if you'd like to receive our monthly developer newsletter. You can unsubscribe at any time.Thank you! You’re subscribed.Sorry, there was a problem with your submission, please try again later. @container (width < 52em) { .footer_layout { display: flex; column-gap: var(--_spacing---space--4rem); row-gap: var(--_spacing---space--4rem); } .footer_content_wrap.u-column-custom { display: contents; } } .footer_link { opacity: 1; transition: opacity 0.3s ease; } .footer_links_list:has(.footer_link:hover) .footer_link:not(:hover) { opacity: 0.4; } HomepageHomepageNextNextThank you! Your submission has been received!Oops! Something went wrong while submitting the form. (function () { const ROOT_SEL = "[data-prompt-scope]"; const TRIGGER_SEL = "[data-prompt-trigger]"; const MENU_ATTR = "data-prompt-menu"; const CLOSE_SEL = "[data-prompt-menu-close]"; const ACTION_SEL = "a, button, [data-prompt-menu-action]"; const ITEM_SEL = "[data-prompt-item], li, .menu-item, .w-dyn-item"; // ---------- Claude helper ---------- function buildClaudeUrl(text) { const url = new URL("https://claude.ai/new"); url.searchParams.set("q", text || ""); return url.toString(); } function openClaude(text) { const q = (text || "").trim(); if (!q) return; window.open(buildClaudeUrl(q), "_blank", "noopener"); } // ---------- Utilities ---------- let uid = 0; function makeId(prefix = "prompt-menu") { uid += 1; return `${prefix}-${Date.now().toString(36)}-${uid}`; } // Limit queries to elements that belong to THIS scope (ignore nested scopes) function qsaInScope(root, sel) { return Array.from(root.querySelectorAll(sel)).filter( (el) => el.closest(ROOT_SEL) === root ); } // Lightweight shield to stop click-through during the brief close animation function deployClickShield(ms = 300) { const sh = document.createElement("div"); sh.style.cssText = "position:fixed;inset:0;z-index:2147483647;pointer-events:auto;background:transparent"; document.body.appendChild(sh); setTimeout(() => { sh.remove(); }, ms); } // Pairing: find which menu a trigger controls (no manual ids needed) function resolveMenuForTrigger(root, trigger) { // 1) explicit data-prompt-trigger="x" -> [data-prompt-menu="x"] const explicit = trigger.getAttribute("data-prompt-trigger"); if (explicit) { const m = qsaInScope(root, `[${MENU_ATTR}="${explicit}"]`)[0]; if (m) return m; } // 2) aria-controls const ctrl = trigger.getAttribute("aria-controls"); if (ctrl) { const m = qsaInScope(root, `#${ctrl.replace(/(["'\\])/g, "\\$1")}`)[0]; if (m) return m; } // 3) nearest following sibling with [data-prompt-menu] let sib = trigger.nextElementSibling; while (sib && sib !== root) { if ( sib.hasAttribute && sib.hasAttribute(MENU_ATTR) && sib.closest(ROOT_SEL) === root ) return sib; sib = sib.nextElementSibling; } // 4) first menu in this root return qsaInScope(root, `[${MENU_ATTR}]`)[0] || null; } function ensurePairing(trigger, menu) { if (!menu.id) menu.id = makeId(); trigger.setAttribute("aria-controls", menu.id); if (trigger.tagName === "BUTTON" && !trigger.hasAttribute("type")) trigger.type = "button"; } // ---------- Animations (GSAP) ---------- function revealMenu(menu) { return new Promise((resolve) => { gsap.set(menu, { visibility: "visible", pointerEvents: "auto", willChange: "transform, opacity", }); gsap.killTweensOf(menu); gsap.fromTo( menu, { opacity: 0, scale: 0.96 }, { opacity: 1, scale: 1, duration: 0.28, ease: "power3.out", clearProps: "willChange", onComplete: resolve, } ); }); } function hideMenu(menu) { return new Promise((resolve) => { gsap.killTweensOf(menu); gsap.to(menu, { opacity: 0, duration: 0.2, ease: "power2.out", onComplete: () => { gsap.set(menu, { visibility: "hidden", pointerEvents: "none", clearProps: "opacity,scale,willChange", }); resolve(); }, }); }); } // ---------- Per-scope controller ---------- const stateMap = new WeakMap(); // root -> { openMenuEl, openTrigger, isAnimating } function getState(root) { let s = stateMap.get(root); if (!s) { s = { openMenuEl: null, openTrigger: null, isAnimating: false }; stateMap.set(root, s); } return s; } function setTriggersInteractive(root, enabled) { qsaInScope(root, TRIGGER_SEL).forEach((el) => { el.style.pointerEvents = enabled ? "auto" : "none"; }); } // ---------- Button fade animations ---------- function fadeOutButtons(root) { return new Promise((resolve) => { const buttons = qsaInScope(root, TRIGGER_SEL); if (buttons.length === 0) { resolve(); return; } gsap.killTweensOf(buttons); gsap.to(buttons, { autoAlpha: 0, duration: 0.2, ease: "power2.out", onComplete: resolve, }); }); } function fadeInButtons(root) { return new Promise((resolve) => { const buttons = qsaInScope(root, TRIGGER_SEL); if (buttons.length === 0) { resolve(); return; } gsap.killTweensOf(buttons); gsap.to(buttons, { autoAlpha: 1, duration: 0.2, ease: "power2.out", onComplete: resolve, }); }); } async function openMenuIn(root, menu, trigger) { const s = getState(root); if (s.isAnimating || s.openMenuEl === menu) return; s.isAnimating = true; // close any currently open in THIS scope only if (s.openMenuEl && s.openMenuEl !== menu) { await hideMenu(s.openMenuEl); if (s.openTrigger) s.openTrigger.setAttribute("aria-expanded", "false"); } // Fade out buttons when opening menu await fadeOutButtons(root); await revealMenu(menu); s.openMenuEl = menu; s.openTrigger = trigger || null; if (s.openTrigger) s.openTrigger.setAttribute("aria-expanded", "true"); // Disable only this scope's triggers while open setTriggersInteractive(root, false); s.isAnimating = false; } async function closeMenuIn(root) { const s = getState(root); if (!s.openMenuEl || s.isAnimating) return; s.isAnimating = true; deployClickShield(280); // prevent click-through during closing await hideMenu(s.openMenuEl); if (s.openTrigger) s.openTrigger.setAttribute("aria-expanded", "false"); s.openMenuEl = null; s.openTrigger = null; // Re-enable only this scope's triggers setTriggersInteractive(root, true); // Fade in buttons when closing menu await fadeInButtons(root); s.isAnimating = false; } // ---------- Initializer ---------- const initedRoots = new WeakSet(); function initScope(root) { if (!root || initedRoots.has(root)) return; initedRoots.add(root); if (!window.gsap) { console.warn("GSAP is required for prompt menus."); return; } // Normalize ALL menus in this scope to hidden on init (prevents “open on load” bugs) qsaInScope(root, `[${MENU_ATTR}]`).forEach((menu) => { if (menu.dataset.pmMenuInit) return; menu.dataset.pmMenuInit = "true"; gsap.set(menu, { visibility: "hidden", opacity: 0, scale: 1, pointerEvents: "none", }); // Optional close button const closer = menu.querySelector(CLOSE_SEL); if (closer) { if (closer.tagName === "BUTTON" && !closer.hasAttribute("type")) closer.type = "button"; closer.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); closeMenuIn(root); }); } // Menu item -> Claude menu.addEventListener("click", (e) => { const target = e.target.closest(ACTION_SEL); if (!target || !menu.contains(target)) return; const container = target.closest(ITEM_SEL) || target; const hiddenP = container.querySelector("[data-prompt-menu-text]"); if (!hiddenP) return; e.preventDefault(); e.stopPropagation(); const text = hiddenP.textContent || hiddenP.innerText || ""; openClaude(text); // close after action closeMenuIn(root); }); }); // Bind triggers (auto-wire) qsaInScope(root, TRIGGER_SEL).forEach((trigger) => { if (trigger.dataset.pmTrigInit) return; trigger.dataset.pmTrigInit = "true"; const menu = resolveMenuForTrigger(root, trigger); if (menu) ensurePairing(trigger, menu); trigger.setAttribute("aria-expanded", "false"); trigger.addEventListener("click", async (e) => { e.preventDefault(); const targetMenu = resolveMenuForTrigger(root, trigger); if (!targetMenu) return; const s = getState(root); if (s.openMenuEl === targetMenu) { await closeMenuIn(root); // toggle close return; } await openMenuIn(root, targetMenu, trigger); }); }); // Outside click (this scope only) document.addEventListener("click", (e) => { const s = getState(root); if (!s.openMenuEl) return; const insideMenu = s.openMenuEl.contains(e.target); const onTrigger = !!e.target.closest(TRIGGER_SEL) && root.contains(e.target); if (!insideMenu && !onTrigger) closeMenuIn(root); }); // ESC (this scope only) document.addEventListener("keydown", (e) => { if (e.key === "Escape") closeMenuIn(root); }); } // ---------- Boot + observe ---------- function boot(container = document) { const roots = container.querySelectorAll ? container.querySelectorAll(ROOT_SEL) : []; roots.forEach(initScope); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", () => boot(), { once: true, }); } else { boot(); } const mo = new MutationObserver((muts) => { for (const m of muts) { for (const node of m.addedNodes || []) { if (node.nodeType !== 1) continue; if (node.matches && node.matches(ROOT_SEL)) initScope(node); if (node.querySelectorAll) { node.querySelectorAll(ROOT_SEL).forEach(initScope); } } } }); mo.observe(document.documentElement, { childList: true, subtree: true }); })(); (function () { // ---------- Claude helper ---------- function buildClaudeUrl(text) { const url = new URL('https://claude.ai/new'); url.searchParams.set('q', text || ''); return url.toString(); } // ---------- Auto-grow helpers ---------- function sizeTextarea(el) { // Ensure UA defaults don't force a starting height el.setAttribute('rows', el.getAttribute('data-min-rows') || '1'); el.style.minHeight = '0px'; el.style.height = 'auto'; // allow shrink el.style.height = el.scrollHeight + 'px'; // fit content } function initAutogrow(root = document) { root.querySelectorAll('textarea[data-autogrow]').forEach((el) => { if (el.dataset.autogrowInit) return; el.dataset.autogrowInit = 'true'; // Respect your existing pattern for default text const preset = el.getAttribute('data-default-text'); if (preset != null && !el.value) el.value = preset; // Initial sizing sizeTextarea(el); // Resize as you type el.addEventListener('input', () => sizeTextarea(el)); // In case fonts/styles load late and change line-height window.addEventListener('load', () => sizeTextarea(el), { once: true }); }); } // ---------- Claude form initializer ---------- function initClaudeForms(root = document) { root.querySelectorAll('form[data-claude-form]').forEach((form) => { if (form.dataset.claudeInit) return; form.dataset.claudeInit = 'true'; const textarea = form.querySelector('[data-claude-textarea], textarea'); const trigger = form.querySelector('[data-claude-button], button[type="button"], a[data-claude-button]'); if (!textarea || !trigger) { console.warn('Claude form: missing textarea or trigger in', form); return; } // If the trigger is a

Introducing Cowork | Claude