From 2d0094f374038e5ff45b32d5090e82700663559e Mon Sep 17 00:00:00 2001 From: mesellings Date: Wed, 25 Mar 2026 06:45:51 +0000 Subject: [PATCH 01/28] docs(build): add initial page --- src/pages/build-with-camunda.js | 723 ++++++++++++++++++++++++ src/pages/build-with-camunda.module.css | 678 ++++++++++++++++++++++ 2 files changed, 1401 insertions(+) create mode 100644 src/pages/build-with-camunda.js create mode 100644 src/pages/build-with-camunda.module.css diff --git a/src/pages/build-with-camunda.js b/src/pages/build-with-camunda.js new file mode 100644 index 00000000000..9a97abc125c --- /dev/null +++ b/src/pages/build-with-camunda.js @@ -0,0 +1,723 @@ +import React from "react"; +import clsx from "clsx"; +import Layout from "@theme/Layout"; +import Link from "@docusaurus/Link"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import styles from "./build-with-camunda.module.css"; + +/* ─── Icon components ─── */ + +function CloudIcon() { + return ( + + + + ); +} + +function TerminalIcon() { + return ( + + + + + + ); +} + +function CheckIcon({ color = "#78a9ff" }) { + return ( + + + + + ); +} + +function KubernetesIcon() { + return ( + + + + + ); +} + +function DockerIcon() { + return ( + + + + + + + ); +} + +function AWSIcon() { + return ( + + + + + + ); +} + +function GCPIcon() { + return ( + + + + + ); +} + +function HelmIcon() { + return ( + + + + + + ); +} + +function ArrowRight() { + return ( + + + + ); +} + +/* ─── Reusable components ─── */ + +function VersionBadge({ version = "8.9+" }) { + return {version}; +} + +function CodeBlock({ children }) { + return {children}; +} + +function TerminalWindow({ title, children }) { + return ( +
+
+ + + + {title && {title}} +
+
+ 
{children}
+
+
+ ); +} + +/* ─── Main page ─── */ + +function BuildWithCamunda() { + return ( + +
+ {/* ─── Hero ─── */} +
+
+
+

+ Start building with +
+ Camunda +

+

+ Process orchestration for developers. Go from zero to a running + workflow in under two minutes — then let your AI coding agent take + over. +

+
+
+ + {/* ─── Two-card start options ─── */} +
+
+ {/* SaaS card */} +
+ + + + + FASTEST START + +

Free trial on SaaS

+

+ Get a fully managed Camunda cluster in seconds. Nothing to + install — sign up and start modeling. +

+
    +
  • + Zero setup — runs in Camunda's + cloud +
    • +
  • + Web Modeler included +
    • +
  • + 30 days free, full featured +
    • +
  • + Connect via{" "} + c8 login +
    • +
+
+ + Create free account + + + ~60 seconds to first cluster + +
+
+ + {/* CLI card */} +
+ + + + + FULL CONTROL + +

+ Run locally with the CLI +

+

+ Use c8ctl, the Camunda CLI tool. One + command to install, one to start. Full Camunda on your machine — + engine, Operate, Tasklist, connectors. +

+
    +
  • + Works on macOS, Linux, Windows +
    • +
  • + Desktop Modeler included +
    • +
  • + AI agent skills built in +
    • +
  • + Your data stays on your machine +
    • +
+
+ + See the install + + + ~2 minutes to running engine + +
+
+
+
+ + {/* ─── Quick install ─── */} +
+
+

+ Get started in one line +

+

+ Install c8ctl from npm and spin up a full + self-managed Camunda cluster on your machine. +

+
+ + {`$ npm install -g c8ctl +$ c8ctl cluster start + +✔ Zeebe broker started on port 26500 +✔ Operate available at http://localhost:8081 +✔ Tasklist available at http://localhost:8082 +✔ Connectors runtime started + +Camunda is running. Deploy your first process: + $ c8ctl process deploy my-process.bpmn`} + +
+ + {/* ─── More ways to run ─── */} +
+
+

More ways to run Camunda

+

+ Choose the setup that fits your workflow and infrastructure. +

+
+
+ + +

Docker Compose

+

+ Run the full Camunda stack locally with a single{" "} + docker compose up. +

+ + + +

Kubernetes

+

+ Deploy to any Kubernetes cluster with the official Camunda Helm + chart. +

+ +
+
+ + {/* ─── Production deployments ─── */} +
+
+

+ Production deployment options +

+

+ Run Camunda at scale on the infrastructure you already trust. +

+
+
+ + +

Amazon EKS

+

Deploy on AWS with managed Kubernetes.

+ + + +

Google GKE

+

Run on Google Cloud with native GKE support.

+ + + +

Kubernetes + Helm

+

Flexible deployment with the official Helm chart.

+ +
+
+ + {/* ─── Architecture ─── */} +
+
+

Architecture at a glance

+

+ Camunda's components work together to power process orchestration. + Click any component to explore its documentation. +

+
+
+
+ + Modeler + Design BPMN, DMN, and Forms + + + Console + Manage clusters and settings + +
+
▼
+
+ + Zeebe + Workflow engine at the core + +
+
▼
+
+ + Operate + Monitor and troubleshoot + + + Tasklist + Human task management + + + Connectors + Integrate external systems + +
+
+
+ + {/* ─── Everything from your terminal ─── */} +
+
+

+ Everything from your terminal +

+

+ c8ctl gives you a single CLI for the full + Camunda lifecycle — no browser required. +

+
+
+
+

Cluster management

+ + {`$ c8ctl cluster start +$ c8ctl cluster status +$ c8ctl cluster stop`} + +
+
+

Deploy processes

+ + {`$ c8ctl process deploy ./payment.bpmn +$ c8ctl process list +$ c8ctl process start payment-flow`} + +
+
+

Manage connectors

+ + {`$ c8ctl connector list +$ c8ctl connector install rest-connector +$ c8ctl connector logs rest-connector`} + +
+
+

Monitor and debug

+ + {`$ c8ctl instance list --active +$ c8ctl instance inspect +$ c8ctl incident list`} + +
+
+
+ + {/* ─── Teach your AI Agent ─── */} +
+
+

+ Teach your AI agent Camunda +

+

+ Give your coding assistant Camunda superpowers — deploy processes, + manage clusters, and query instances right from your AI workflow. +

+
+
+
+

Add Camunda skills with c8ctl

+ + {`$ c8ctl ai install-skills +✔ Installed Camunda skills for AI agents + +Available skills: + camunda.deploy Deploy a BPMN process + camunda.start Start a process instance + camunda.query Query running instances + camunda.tasklist Complete user tasks + camunda.operate Inspect and resolve incidents`} + +
+
+

Add to Claude with MCP

+ + {`// claude_desktop_config.json +{ + "mcpServers": { + "camunda": { + "command": "npx", + "args": ["-y", "c8ctl", "mcp-serve"], + "env": { + "CAMUNDA_CLUSTER_URL": + "http://localhost:26500" + } + } + } +}`} + +
+
+
+

Then ask your agent:

+
+
+ 💬 + "Deploy the order-process.bpmn and start an instance with + orderId=42" +
+
+ 💬 + "Show me all incidents on the payment-flow process" +
+
+ 💬 + "Scale the Zeebe brokers to 3 partitions" +
+
+
+
+ + {/* ─── Explore docs ─── */} +
+
+
+

Explore the docs

+
+
+ +

Get started

+

+ New to Camunda? Create an account and model your first + process. +

+ + +

Components

+

Learn about Modeler, Zeebe, Operate, Tasklist, and more.

+ + +

APIs and tools

+

Client libraries, REST APIs, SDKs, and integrations.

+ + +

Self-Managed

+

Host and operate Camunda on your own infrastructure.

+ + +

Best Practices

+

+ Level up your BPMN, DMN, and process orchestration skills. +

+ + +

Reference

+

Release notes, supported environments, and licenses.

+ +
+
+
+
+ + ); +} + +export default BuildWithCamunda; diff --git a/src/pages/build-with-camunda.module.css b/src/pages/build-with-camunda.module.css new file mode 100644 index 00000000000..3898367fb7c --- /dev/null +++ b/src/pages/build-with-camunda.module.css @@ -0,0 +1,678 @@ +/* stylelint-disable docusaurus/copyright-header */ + +/* ─── Page wrapper ─── */ +.page { + --mono-font: + "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + --page-bg: #ffffff; + --page-color: #3c4257; + --heading-color: #1a1f36; + --muted-color: #666; + --card-bg: #ffffff; + --card-border: #d9d9d9; + --card-hover-border: var(--ifm-color-primary); + --card-hover-shadow: rgba(0, 0, 0, 0.1); + --terminal-bg: #f5f6f8; + --terminal-header-bg: #e8e9ec; + --terminal-border: #d9d9d9; + --terminal-text: #3c4257; + --section-alt-bg: #f5f6f8; + --arch-connector-color: #bbb; + --inline-code-bg: rgba(197, 67, 2, 0.08); + --inline-code-color: #c54302; + --saas-card-bg: linear-gradient(145deg, #e8f0fe 0%, #f0f4ff 100%); + --saas-card-border: #b8d4fe; + --cli-card-bg: linear-gradient(145deg, #f5f5f5 0%, #eeeeee 100%); + --cli-card-border: #d0d0d0; + --check-text: #555; + --explore-bg: #f0f1f3; + --explore-border-top: #ddd; + background: var(--page-bg); + color: var(--page-color); + min-height: 100vh; +} + +[data-theme="dark"] .page { + --page-bg: #0a0a0f; + --page-color: #d1d1d1; + --heading-color: #f4f4f4; + --muted-color: #999; + --card-bg: #111118; + --card-border: #222; + --card-hover-border: #78a9ff; + --card-hover-shadow: rgba(120, 169, 255, 0.1); + --terminal-bg: #111118; + --terminal-header-bg: #1a1a22; + --terminal-border: #222; + --terminal-text: #c6c6c6; + --section-alt-bg: #0e0e14; + --arch-connector-color: #444; + --inline-code-bg: rgba(120, 169, 255, 0.12); + --inline-code-color: #78a9ff; + --saas-card-bg: linear-gradient(145deg, #0d1b3e 0%, #0f1629 100%); + --saas-card-border: #1a2a5e; + --cli-card-bg: linear-gradient(145deg, #1a1a1f 0%, #131316 100%); + --cli-card-border: #2a2a30; + --check-text: #ccc; + --explore-bg: #0e0e14; + --explore-border-top: #1a1a22; + background: var(--page-bg); + color: var(--page-color); +} + +/* Override global h2 border-bottom inside the page */ +.page h2 { + border-bottom: none !important; + padding-bottom: 0 !important; +} + +.page h4 { + margin-top: 0 !important; +} + +.page a { + text-decoration: none !important; +} + +.page li a { + text-decoration: none !important; +} + +.page p a { + text-decoration: none !important; +} + +/* ─── Hero ─── */ +.hero { + position: relative; + padding: 5rem 0 1.5rem; + text-align: center; + overflow: hidden; + background: var(--page-bg); +} + +.heroGlow { + position: absolute; + top: -120px; + left: 50%; + transform: translateX(-50%); + width: 600px; + height: 360px; + background: radial-gradient( + ellipse, + rgba(252, 93, 13, 0.1) 0%, + transparent 70% + ); + pointer-events: none; + z-index: 0; +} + +[data-theme="dark"] .heroGlow { + background: radial-gradient( + ellipse, + rgba(252, 93, 13, 0.18) 0%, + transparent 70% + ); +} + +.heroInner { + position: relative; + z-index: 1; +} + +.heroTitle { + font-size: 3.6rem; + font-weight: 800; + line-height: 1.1; + color: var(--heading-color); + margin: 0 0 1.2rem; + border-bottom: none; + padding: 0; +} + +.heroSub { + font-size: 1.15rem; + color: var(--muted-color); + max-width: 620px; + margin: 0 auto; + line-height: 1.7; +} + +@media (max-width: 768px) { + .heroTitle { + font-size: 2.4rem; + } + .hero { + padding: 3rem 0 2rem; + } +} + +/* ─── Section common ─── */ +.section { + padding: 3rem 0; +} + +.sectionLast { + padding-bottom: 4rem; +} + +.sectionHeader { + text-align: center; + margin-bottom: 2.5rem; +} + +.sectionTitle { + font-size: 2rem; + font-weight: 700; + color: var(--heading-color); + margin: 0 0 0.6rem; + border-bottom: none; + padding: 0; +} + +.sectionSub { + font-size: 1.05rem; + color: var(--muted-color); + max-width: 560px; + margin: 0 auto; + line-height: 1.6; +} + +/* ─── Start cards (SaaS vs CLI) ─── */ +.startGrid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; +} + +@media (max-width: 768px) { + .startGrid { + grid-template-columns: 1fr; + } +} + +.startCard { + border-radius: 16px; + padding: 2.4rem; + display: flex; + flex-direction: column; +} + +.startCardSaas { + background: var(--saas-card-bg); + border: 1px solid var(--saas-card-border); +} + +.startCardCli { + background: var(--cli-card-bg); + border: 1px solid var(--cli-card-border); +} + +.startCardIcon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + border-radius: 12px; + background: rgba(0, 0, 0, 0.04); + margin-bottom: 1rem; +} + +[data-theme="dark"] .startCardIcon { + background: rgba(255, 255, 255, 0.06); +} + +.startCardLabel { + font-size: 0.7rem; + font-weight: 700; + letter-spacing: 0.15em; + text-transform: uppercase; + margin-bottom: 0.5rem; +} + +.startCardTitle { + font-size: 1.6rem; + font-weight: 700; + color: var(--heading-color); + margin: 0 0 0.6rem; + border-bottom: none; + padding: 0; +} + +.startCardDesc { + font-size: 0.95rem; + color: var(--muted-color); + line-height: 1.6; + margin-bottom: 1.2rem; +} + +.checkList { + list-style: none; + padding: 0; + margin: 0 0 1.5rem; + display: flex; + flex-direction: column; + gap: 0.6rem; +} + +.checkList li { + display: flex; + align-items: flex-start; + gap: 0.6rem; + font-size: 0.9rem; + color: var(--check-text); +} + +.startCardFooter { + margin-top: auto; + display: flex; + align-items: center; + gap: 1rem; + flex-wrap: wrap; +} + +.ctaButton { + display: inline-flex; + align-items: center; + padding: 0.65rem 1.6rem; + border-radius: 8px; + font-size: 0.9rem; + font-weight: 600; + color: #fff !important; + background: #fc5d0d; + text-decoration: none !important; + transition: all 0.2s; + border: none; +} + +.ctaButton:hover { + background: #e04d00; + transform: translateY(-2px); + text-decoration: none !important; + color: #fff !important; +} + +.ctaButtonCli { + background: #fc5d0d; +} + +.ctaNote { + font-size: 0.8rem; + color: var(--muted-color); +} + +/* ─── Version badge ─── */ +.versionBadge { + display: inline-block; + font-size: 1rem; + font-weight: 700; + letter-spacing: 0.04em; + padding: 0.3em 0.9em; + border-radius: 999px; + background: rgba(120, 169, 255, 0.12); + color: #78a9ff; + vertical-align: middle; + margin-left: 0.5rem; + white-space: nowrap; +} + +[data-theme="dark"] .versionBadge { + background: rgba(120, 169, 255, 0.15); + color: #78a9ff; +} + +/* ─── Inline code ─── */ +.inlineCode { + background: var(--inline-code-bg); + color: var(--inline-code-color); + padding: 0.15em 0.45em; + border-radius: 4px; + font-size: 0.85em; + font-family: var(--mono-font); +} + +/* ─── Terminal ─── */ +.terminalWindow { + background: var(--terminal-bg); + border: 1px solid var(--terminal-border); + border-radius: 12px; + overflow: hidden; + max-width: 720px; + margin: 0 auto; +} + +.terminalHeader { + display: flex; + align-items: center; + gap: 6px; + padding: 12px 16px; + background: var(--terminal-header-bg); + border-bottom: 1px solid var(--terminal-border); +} + +.terminalDot { + width: 10px; + height: 10px; + border-radius: 50%; +} + +.terminalTitle { + margin-left: 12px; + font-size: 0.75rem; + color: var(--muted-color); +} + +.terminalBody { + padding: 1rem 1.4rem; +} + +.terminalPre { + margin: 0; + font-size: 0.82rem; + line-height: 1.7; + color: var(--terminal-text); + background: transparent; + font-family: var(--mono-font); + white-space: pre-wrap; + word-break: break-word; +} + +/* ─── More ways to run ─── */ +.waysGrid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; + max-width: 720px; + margin: 0 auto; +} + +@media (max-width: 640px) { + .waysGrid { + grid-template-columns: 1fr; + } +} + +.wayCard { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + background: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: 14px; + padding: 2rem 1.5rem; + transition: all 0.25s; + text-decoration: none !important; + color: var(--page-color) !important; +} + +.wayCard:hover { + border-color: var(--card-hover-border); + transform: translateY(-3px); + box-shadow: 0 8px 24px var(--card-hover-shadow); + color: var(--page-color) !important; + text-decoration: none !important; +} + +.wayCard h3 { + font-size: 1.15rem; + color: var(--heading-color); + margin: 0.8rem 0 0.4rem; +} + +.wayCard p { + font-size: 0.88rem; + color: var(--muted-color); + margin: 0; + line-height: 1.5; +} + +/* ─── Deploy grid ─── */ +.deployGrid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + max-width: 900px; + margin: 0 auto; +} + +@media (max-width: 768px) { + .deployGrid { + grid-template-columns: 1fr; + } +} + +.deployCard { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + background: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: 14px; + padding: 1.8rem 1.2rem; + transition: all 0.25s; + text-decoration: none !important; + color: var(--page-color) !important; +} + +.deployCard:hover { + border-color: #fc5d0d; + transform: translateY(-3px); + box-shadow: 0 8px 24px rgba(252, 93, 13, 0.1); + text-decoration: none !important; + color: var(--page-color) !important; +} + +.deployCard h4 { + font-size: 1rem; + color: var(--heading-color); + margin: 0.6rem 0 0.3rem; +} + +.deployCard p { + font-size: 0.85rem; + color: var(--muted-color); + margin: 0; + line-height: 1.4; +} + +/* ─── Architecture ─── */ +.archDiagram { + max-width: 800px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + gap: 0; +} + +.archRow { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +.archConnector { + color: var(--arch-connector-color); + font-size: 1.2rem; + line-height: 2; +} + +.archBox { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + background: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: 12px; + padding: 1.2rem 2rem; + min-width: 160px; + transition: all 0.25s; + text-decoration: none !important; + color: var(--page-color) !important; +} + +.archBox:hover { + border-color: var(--card-hover-border); + transform: translateY(-2px); + text-decoration: none !important; + color: var(--page-color) !important; +} + +.archBox strong { + font-size: 1rem; + color: var(--heading-color); +} + +.archBox span { + font-size: 0.78rem; + color: var(--muted-color); + margin-top: 0.25rem; +} + +.archBoxPrimary { + border-color: #78a9ff; + background: rgba(120, 169, 255, 0.06); +} + +/* ─── Command grid ─── */ +.commandGrid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; +} + +@media (max-width: 768px) { + .commandGrid { + grid-template-columns: 1fr; + } +} + +.commandCard h4 { + font-size: 0.95rem; + color: var(--heading-color); + margin: 0 0 0.8rem; + border-bottom: none; + padding: 0; +} + +.commandCard .terminalWindow { + max-width: 100%; +} + +/* ─── AI section ─── */ +.aiGrid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; + margin-bottom: 2rem; +} + +@media (max-width: 768px) { + .aiGrid { + grid-template-columns: 1fr; + } +} + +.aiCard h4 { + font-size: 0.95rem; + color: var(--heading-color); + margin: 0 0 0.8rem; + border-bottom: none; + padding: 0; +} + +.aiCard .terminalWindow { + max-width: 100%; +} + +.aiExamples { + background: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: 14px; + padding: 1.8rem 2rem; +} + +.aiExamples h4 { + font-size: 0.95rem; + color: var(--heading-color); + margin: 0 0 1rem; + border-bottom: none; + padding: 0; +} + +.aiExampleGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 1rem; +} + +.aiExampleItem { + display: flex; + align-items: flex-start; + gap: 0.6rem; + font-size: 0.88rem; + color: var(--muted-color); + font-style: italic; + line-height: 1.5; +} + +.aiPromptIcon { + font-style: normal; + font-size: 1rem; + flex-shrink: 0; +} + +/* ─── Explore docs ─── */ +.exploreSection { + background: var(--explore-bg); + padding: 3rem 0 4rem; + border-top: 1px solid var(--explore-border-top); +} + +.exploreGrid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} + +@media (max-width: 768px) { + .exploreGrid { + grid-template-columns: 1fr; + } +} + +.exploreCard { + background: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: 14px; + padding: 1.5rem 1.8rem; + transition: all 0.25s; + text-decoration: none !important; + color: var(--page-color) !important; +} + +.exploreCard:hover { + border-color: var(--card-hover-border); + transform: translateY(-3px); + box-shadow: 0 8px 24px var(--card-hover-shadow); + text-decoration: none !important; + color: var(--page-color) !important; +} + +.exploreCard h3 { + font-size: 1.1rem; + color: var(--heading-color); + margin: 0 0 0.4rem; +} + +.exploreCard p { + font-size: 0.88rem; + color: var(--muted-color); + margin: 0; + line-height: 1.5; +} From 3d9966866d591fd6911807928597383aa7fffd16 Mon Sep 17 00:00:00 2001 From: mesellings Date: Wed, 25 Mar 2026 07:23:49 +0000 Subject: [PATCH 02/28] docs(build): edits --- src/pages/build-with-camunda.js | 395 ++++++++++++++++-------- src/pages/build-with-camunda.module.css | 6 +- 2 files changed, 275 insertions(+), 126 deletions(-) diff --git a/src/pages/build-with-camunda.js b/src/pages/build-with-camunda.js index 9a97abc125c..573edeb8518 100644 --- a/src/pages/build-with-camunda.js +++ b/src/pages/build-with-camunda.js @@ -187,6 +187,125 @@ function HelmIcon() { ); } +/* ─── Architecture card icons ─── */ + +function ModelerIcon() { + return ( + + + + + ); +} + +function ConsoleIcon() { + return ( + + + + + ); +} + +function ZeebeIcon() { + return ( + + + + ); +} + +function OperateIcon() { + return ( + + + + + ); +} + +function TasklistIcon() { + return ( + + + + + + + ); +} + +function ConnectorsIcon() { + return ( + + + + + ); +} + function ArrowRight() { return (
-

- Start building with -
- Camunda -

+

Build with Camunda

Process orchestration for developers. Go from zero to a running workflow in under two minutes — then let your AI coding agent take @@ -331,9 +446,15 @@ function BuildWithCamunda() { Run locally with the CLI

- Use c8ctl, the Camunda CLI tool. One - command to install, one to start. Full Camunda on your machine — - engine, Operate, Tasklist, connectors. + Use{" "} + + c8ctl + + , the Camunda CLI tool. One command to install, one to start. + Full Camunda on your machine — engine, Operate, Tasklist, + connectors.

  • @@ -370,11 +491,17 @@ function BuildWithCamunda() {

    - Get started in one line + Get started in one line with c8ctl

    - Install c8ctl from npm and spin up a full - self-managed Camunda cluster on your machine. + Install{" "} + + c8ctl + {" "} + from npm and spin up a full Self-Managed Camunda cluster on your + machine.

    @@ -391,6 +518,132 @@ Camunda is running. Deploy your first process:
    + {/* ─── Everything from your terminal ─── */} +
    +
    +

    + Everything from your terminal +

    +

    + + c8ctl + {" "} + gives you a single CLI for the full Camunda lifecycle — no browser + required. +

    +
    +
    +
    +

    Cluster management

    + + {`$ c8ctl cluster start +$ c8ctl cluster status +$ c8ctl cluster stop`} + +
    +
    +

    Deploy processes

    + + {`$ c8ctl process deploy ./payment.bpmn +$ c8ctl process list +$ c8ctl process start payment-flow`} + +
    +
    +

    Manage connectors

    + + {`$ c8ctl connector list +$ c8ctl connector install rest-connector +$ c8ctl connector logs rest-connector`} + +
    +
    +

    Monitor and debug

    + + {`$ c8ctl instance list --active +$ c8ctl instance inspect +$ c8ctl incident list`} + +
    +
    +
    + + {/* ─── Teach your AI Agent ─── */} +
    +
    +

    + Teach your AI agent Camunda +

    +

    + Give your coding assistant Camunda superpowers. Deploy processes, + manage clusters, and query instances right from your AI workflow. +

    +
    +
    +
    +

    + + Add Camunda skills with c8ctl + +

    + + {`$ c8ctl ai install-skills +✔ Installed Camunda skills for AI agents + +Available skills: + camunda.deploy Deploy a BPMN process + camunda.start Start a process instance + camunda.query Query running instances + camunda.tasklist Complete user tasks + camunda.operate Inspect and resolve incidents`} + +
    +
    +

    Add to Claude with MCP

    + + {`// claude_desktop_config.json +{ + "mcpServers": { + "camunda": { + "command": "npx", + "args": ["-y", "c8ctl", "mcp-serve"], + "env": { + "CAMUNDA_CLUSTER_URL": + "http://localhost:26500" + } + } + } +}`} + +
    +
    +
    +

    Then ask your agent:

    +
    +
    + 💬 + "Deploy the order-process.bpmn and start an instance with + orderId=42" +
    +
    + 💬 + "Show me all incidents on the payment-flow process" +
    +
    + 💬 + "Scale the Zeebe brokers to 3 partitions" +
    +
    +
    +
    + {/* ─── More ways to run ─── */}
    @@ -488,6 +741,7 @@ Camunda is running. Deploy your first process: to={useBaseUrl("docs/components/modeler/about-modeler/")} className={styles.archBox} > + Modeler Design BPMN, DMN, and Forms @@ -497,6 +751,7 @@ Camunda is running. Deploy your first process: )} className={styles.archBox} > + Console Manage clusters and settings @@ -507,6 +762,7 @@ Camunda is running. Deploy your first process: to={useBaseUrl("docs/components/zeebe/zeebe-overview/")} className={clsx(styles.archBox, styles.archBoxPrimary)} > + Zeebe Workflow engine at the core @@ -517,6 +773,7 @@ Camunda is running. Deploy your first process: to={useBaseUrl("docs/components/operate/operate-introduction/")} className={styles.archBox} > + Operate Monitor and troubleshoot @@ -526,6 +783,7 @@ Camunda is running. Deploy your first process: )} className={styles.archBox} > + Tasklist Human task management @@ -535,6 +793,7 @@ Camunda is running. Deploy your first process: )} className={styles.archBox} > + Connectors Integrate external systems @@ -542,120 +801,6 @@ Camunda is running. Deploy your first process:
    - {/* ─── Everything from your terminal ─── */} -
    -
    -

    - Everything from your terminal -

    -

    - c8ctl gives you a single CLI for the full - Camunda lifecycle — no browser required. -

    -
    -
    -
    -

    Cluster management

    - - {`$ c8ctl cluster start -$ c8ctl cluster status -$ c8ctl cluster stop`} - -
    -
    -

    Deploy processes

    - - {`$ c8ctl process deploy ./payment.bpmn -$ c8ctl process list -$ c8ctl process start payment-flow`} - -
    -
    -

    Manage connectors

    - - {`$ c8ctl connector list -$ c8ctl connector install rest-connector -$ c8ctl connector logs rest-connector`} - -
    -
    -

    Monitor and debug

    - - {`$ c8ctl instance list --active -$ c8ctl instance inspect -$ c8ctl incident list`} - -
    -
    -
    - - {/* ─── Teach your AI Agent ─── */} -
    -
    -

    - Teach your AI agent Camunda -

    -

    - Give your coding assistant Camunda superpowers — deploy processes, - manage clusters, and query instances right from your AI workflow. -

    -
    -
    -
    -

    Add Camunda skills with c8ctl

    - - {`$ c8ctl ai install-skills -✔ Installed Camunda skills for AI agents - -Available skills: - camunda.deploy Deploy a BPMN process - camunda.start Start a process instance - camunda.query Query running instances - camunda.tasklist Complete user tasks - camunda.operate Inspect and resolve incidents`} - -
    -
    -

    Add to Claude with MCP

    - - {`// claude_desktop_config.json -{ - "mcpServers": { - "camunda": { - "command": "npx", - "args": ["-y", "c8ctl", "mcp-serve"], - "env": { - "CAMUNDA_CLUSTER_URL": - "http://localhost:26500" - } - } - } -}`} - -
    -
    -
    -

    Then ask your agent:

    -
    -
    - 💬 - "Deploy the order-process.bpmn and start an instance with - orderId=42" -
    -
    - 💬 - "Show me all incidents on the payment-flow process" -
    -
    - 💬 - "Scale the Zeebe brokers to 3 partitions" -
    -
    -
    -
    - {/* ─── Explore docs ─── */}
    diff --git a/src/pages/build-with-camunda.module.css b/src/pages/build-with-camunda.module.css index 3898367fb7c..9f6c51abf7a 100644 --- a/src/pages/build-with-camunda.module.css +++ b/src/pages/build-with-camunda.module.css @@ -173,7 +173,7 @@ .sectionSub { font-size: 1.05rem; color: var(--muted-color); - max-width: 560px; + max-width: 540px; margin: 0 auto; line-height: 1.6; } @@ -528,6 +528,10 @@ color: var(--heading-color); } +.archBox svg { + margin-bottom: 0.4rem; +} + .archBox span { font-size: 0.78rem; color: var(--muted-color); From 10b241fa5c6b5fcc2d652b263a10e9ddffc269b8 Mon Sep 17 00:00:00 2001 From: Max Trumpf Date: Wed, 25 Mar 2026 10:08:52 +0100 Subject: [PATCH 03/28] docs(build-with-camunda): add working examples --- src/pages/build-with-camunda.js | 90 ++++++++++++++++++--------------- 1 file changed, 50 insertions(+), 40 deletions(-) diff --git a/src/pages/build-with-camunda.js b/src/pages/build-with-camunda.js index 573edeb8518..994d842f776 100644 --- a/src/pages/build-with-camunda.js +++ b/src/pages/build-with-camunda.js @@ -473,9 +473,7 @@ function BuildWithCamunda() {
    See the install @@ -488,7 +486,7 @@ function BuildWithCamunda() {
    {/* ─── Quick install ─── */} -
    +

    Get started in one line with c8ctl @@ -505,8 +503,9 @@ function BuildWithCamunda() {

    - {`$ npm install -g c8ctl -$ c8ctl cluster start + {`$ npm install @camunda8/cli -g +$ c8ctl load plugin --from https://github.com/MaxTru/c8ctl-plugin-c8run +$ c8ctl c8run start ✔ Zeebe broker started on port 26500 ✔ Operate available at http://localhost:8081 @@ -514,7 +513,7 @@ $ c8ctl cluster start ✔ Connectors runtime started Camunda is running. Deploy your first process: - $ c8ctl process deploy my-process.bpmn`} +$ c8ctl deploy ./my-process.bpmn`}
    @@ -538,33 +537,34 @@ Camunda is running. Deploy your first process:

    Cluster management

    - {`$ c8ctl cluster start -$ c8ctl cluster status -$ c8ctl cluster stop`} + {`$ c8ctl c8run start 8.9.0-alpha5 +$ c8ctl c8run stop + +`}
    -

    Deploy processes

    +

    Deploy and start processes

    - {`$ c8ctl process deploy ./payment.bpmn -$ c8ctl process list -$ c8ctl process start payment-flow`} + {`$ c8ctl deploy ./payment.bpmn +$ c8ctl create pi --id=payment +$ c8ctl list pi`}
    -

    Manage connectors

    +

    Interact with processes

    - {`$ c8ctl connector list -$ c8ctl connector install rest-connector -$ c8ctl connector logs rest-connector`} + {`$ c8 list jobs --type=email-service +$ c8ctl activate jobs email-service +$ c8ctl complete job 2251799813685252'`}

    Monitor and debug

    - {`$ c8ctl instance list --active -$ c8ctl instance inspect -$ c8ctl incident list`} + {`$ c8ctl list inc --state=ACTIVE +$ c8ctl get inc 2251799813685251 +$ c8 resolve inc 2251799813685251`}
@@ -590,37 +590,46 @@ $ c8ctl incident list`} to={useBaseUrl("docs/next/apis-tools/c8ctl/getting-started/")} style={{ color: "inherit", textDecoration: "none" }} > - Add Camunda skills with c8ctl + Add Camunda skills as plugin to Claude - {`$ c8ctl ai install-skills -✔ Installed Camunda skills for AI agents + {`$ claude plugin add camunda/camunda-ai-dev-kit Available skills: - camunda.deploy Deploy a BPMN process - camunda.start Start a process instance - camunda.query Query running instances - camunda.tasklist Complete user tasks - camunda.operate Inspect and resolve incidents`} + /new-project — scaffold a new Camunda project + /new-process — generate a BPMN process + /new-agent — generate an agentic AI process (ad-hoc sub-process + AI Agent connector) + /new-dmn — generate a DMN decision table + /new-form — generate a Camunda Form + /new-worker — generate a job worker + /deploy — deploy resources to Camunda + /start — start a process instance + /status — check instance/incident status + /view-process — visualize BPMN, DMN, or Form files + /setup-environment — install and start Camunda 8 Run locally`}
-

Add to Claude with MCP

+

Connect to Camunda via MCP

- {`// claude_desktop_config.json + {`// mcp.json { - "mcpServers": { + "servers": { + // Locally running C8Run instance "camunda": { - "command": "npx", - "args": ["-y", "c8ctl", "mcp-serve"], - "env": { - "CAMUNDA_CLUSTER_URL": - "http://localhost:26500" - } + "type": "http", + "url": "http://localhost:8080/mcp/cluster" + }, + // Knowledge from the Camunda docs website + "camunda docs": { + "type": "http", + "url": "https://camunda-docs.mcp.kapa.ai" } } -}`} +} + +`}
@@ -638,7 +647,8 @@ Available skills:
💬 - "Scale the Zeebe brokers to 3 partitions" + "Investigate incidents on the payment-flow process and resolve + any that are due to missing payment details"
From 8ffe234814f04fbb72830e8aca4bab2af2e7158a Mon Sep 17 00:00:00 2001 From: Max Trumpf Date: Wed, 25 Mar 2026 10:08:52 +0100 Subject: [PATCH 04/28] docs(build-with-camunda): add working examples --- src/pages/build-with-camunda.js | 92 ++++++++++++++++++--------------- 1 file changed, 51 insertions(+), 41 deletions(-) diff --git a/src/pages/build-with-camunda.js b/src/pages/build-with-camunda.js index 573edeb8518..77b0e3881ad 100644 --- a/src/pages/build-with-camunda.js +++ b/src/pages/build-with-camunda.js @@ -473,9 +473,7 @@ function BuildWithCamunda() {
See the install @@ -488,10 +486,10 @@ function BuildWithCamunda() { {/* ─── Quick install ─── */} -
+

- Get started in one line with c8ctl + Get started in three lines with c8ctl

Install{" "} @@ -505,8 +503,9 @@ function BuildWithCamunda() {

- {`$ npm install -g c8ctl -$ c8ctl cluster start + {`$ npm install @camunda8/cli -g +$ c8ctl load plugin --from https://github.com/MaxTru/c8ctl-plugin-c8run +$ c8ctl c8run start ✔ Zeebe broker started on port 26500 ✔ Operate available at http://localhost:8081 @@ -514,7 +513,7 @@ $ c8ctl cluster start ✔ Connectors runtime started Camunda is running. Deploy your first process: - $ c8ctl process deploy my-process.bpmn`} +$ c8ctl deploy ./my-process.bpmn`}
@@ -538,33 +537,34 @@ Camunda is running. Deploy your first process:

Cluster management

- {`$ c8ctl cluster start -$ c8ctl cluster status -$ c8ctl cluster stop`} + {`$ c8ctl c8run start 8.9.0-alpha5 +$ c8ctl c8run stop + +`}
-

Deploy processes

+

Deploy and start processes

- {`$ c8ctl process deploy ./payment.bpmn -$ c8ctl process list -$ c8ctl process start payment-flow`} + {`$ c8ctl deploy ./payment.bpmn +$ c8ctl create pi --id=payment +$ c8ctl list pi`}
-

Manage connectors

+

Interact with processes

- {`$ c8ctl connector list -$ c8ctl connector install rest-connector -$ c8ctl connector logs rest-connector`} + {`$ c8 list jobs --type=email-service +$ c8ctl activate jobs email-service +$ c8ctl complete job 2251799813685252'`}

Monitor and debug

- {`$ c8ctl instance list --active -$ c8ctl instance inspect -$ c8ctl incident list`} + {`$ c8ctl list inc --state=ACTIVE +$ c8ctl get inc 2251799813685251 +$ c8 resolve inc 2251799813685251`}
@@ -590,37 +590,46 @@ $ c8ctl incident list`} to={useBaseUrl("docs/next/apis-tools/c8ctl/getting-started/")} style={{ color: "inherit", textDecoration: "none" }} > - Add Camunda skills with c8ctl + Add Camunda skills as plugin to Claude - {`$ c8ctl ai install-skills -✔ Installed Camunda skills for AI agents + {`$ claude plugin add camunda/camunda-ai-dev-kit Available skills: - camunda.deploy Deploy a BPMN process - camunda.start Start a process instance - camunda.query Query running instances - camunda.tasklist Complete user tasks - camunda.operate Inspect and resolve incidents`} + /new-project — scaffold a new Camunda project + /new-process — generate a BPMN process + /new-agent — generate an agentic AI process (ad-hoc sub-process + AI Agent connector) + /new-dmn — generate a DMN decision table + /new-form — generate a Camunda Form + /new-worker — generate a job worker + /deploy — deploy resources to Camunda + /start — start a process instance + /status — check instance/incident status + /view-process — visualize BPMN, DMN, or Form files + /setup-environment — install and start Camunda 8 Run locally`}
-

Add to Claude with MCP

+

Connect to Camunda via MCP

- {`// claude_desktop_config.json + {`// mcp.json { - "mcpServers": { + "servers": { + // Locally running C8Run instance "camunda": { - "command": "npx", - "args": ["-y", "c8ctl", "mcp-serve"], - "env": { - "CAMUNDA_CLUSTER_URL": - "http://localhost:26500" - } + "type": "http", + "url": "http://localhost:8080/mcp/cluster" + }, + // Knowledge from the Camunda docs website + "camunda docs": { + "type": "http", + "url": "https://camunda-docs.mcp.kapa.ai" } } -}`} +} + +`}
@@ -638,7 +647,8 @@ Available skills:
💬 - "Scale the Zeebe brokers to 3 partitions" + "Investigate incidents on the payment-flow process and resolve + any that are due to missing payment details"
From 5d0d990a359680a7c3d22857adca93c4f2be8ee9 Mon Sep 17 00:00:00 2001 From: mesellings Date: Wed, 25 Mar 2026 10:22:54 +0000 Subject: [PATCH 05/28] docs(build): tw edits --- src/pages/build-with-camunda.js | 46 ++++++++++++++++----------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/pages/build-with-camunda.js b/src/pages/build-with-camunda.js index 77b0e3881ad..9fc7b9e622b 100644 --- a/src/pages/build-with-camunda.js +++ b/src/pages/build-with-camunda.js @@ -377,7 +377,7 @@ function BuildWithCamunda() {

Build with Camunda

Process orchestration for developers. Go from zero to a running - workflow in under two minutes — then let your AI coding agent take + workflow in under two minutes, then let your AI coding agent take over.

@@ -400,7 +400,7 @@ function BuildWithCamunda() {

Free trial on SaaS

Get a fully managed Camunda cluster in seconds. Nothing to - install — sign up and start modeling. + install, just sign up and start modeling.