Merge branch 'david.jones/poc2' into rtrieu/studio

rtrieu · rtrieu · commit 851eee335c9d · 2025-11-18T15:50:04.000-08:00
diff --git a/config/_default/menus/main.studio.yaml b/config/_default/menus/main.studio.yaml
@@ -17,7 +17,7 @@ menu:
     # Menu items that appear under labels starts below here
 
     - name: Getting Started
-      url: /studio/getting_started/
+      url: /studio/
       parent: onboarding_heading
       identifier: getting_started
       weight: 1
diff --git a/content/studio/_index.md b/content/studio/_index.md
diff --git a/content/studio/getting_started/_index.md b/content/studio/getting_started/_index.md
@@ -155,7 +155,38 @@ Copy and execute the Claude Code command into your terminal:
 
 ### 2. Set up your project
 
-Your AI coding agent can automatically configure Datadog Studio for your project. When you provide a setup prompt, your coding agent does the following:
+Your AI coding agent can automatically configure Datadog Studio for your project.
+
+{{% collapse-content title="Claude Code" level="h4" expanded=false id="claude-code" %}}
+
+1. Copy and execute the Claude Code command into your terminal:
+
+{{< tabs >}}
+{{% tab "US1" %}}
+```sh
+claude mcp add --transport http datadog-onboarding-mcp "https://mcp.datadoghq.com/api/unstable/mcp-server/mcp?toolsets=onboarding" && claude /mcp
+```
+{{% /tab %}}
+
+{{% tab "US3" %}}
+```sh
+claude mcp add --transport http datadog-onboarding-mcp "https://mcp.us3.datadoghq.com/api/unstable/mcp-server/mcp?toolsets=onboarding" && claude /mcp
+```
+{{% /tab %}}
+{{< /tabs >}}
+
+{{% /collapse-content %}}
+
+### Set up your project
+
+Prompt your AI coding agent to enable all capabilities (Error Tracking, Session Replay, Product Analytics, and LLM Observability) in minutes by copying the below prompt into Cursor or Claude Code.
+
+**Prompt**:
+```console
+Add Datadog Studio to my project
+```
+
+When you give this prompt to your coding agent, it does the following:
 
 - Analyze your project and identify if the MCP server offers a tool that can be used to set it up with Datadog
 - Call the tool (asking for your permission before doing so) with inferred parameters from your project (for example: your project's framework, language, and bundler)
@@ -218,4 +249,4 @@ If you prefer manual setup, follow the in-app instructions for each product in y
 [9]: https://claude.ai/
 [10]: https://platform.openai.com/docs/guides/text
 [11]: https://github.com/langchain-ai/langgraph
-[12]: https://github.com/vercel/ai-chatbot
+[12]: https://github.com/vercel/ai-chatbot
diff --git a/content/studio/index.md b/content/studio/index.md
@@ -1,8 +1,176 @@
 ---
-title: home
+title: Getting Started
+description: Set up pre-configured monitoring packages for your frontend, backend, or LLM application using agentic or manual setup.
 type: studio
-cascade:
-  type: studio
 ---
 
-Test
+## Overview
+
+Datadog Studio gives small development teams a streamlined observability platform to monitor, debug, and optimize their applications. Get started with pre-configured packages tailored to what you're building without any complex setup required.
+
+## How it works
+
+Datadog Studio provides pre-configured monitoring packages tailored to your application type. Select a package based on what you're building (frontend, backend, or LLM/AI), then use either **agentic setup**, where AI assistants like Cursor or Claude automatically configure your codebase, or **manual setup** for full control. After successfully configuring your package, your application sends telemetry data to Datadog, giving you immediate access to error tracking, performance monitoring, and analytics.
+
+## What's included
+
+Choose your package based on what you're building:
+| Application Type       | Products Included |
+|------------------------|--------------|
+| Frontend applications  | [Error Tracking][1], [Session Replay][2], [Product Analytics][3] |
+| Backend services       | [Error Tracking][1], [Logs][4], [Metrics][5] |
+| LLMs / AI agents       | [LLM Observability and AI Agent Monitoring][6] |
+
+## Sign up for Datadog Studio
+
+Before getting started, make sure you have an account with Datadog Studio. To create an account, go to [https://app.datadoghq.com/studio/signup][7].
+
+## Setup
+
+Choose your setup method:
+
+- [Agentic setup](#agentic-setup): Let AI assistants ([Cursor][8] or [Claude][9]) automatically install and configure Datadog SDKs in your codebase. Only available for [specific platforms](#supported-platforms).
+- [Manual setup](#manual-setup): Follow step-by-step instructions to install and configure Datadog SDKs yourself. This method gives you full control over the integration.
+
+## Agentic setup
+
+### Supported platforms
+Agentic setup is available for the following platforms:
+
+**Frontend applications**
+- Next.js
+- React
+- Svelte
+- Vanilla JavaScript (Angular is not supported)
+- Vue
+
+**LLM and AI agent applications**
+- Python or Node.js—from scripts using [OpenAI's Responses API][10] to complex FastAPI applications powered by [LangGraph][11], or rich chatbot experiences built on [Vercel's AI SDK][12].
+
+### Install the Datadog Onboarding MCP server
+
+To install the Datadog Onboarding Model Context Protocol (MCP) server:
+
+{{% collapse-content title="Cursor" level="h4" expanded=false id="cursor" %}}
+
+1. Copy the Cursor Deeplink into your browser based on your site region:
+
+{{< tabs >}}
+{{% tab "US1" %}}
+```sh
+cursor://anysphere.cursor-deeplink/mcp/install?name=datadog-onboarding-mcp&config=eyJ1cmwiOiJodHRwczovL21jcC5kYXRhZG9naHEuY29tL2FwaS91bnN0YWJsZS9tY3Atc2VydmVyL21jcD90b29sc2V0cz1vbmJvYXJkaW5nIiwidHlwZSI6Im9hdXRoIn0=
+```
+{{% /tab %}}
+
+{{% tab "US3" %}}
+```sh
+cursor://anysphere.cursor-deeplink/mcp/install?name=datadog-onboarding-mcp&config=eyJ1cmwiOiJodHRwczovL21jcC51czMuZGF0YWRvZ2hxLmNvbS9hcGkvdW5zdGFibGUvbWNwLXNlcnZlci9tY3A/dG9vbHNldHM9b25ib2FyZGluZyIsInR5cGUiOiJvYXV0aCJ9
+```
+{{% /tab %}}
+
+{{% tab "US5" %}}
+```sh
+cursor://anysphere.cursor-deeplink/mcp/install?name=datadog-onboarding-mcp&config=eyJ1cmwiOiJodHRwczovL21jcC51czUuZGF0YWRvZ2hxLmNvbS9hcGkvdW5zdGFibGUvbWNwLXNlcnZlci9tY3A/dG9vbHNldHM9b25ib2FyZGluZyIsInR5cGUiOiJvYXV0aCJ9
+```
+{{% /tab %}}
+{{< /tabs >}}
+
+2. In Cursor, install the MCP, then click **Connect**.
+3. If prompted to open an external website, click **Open**.
+3. Confirm you see MCP tools listed for the `datadog-onboarding-mcp` server.
+
+{{% /collapse-content %}}
+
+{{% collapse-content title="Claude Code" level="h4" expanded=false id="claude-code" %}}
+
+1. Copy and execute the Claude Code command into your terminal:
+
+{{< tabs >}}
+{{% tab "US1" %}}
+```sh
+claude mcp add --transport http datadog-onboarding-mcp "https://mcp.datadoghq.com/api/unstable/mcp-server/mcp?toolsets=onboarding" && claude /mcp
+```
+{{% /tab %}}
+
+{{% tab "US3" %}}
+```sh
+claude mcp add --transport http datadog-onboarding-mcp "https://mcp.us3.datadoghq.com/api/unstable/mcp-server/mcp?toolsets=onboarding" && claude /mcp
+```
+{{% /tab %}}
+{{< /tabs >}}
+
+2. Start a Claude Code session and execute the `/mcp` command inside the session.
+3. Select the MCP server you added and press **Enter** to login.
+
+{{% /collapse-content %}}
+
+### Set up your project
+
+Prompt your AI coding agent to enable all capabilities (Error Tracking, Session Replay, Product Analytics, and LLM Observability) in minutes by copying the below prompt into Cursor or Claude Code.
+
+**Prompt**:
+```console
+Add Datadog Studio to my project
+```
+
+When you give this prompt to your coding agent, it does the following:
+
+- Analyze your project and identify if the MCP server offers a tool that can be used to set it up with Datadog
+- Call the tool (asking for your permission before doing so) with inferred parameters from your project (for example: your project's framework, language, and bundler)
+- Follow the instructions the MCP tool provides as context to your coding agent, making code changes on your behalf (don't worry - Datadog does not commit them)
+- Provide testing steps to confirm that your application is correctly configured to send telemetry to Datadog
+
+### Deploying to production
+
+Depending on how your application is deployed, you need to commit the changes and set or upload provided environment variables to your production environment.
+
+## Manual setup
+
+If you prefer manual setup, follow the in-app instructions for each product in your selected package. You can either choose manual setup from the Getting Started page or by adding a New Application from the homepage.
+
+### Frontend monitoring
+- [Frontend Error Tracking][13]
+- [Session Replay][14]
+- [Product Analytics][15]
+
+### Backend monitoring
+- [Backend Error Tracking][17]
+- Logs from:
+  - [Servers / VMs][18]
+  - [Containers][19]
+  - [Cloud / Integrations][20]
+  - [Applications][21]
+  - [APIs][22]
+- Metrics:
+  - [Custom metrics][23]
+  - [OpenTelemetry][24]
+  - [Integrations][25]
+
+### LLM Observability
+- [LLM Observability][16]
+
+[1]: /studio/error_tracking/
+[2]: /studio/session_replay/
+[3]: /studio/product_analytics/
+[4]: /studio/logs/
+[5]: /studio/metrics/
+[6]: /studio/llm_observability/
+[7]: https://app.datadoghq.com/studio/signup
+[8]: https://cursor.com/
+[9]: https://claude.ai/
+[10]: https://platform.openai.com/docs/guides/text
+[11]: https://github.com/langchain-ai/langgraph
+[12]: https://github.com/vercel/ai-chatbot
+[13]: /studio/error_tracking/frontend
+[14]: /studio/real_user_monitoring/session_replay/
+[15]: /studio/product_analytics/#getting-started
+[16]: /studio/llm_observability/quickstart/?tab=python#trace-an-llm-application
+[17]: /studio/error_tracking/backend/getting_started/
+[18]: /studio/logs/log_collection/?tab=host
+[19]: /studio/logs/log_collection/?tab=container
+[20]: /studio/logs/log_collection/?tab=cloudintegration
+[21]: /studio/logs/log_collection/?tab=application
+[22]: /studio/api/latest/logs/
+[23]: /studio/metrics/custom_metrics/
+[24]: /studio/metrics/open_telemetry/
+[25]: https://app.datadoghq.com/integrations
diff --git a/layouts/studio/index.html b/layouts/studio/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang='{{ if eq .Site.Language.Lang "en" }}en-US{{ else }}{{ .Site.Language.Lang }}{{ end }}' data-base-url="{{ .Site.BaseURL }}" data-type="{{.Type}}" data-page-code-lang="{{ .Params.code_lang }}" data-current-section="{{ strings.TrimLeft "/" .CurrentSection.RelPermalink}}" data-relpermalink="{{.RelPermalink}}"
+  data-env="{{.Site.Params.environment}}" data-commit-ref="{{ .Site.Params.branch }}" style="opacity:0"
+  class="{{ if or $.Site.Params.announcement_banner.link $.Site.Params.announcement_banner.desktop_message }}banner announcement{{ end }}">
+
+<head>
+  {{ partialCached "header-scripts.html" . }}
+
+  <meta charset="utf-8">
+  {{ partial "prefetch.html" . }}
+  {{ partial "preload.html" . }}
+  <title>{{ .Title }}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  {{ if .Params.external_redirect }} {{ partial "meta-http-equiv.html" . }} {{ end }}
+  {{- partial "canonical.html" . -}}
+  {{- partial "noindex.html" . -}}
+  {{- partial "hreflang.html" . -}}
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <link rel="icon" type="image/png" href="https://docs.datadoghq.com/favicon.ico">
+
+  {{ partialCached "css.html" . }}
+
+  {{- if and (ne $.Params.disable_opengraph_meta_tags true) .File -}}
+    {{- partial "meta.html" . -}}
+  {{- end -}}
+
+  <style>
+    .main-nav {
+      background:#000 !important;
+      color:#fff !important;
+    }
+  </style>
+</head>
+{{- $bodyClass := $.Scratch.Get "bodyClass" -}}
+{{ $ctx := . }}
+
+<body
+  class="{{ .Site.Language.Lang }} {{ if .IsPage }} {{ replace $.Type "/" "-" }} {{ else }} {{ .Section }} {{ end }} {{ $bodyClass }} {{ if .Site.Params.announcement_banner }}announcement{{ end }}">
+
+
+  <div class="greyside">
+    <div class="container container__content h-100">
+      <div class="row h-100">
+        <div class="d-none d-lg-flex col-12 col-sm-3 h-100 grey" style="background:#f8f8f8; z-index: -1;">
+        </div>
+      </div>
+    </div>
+  </div>
+  {{ partialCached "header/header.html" . }}
+
+  <div class="container container__content h-100 pt-1">
+    <div class="row h-100 position-relative js-content-container">
+      <div class="d-none d-lg-flex col-12 col-sm-3 side">
+        {{ partial "sidenav/main-sidenav.html" . }}
+      </div>
+
+      <div class="mainContent-wrapper order-2 order-lg-0 col-12 {{ if eq .Params.disable_sidebar true }}col-lg-9{{ else }}col-lg-7{{ end }} main">
+        <div id="mainContent">
+          <div class="row">
+            <div class="col-12 order-1">
+                <h1 id="pagetitle">{{ .Title }}</h1>
+            </div>
+            <div class="col-12">
+              {{ if .File }}
+                {{ partial "breadcrumbs.html" . }}
+              {{ end }}
+            </div>
+          </div>
+          {{ partial "translate_status_banner/translate_status_banner.html" . }}
+          {{ partial "site_support_banner/site_support_banner.html" . }}
+          {{ .Content }}
+
+          {{ partial "page-edit.html" (dict "ctx" $ctx "type" "contribute") }}
+        </div>
+      </div>
+
+      {{ if ne .Params.disable_sidebar true }}
+        <aside class="sidebar col-lg-2">
+          {{ partial "language-region-select.html" . }}
+
+          {{ if ne .Params.disable_toc true }}
+            {{ partial "table-of-contents/table-of-contents.html" . }}
+          {{ end }}
+        </aside>
+      {{ end }}
+    </div>
+  </div>
+
+  {{ partialCached "footer/footer.html" . }}
+  {{ partial "footer-scripts.html" . }}
+  {{ partial "footer-js-dd-docs-methods" . }}
+  {{ partial "preview_banner/preview_banner" . }}
+</body>
+
+</html>
