You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2026/08/21 02:21:58 UTC
(skywalking-website) branch feat/home-ai-two-ways created (now 9b682026a212)
This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a change to branch feat/home-ai-two-ways
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
at 9b682026a212 Home: show both ways of investigating with AI
This branch includes the following new commits:
new 9b682026a212 Home: show both ways of investigating with AI
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(skywalking-website) 01/01: Home: show both ways of investigating with AI
Posted by wu...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a commit to branch feat/home-ai-two-ways
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
commit 9b682026a21227662c5aa8b32bdb821ff55f2b38
Author: Wu Sheng <wu...@foxmail.com>
AuthorDate: Fri Aug 21 09:07:30 2026 +0800
Home: show both ways of investigating with AI
The page led with observability *for* AI and treated AI *for* observability
as one product feature. SkyWalking now runs in both directions, so the hero
and the highlight rows say so.
Hero: the headline becomes two sentences, keeping the cloud-native identity
and adding the turn. The lead names both paths instead of only the built-in
assistant, and the meta description follows — it is what search and social
actually render, and it still described only the assistant.
Highlights: a second row for the AI-client path, with the Codex desktop
capture and the capability/permission/credential boundary as its points. The
3D-map row flips to keep the rows alternating. Its clip is referenced from
/screenshots/horizon-1.0/ rather than copied into /images/home/, so the 3 MB
file is stored once and shared with the Codex post that also uses it.
Deep-link hooks on the three feature headings, reusing the copy-and-select
behaviour the docs and downloads cards already ship. The home page renders
through the theme's baseof, which we do not fork, so the script comes in as a
shortcode. The hook lives in a .frow-title wrapper that owns the containing
block, and the id sits on that wrapper rather than the h2 — the theme's
anchor.js injects a second hook into any heading carrying an id.
No component names in the hero or the new row: SkyWalking is the brand a
reader knows, and OAP, a permission identifier and "registry" all assumed
concepts the page has not introduced yet.
Also refreshes the AI Assistant clip and its poster, now 1920x936 and
matching each other.
Links go to the /next/ MCP doc, matching how the assistant row already links.
MCP is on horizon-ui main and its page is live, but not in a tagged release
yet, so /latest/ has no mcp page. The announcement post is still a draft; it
becomes a second CTA when it publishes.
---
assets/scss/_custom_home.scss | 23 ++++++
content/_index.html | 85 ++++++++++++++++++---
content/images/home/horizon-ai-assistant.mp4 | Bin 1225284 -> 2232262 bytes
content/images/home/horizon-ai-assistant.png | Bin 294368 -> 160300 bytes
layouts/shortcodes/card-permalink.html | 4 +
.../codex-horizon-capability-tour-poster.jpg | Bin 0 -> 86833 bytes
.../horizon-1.0/codex-horizon-capability-tour.mp4 | Bin 0 -> 3074677 bytes
7 files changed, 100 insertions(+), 12 deletions(-)
diff --git a/assets/scss/_custom_home.scss b/assets/scss/_custom_home.scss
index fa64536ba682..f82f5cf886a7 100644
--- a/assets/scss/_custom_home.scss
+++ b/assets/scss/_custom_home.scss
@@ -1778,6 +1778,29 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
.docs-card:hover .card-anchor,
.dl-card:hover .card-anchor { opacity: 1; }
+// Deep-link hooks on the home feature-row headings. A dedicated title wrapper
+// gives every normal, reversed and wrapped row the same containing block. The
+// hook hangs in its gutter while the heading text remains aligned to the eyebrow.
+.frow-title {
+ position: relative;
+ scroll-margin-top: 92px; // sticky navbar clearance when the hash lands here
+}
+.frow-title h2 {
+ display: block;
+}
+.frow-title > .frow-anchor {
+ position: absolute; left: -32px; top: 6px;
+ margin: 0;
+}
+
+.frow:hover .frow-anchor,
+.frow-anchor:focus-visible { opacity: 1; }
+@media (max-width: 1199px) {
+ .frow-title { padding-left: 32px; }
+ .frow-title > .frow-anchor { left: 0; }
+ .frow-anchor.card-anchor { opacity: 1; } // no hover on touch, so keep it visible
+}
+
// ── 3D Infrastructure Map: poster that opens the WebGL app as a full page ─────
// Used by the homepage "SEE IT IN 3D" band. The poster is a static image; the
// WebGL app (/3d-map-app/) only loads when the user clicks through to it.
diff --git a/content/_index.html b/content/_index.html
index 13fe1312f900..82a8b6a6c982 100644
--- a/content/_index.html
+++ b/content/_index.html
@@ -5,7 +5,7 @@ linkTitle = "Apache SkyWalking"
seo_title = "Apache SkyWalking — Observability for cloud-native and AI"
# Required: without it Hugo's opengraph template falls back to .Summary, which
# scrapes the hero SVG text into every social card.
-description = "Apache SkyWalking is an open source observability platform for cloud native architectures. It brings distributed tracing, metrics, logs, profiling and alarms into one platform, with auto-instrumentation agents for Java, Go, Python, Node.js, PHP, Rust, Ruby and .NET, plus eBPF on Kubernetes. It also monitors GenAI and LLM services — latency, token usage and estimated cost per provider and model — and ships a built-in assistant that investigates incidents in natural language."
+description = "Apache SkyWalking is an open source observability platform for cloud native architectures. It brings distributed tracing, metrics, logs, profiling and alarms into one platform, with auto-instrumentation agents for Java, Go, Python, Node.js, PHP, Rust, Ruby and .NET, plus eBPF on Kubernetes. It also monitors GenAI and LLM services — latency, token usage and estimated cost per provider and model — and works the other way too: a built-in assistant you can ask in plain languag [...]
+++
<!-- ===== HERO + PRODUCT BENTO (merged) ===== -->
@@ -31,12 +31,13 @@ description = "Apache SkyWalking is an open source observability platform for cl
<div class="home-hero-grid">
<div class="home-hero-text">
- <h1>Observability for <span class="accent">cloud-native and AI</span></h1>
+ <h1>Observability for <span class="accent">cloud-native and AI</span>.<br>And <span class="accent">AI</span> for observability.</h1>
<p class="lead">
<strong class="lead-brand">Apache SkyWalking</strong> puts distributed tracing, metrics, logs, profiling and alarms
in one platform — across the services you run and the GenAI models they call,
- down to tokens and cost. 10+ language agents, eBPF on Kubernetes, and a built-in
- assistant you can ask in natural language.
+ down to tokens and cost. 10+ language agents and eBPF on Kubernetes.
+ Ask it in plain language, or investigate from the AI client
+ you already use.
</p>
<div class="hero-cta">
<a href="/docs/#qs-showcase">
@@ -94,11 +95,20 @@ description = "Apache SkyWalking is an open source observability platform for cl
</section>
<div class="home-below">
-<!-- ===== HIGHLIGHTS: AI Assistant + 3D map (alternating rows) =====
- AI Assistant ships with Horizon UI 1.0 (feature is merged to main).
- Media: horizon-ai-assistant.mp4 (a 3x screen capture); horizon-ai-assistant.png is its
- click-to-play poster still. "AI Assistant docs" -> /next/ operate doc (on main); "Meet
- Horizon UI" -> the AI-assistant announcement post (draft: true until the 1.0 launch). -->
+<!-- ===== HIGHLIGHTS: AI both ways + 3D map (alternating rows) =====
+ Two AI rows, because SkyWalking now runs in both directions: it observes GenAI, and it
+ can be investigated *by* AI. Row 1 is the assistant inside Horizon; row 2 is Horizon
+ driven from the operator's own AI client over MCP.
+ Row 1 media: horizon-ai-assistant.mp4 + .png poster — a 24-second edited tour with
+ a branded opener, the tool-working interval disclosed at 12x, and the strongest metric,
+ topology and summary frames retained.
+ Row 2 media: the Codex capability tour, reused from /screenshots/horizon-1.0/ rather than
+ copied into /images/home/ so the 3 MB clip is stored once — the draft Codex post uses the
+ same file. Its poster is 1280x720 while the clip is 1920x1200; re-export before launch or
+ the frame resizes on play.
+ Links: both rows point at /next/ operate docs (MCP is on horizon-ui main but not yet in a
+ tagged release, so /latest/ has no mcp page). The Codex announcement post is draft:true —
+ add it as a third CTA on row 2 when it publishes. -->
<section class="home-section feature-rows">
<div class="container">
@@ -120,7 +130,10 @@ description = "Apache SkyWalking is an open source observability platform for cl
</div>
<div class="frow-copy">
<span class="eyebrow">NEW · AI ASSISTANT</span>
- <h2>Ask questions in natural language</h2>
+ <div class="frow-title" id="ai-assistant">
+ <a class="card-anchor frow-anchor" href="#ai-assistant" data-anchor="ai-assistant" title="Copy link to “Ask questions in natural language”" aria-label="Copy link to Ask questions in natural language"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71 [...]
+ <h2>Ask questions in natural language</h2>
+ </div>
<p>Horizon's built-in assistant answers questions about your running system — <em>"what's unhealthy right now?"</em>, <em>"investigate latency for checkout"</em> — with no MQE, PromQL or TraceQL to write. It replies with an ordered narrative built from the <strong>same charts, topology and tables</strong> as the rest of the UI, not a wall of text.</p>
<ul class="frow-points">
<li>
@@ -143,14 +156,60 @@ description = "Apache SkyWalking is an open source observability platform for cl
</div>
</div>
- <!-- Row 2 · 3D map — copy left, media right (alternating) -->
+ <!-- Row 2 · Your own AI client — copy left, media right (alternating) -->
<div class="frow frow--reverse">
+ <div class="frow-media">
+ <figure class="hero-shot ai-shot">
+ <span class="shot-bar"><i></i><i></i><i></i><em>codex · horizon</em></span>
+ <video class="ai-video" poster="/screenshots/horizon-1.0/codex-horizon-capability-tour-poster.jpg"
+ controls muted loop playsinline preload="none"
+ aria-label="Codex on the desktop reading a SkyWalking deployment — service discovery, a full layer topology and a role-aware BanyanDB deployment, mounted in the conversation">
+ <source src="/screenshots/horizon-1.0/codex-horizon-capability-tour.mp4" type="video/mp4">
+ </video>
+ </figure>
+ <div class="ai-byo">
+ <span class="ai-byo-tag">The pattern</span>
+ <p><strong>An entrance, not a scraper.</strong> The client calls an authorised capability and reasons from what comes back — it never clicks through the pages. SkyWalking keeps the semantics, permissions and presentation; the client keeps the model. From <a href="https://builder.aws.com/content/3IBMHB0VGZkCsH1WNw8vgTZXCJI/ai-clients-as-first-class-interfaces-a-new-pattern-for-software-access" target="_blank" rel="noopener">AI Clients as First-Class Interfaces</a>.</p>
+ </div>
+ </div>
+ <div class="frow-copy">
+ <span class="eyebrow">NEW · YOUR OWN AI CLIENT</span>
+ <div class="frow-title" id="ai-client">
+ <a class="card-anchor frow-anchor" href="#ai-client" data-anchor="ai-client" title="Copy link to “Investigate from the AI client you already use”" aria-label="Copy link to Investigate from the AI client you already use"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 [...]
+ <h2>Investigate from the AI client you already use</h2>
+ </div>
+ <p>SkyWalking exposes the same investigation capabilities over <strong>MCP</strong>, so an agent such as Codex can query your running system directly. In the ChatGPT desktop app, its own <strong>topology, deployment and chart components mount inside the conversation</strong> — interactive, not screenshots. In the CLI, the same capture comes back as structured evidence for a terminal workflow.</p>
+ <ul class="frow-points">
+ <li>
+ <span class="fp-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 20h8M12 17v3"/></svg></span>
+ <span><strong>One implementation, not two.</strong> The built-in assistant and an outside agent run the same investigation capabilities against the same live data — there is no second definition of a service, a metric or a topology to keep in sync.</span>
+ </li>
+ <li>
+ <span class="fp-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z"/><path d="M9 12l2 2 4-4"/></svg></span>
+ <span><strong>Your permissions, still enforced.</strong> Connecting takes a permission of its own, and every capability then re-checks that you already have read access to the matching screen. Nothing on this path can change anything — profiling can be proposed, never started.</span>
+ </li>
+ <li>
+ <span class="fp-ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 11V8a5 5 0 0 1 10 0v3"/><rect x="5" y="11" width="14" height="10" rx="2"/></svg></span>
+ <span><strong>The model stays on your side.</strong> Your agent brings its own model and its own subscription; SkyWalking only issues a read-scoped token, and never makes an LLM request itself.</span>
+ </li>
+ </ul>
+ <div class="frow-cta">
+ <a class="sky-btn primary" href="/docs/skywalking-horizon-ui/next/operate/mcp/">Connect your agent <i class="iconfont icon-arrow-right"></i></a>
+ </div>
+ </div>
+ </div>
+
+ <!-- Row 3 · 3D map — media left, copy right (alternating) -->
+ <div class="frow">
<figure class="frow-media">
{{< map3d poster="/images/home/horizon-3d-map.png" badge="Interactive · sample data" >}}
</figure>
<div class="frow-copy">
<span class="eyebrow">SEE IT IN 3D</span>
- <h2>Explore your topology in 3D</h2>
+ <div class="frow-title" id="topology-3d">
+ <a class="card-anchor frow-anchor" href="#topology-3d" data-anchor="topology-3d" title="Copy link to “Explore your topology in 3D”" aria-label="Copy link to Explore your topology in 3D"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></a>
+ <h2>Explore your topology in 3D</h2>
+ </div>
<p>Walk your services and cloud-native infrastructure as a living 3D scene — orbit, zoom and click any node to inspect it. It opens as a full page and runs entirely in your browser from a frozen demo snapshot: no server, no login, no setup.</p>
<div class="frow-cta">
<a class="sky-btn primary" href="/3d-map-app/">Open the 3D map <span class="hint">full page</span></a>
@@ -312,3 +371,5 @@ description = "Apache SkyWalking is an open source observability platform for cl
</section>
</div>
+
+{{< card-permalink >}}
diff --git a/content/images/home/horizon-ai-assistant.mp4 b/content/images/home/horizon-ai-assistant.mp4
index d3c3acefba35..45d202bebd98 100644
Binary files a/content/images/home/horizon-ai-assistant.mp4 and b/content/images/home/horizon-ai-assistant.mp4 differ
diff --git a/content/images/home/horizon-ai-assistant.png b/content/images/home/horizon-ai-assistant.png
index 8b6137eaf063..1d95fe24cba7 100644
Binary files a/content/images/home/horizon-ai-assistant.png and b/content/images/home/horizon-ai-assistant.png differ
diff --git a/layouts/shortcodes/card-permalink.html b/layouts/shortcodes/card-permalink.html
new file mode 100644
index 000000000000..0a9d4b9037eb
--- /dev/null
+++ b/layouts/shortcodes/card-permalink.html
@@ -0,0 +1,4 @@
+{{- /* Lets content/_index.html reuse the deep-link hook the docs and downloads
+ pages already load from their own baseof. The home page renders through
+ the theme's baseof, which we do not fork, so it comes in as a shortcode. */ -}}
+{{ partial "card-permalink.html" . }}
diff --git a/static/screenshots/horizon-1.0/codex-horizon-capability-tour-poster.jpg b/static/screenshots/horizon-1.0/codex-horizon-capability-tour-poster.jpg
new file mode 100644
index 000000000000..2895e8e01559
Binary files /dev/null and b/static/screenshots/horizon-1.0/codex-horizon-capability-tour-poster.jpg differ
diff --git a/static/screenshots/horizon-1.0/codex-horizon-capability-tour.mp4 b/static/screenshots/horizon-1.0/codex-horizon-capability-tour.mp4
new file mode 100644
index 000000000000..9c89d624fb74
Binary files /dev/null and b/static/screenshots/horizon-1.0/codex-horizon-capability-tour.mp4 differ