diff --git a/config/_default/config.yaml b/config/_default/config.yaml index 0d6def69c63..1cb203b3c48 100644 --- a/config/_default/config.yaml +++ b/config/_default/config.yaml @@ -132,6 +132,35 @@ module: - source: content/es target: content lang: es + # studio + # Studio content new + - source: content/studio + target: content + lang: studio + # Load in existing content + - source: content/en + target: content + lang: studio + includeFiles: + - "/api/latest/**" + - "/account_management/**" + - "/agent/**" + - "/bits_ai/**" + - "/data_security/**" + - "/dashboards/**" + - "/error_tracking/**" + - "/integrations/**" + - "/llm_observability/**" + - "/logs/**" + - "/monitors/**" + - "/metrics/**" + - "/notebooks/**" + - "/product_analytics/**" + # load in integrations + - source: _vendor/content/en + target: content + lang: studio + # end studio - source: static target: static - source: layouts diff --git a/config/_default/languages.yaml b/config/_default/languages.yaml index 1d2fcb8c669..c4a64f4a4e4 100644 --- a/config/_default/languages.yaml +++ b/config/_default/languages.yaml @@ -23,3 +23,6 @@ ko: es: languageName: "Español" weight: 5 +studio: + languageName: "Studio" + weight: 6 diff --git a/config/_default/menus/main.en.yaml b/config/_default/menus/main.en.yaml index 1b7c2727978..3b959178d1b 100644 --- a/config/_default/menus/main.en.yaml +++ b/config/_default/menus/main.en.yaml @@ -8415,6 +8415,8 @@ menu: parent: product_analytics identifier: pa_troubleshooting weight: 9 + - name: Session Replay + ## WIP - name: Account Management url: account_management/ pre: cog-2 diff --git a/config/_default/menus/main.studio.yaml b/config/_default/menus/main.studio.yaml new file mode 100644 index 00000000000..ef97e2dd978 --- /dev/null +++ b/config/_default/menus/main.studio.yaml @@ -0,0 +1,132 @@ +menu: + studio: + # Studio specific labels + - name: Onboarding + identifier: onboarding_heading + weight: 1000000 + - name: Essentials + identifier: essentials_heading + weight: 2000000 + - name: Administration + identifier: administration_heading + weight: 3000000 + - name: Platform + identifier: platform_heading + weight: 4000000 + + # Menu items that appear under labels starts below here + + - name: Getting Started + url: /studio/ + parent: onboarding_heading + identifier: getting_started + weight: 1 + - name: Test + url: /studio/test/ + parent: essentials_heading + identifier: test + weight: 2 + - name: Dashboards + parent: essentials_heading + params: + ref_id: dashboards # This should match the identifier in main.en.yaml + # Include all children by default, but exclude specific ones + - name: Notebooks + parent: essentials_heading + params: + ref_id: notebooks + - name: Monitors + parent: essentials_heading + params: + ref_id: alerting + # Exclude specific monitor types + includes: + - monitors_types_metric + - monitors_types_error_tracking + - monitors_types_logs + - name: Bits AI + parent: essentials_heading + params: + ref_id: bits_ai + excludes: + - bits_ai_sre + - bits_ai_chat_with_bits_ai + - name: LLM Observability + parent: essentials_heading + params: + ref_id: llm_obs + - name: Metrics + parent: essentials_heading + params: + ref_id: metrics + - name: Error Tracking + parent: essentials_heading + params: + ref_id: error_tracking + # pull in from existing docs instead with granular control + - name: Logs + parent: essentials_heading + params: + ref_id: logs + # Include everything (no filters) + - name: Product Analytics + parent: essentials_heading + params: + ref_id: product_analytics + - name: Session Replay + parent: essentials_heading + params: + ref_id: session_replay + - name: Account Management + parent: administration_heading + params: + ref_id: account_management + # Include specific child items only + includes: + - account_management_org_switching + - account_management_billing + # Or exclude specific items + # excludes: + # - account_management_saml + - name: Data Security + parent: administration_heading + params: + ref_id: data_security + includes: + - data_security_agent + - data_security_log_management + - data_security_pci_compliance + - data_security_hipaa_compliance + - data_retention_periods + - data_security_guide + - name: Integrations + parent: platform_heading + params: + ref_id: integrations_top_level + # Instead of sourcing the api nav from main menu which has no children + # Lets define our own so we can load /api/latest/ and not have to handle redirect for just /api/ + - name: API + parent: platform_heading + url: /studio/api/latest/ + identifier: studio_api + #- name: API + # parent: platform_heading + # params: + # ref_id: api + - name: Agent + parent: platform_heading + params: + ref_id: agent + + + + + + + + + + + + + diff --git a/content/en/account_management/org_switching.md b/content/en/account_management/org_switching.md index 1ded83b076e..53288c21058 100644 --- a/content/en/account_management/org_switching.md +++ b/content/en/account_management/org_switching.md @@ -7,6 +7,10 @@ further_reading: text: "Managing Multiple-Organization Accounts" --- +{{% not_available_in_studio %}} + +## THIS SHOULD SHOW ON REGULAR DOCS & NOT VISIBLE ON STUDIO + If you belong to multiple Datadog organizations, the org switcher at the bottom left of the nav bar allows you to toggle between organizations. You can also view all organizations and switch between them from the [**Organizations** page][1] in **Personal Settings**. {{< img src="account_management/org_switching_062024.png" alt="Two ways of switching organizations" style="width:90%;" >}} @@ -17,6 +21,8 @@ For security purposes, you must have a valid session for each org you switch to. 2. **SAML Strict**: If your org is set for [SAML Strict][2], you must authenticate with SAML. You are required to re-authenticate each time you switch organizations. Since IdPs persist sessions, this is often a redirect. +{{% /not_available_in_studio %}} + ## Resetting passwords for multi-org users A password is shared across organizations for each multi-org user. If you reset your password, the reset affects all the organizations you belong to. diff --git a/content/studio/getting_started/_index.md b/content/studio/getting_started/_index.md new file mode 100644 index 00000000000..43b0be871dd --- /dev/null +++ b/content/studio/getting_started/_index.md @@ -0,0 +1,273 @@ +--- +title: Getting Started +description: Set up pre-configured monitoring packages for your frontend, backend, or LLM application using agentic or manual setup. +type: studio +--- + +{{< site-region region="gov" >}} +
Datadog Studio is not available in the selected site ({{< region-param key="dd_site_name" >}}) at this time.
+{{< /site-region >}} + +## Overview + +Datadog Studio gives small development teams production-grade observability without the overhead. Instead of manually configuring individual products and piecing together monitoring tools, Studio provides pre-configured monitoring packages for frontend, backend, or LLM/AI applications that work out of the box. + +Choose **agentic setup** to let AI assistants (Cursor or Claude) automatically detect your application type and configure the right features for your codebase, or use **manual setup** for full control. After configuration, your application immediately sends telemetry to Datadog for error tracking, performance insights, and user analytics—so you can focus on building features instead of debugging infrastructure. + +## Features by application type + +Studio automatically configures the following features based on your application type: +| Application Type | Features 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] | + +## Prerequisites + +Before you begin: + +- **Datadog Studio account**: [Sign up for free][7] if you don't have one +- **Development environment**: Access to your application's codebase +- **For agentic setup**: [Cursor][8] or [Claude Code][9] installed and configured +- **For manual setup**: Ability to install packages and modify configuration files in your project + +No API keys are required upfront, as authentication is handled during the setup process. + +## Setup + +To get started using Datadog Studio, select your setup method: + +- [**Agentic setup**](#agentic-setup): Let AI assistants ([Cursor][8] or [Claude][9]) automatically install and configure Datadog SDKs in your codebase. This setup method is 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 + +With agentic setup, your AI coding assistant analyzes your project, identifies the appropriate monitoring features, and automatically configures Datadog SDKs in your codebase. The AI agent installs dependencies, adds initialization code, and sets up environment variables—all with your approval at each step. Setup typically takes 5-10 minutes. + +### Supported platforms +Agentic setup is available for the following platforms: + +| Application Type | Supported 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] | + +### 1. Install the Datadog onboarding MCP server + +The Datadog Model Context Protocol (MCP) server enables your AI agent to access Datadog's onboarding tools. This is a one-time setup per AI client. + +1. Copy the deeplink or command for your AI agent client: + + {{< tabs >}} + {{% tab "Cursor" %}} + + Paste the following Cursor deeplink into your browser. + + {{% site-region region="us" %}} + + ```shell + cursor://anysphere.cursor-deeplink/mcp/install?name=datadog-onboarding-mcp&config=eyJ1cmwiOiJodHRwczovL21jcC5kYXRhZG9naHEuY29tL2FwaS91bnN0YWJsZS9tY3Atc2VydmVyL21jcD90b29sc2V0cz1vbmJvYXJkaW5nIiwidHlwZSI6Im9hdXRoIn0= + ``` + {{% /site-region %}} + + {{% site-region region="us3" %}} + ```shell + cursor://anysphere.cursor-deeplink/mcp/install?name=datadog-onboarding-us3&config=eyJ1cmwiOiJodHRwczovL21jcC51czMuZGF0YWRvZ2hxLmNvbS9hcGkvdW5zdGFibGUvbWNwLXNlcnZlci9tY3A/dG9vbHNldHM9b25ib2FyZGluZyIsInR5cGUiOiJvYXV0aCJ9 + ``` + {{% /site-region %}} + + {{% site-region region="us5" %}} + ```shell + cursor://anysphere.cursor-deeplink/mcp/install?name=datadog-onboarding-us5&config=eyJ1cmwiOiJodHRwczovL21jcC51czUuZGF0YWRvZ2hxLmNvbS9hcGkvdW5zdGFibGUvbWNwLXNlcnZlci9tY3A/dG9vbHNldHM9b25ib2FyZGluZyIsInR5cGUiOiJvYXV0aCJ9 + ``` + {{% /site-region %}} + + {{% site-region region="eu" %}} + ```shell + cursor://anysphere.cursor-deeplink/mcp/install?name=datadog-onboarding-mcp&config=eyJ1cmwiOiJodHRwczovL21jcC5kYXRhZG9naHEuZXUvYXBpL3Vuc3RhYmxlL21jcC1zZXJ2ZXIvbWNwP3Rvb2xzZXRzPW9uYm9hcmRpbmciLCJ0eXBlIjoib2F1dGgifQ== + ``` + {{% /site-region %}} + + {{% site-region region="ap1" %}} + ```shell + cursor://anysphere.cursor-deeplink/mcp/install?name=datadog-onboarding-ap1&config=eyJ1cmwiOiJodHRwczovL21jcC5hcDEuZGF0YWRvZ2hxLmNvbS9hcGkvdW5zdGFibGUvbWNwLXNlcnZlci9tY3A/dG9vbHNldHM9b25ib2FyZGluZyIsInR5cGUiOiJvYXV0aCJ9 + ``` + {{% /site-region %}} + + {{% site-region region="ap2" %}} + ```shell + cursor://anysphere.cursor-deeplink/mcp/install?name=datadog-onboarding-ap2&config=eyJ1cmwiOiJodHRwczovL21jcC5hcDIuZGF0YWRvZ2hxLmNvbS9hcGkvdW5zdGFibGUvbWNwLXNlcnZlci9tY3A/dG9vbHNldHM9b25ib2FyZGluZyIsInR5cGUiOiJvYXV0aCJ9 + ``` + {{% /site-region %}} + + {{< site-region region="gov" >}} +
Datadog Studio is not available in the selected site ({{< region-param key="dd_site_name" >}}) at this time.
+ {{< /site-region >}} + +{{% /tab %}} + +{{% tab "Claude Code" %}} + +Copy and execute the Claude Code command into your terminal: + + {{% site-region region="us" %}} + ```shell + claude mcp add --transport http datadog-onboarding-us1 "https://mcp.datadoghq.com/api/unstable/mcp-server/mcp?toolsets=onboarding" + ``` + {{% /site-region %}} + + {{% site-region region="us3" %}} + ```shell + claude mcp add --transport http datadog-onboarding-us3 "https://mcp.us3.datadoghq.com/api/unstable/mcp-server/mcp?toolsets=onboarding" + ``` + {{% /site-region %}} + + {{% site-region region="us5" %}} + ```shell + claude mcp add --transport http datadog-onboarding-us5 "https://mcp.us5.datadoghq.com/api/unstable/mcp-server/mcp?toolsets=onboarding" + ``` + {{% /site-region %}} + + {{% site-region region="eu" %}} + ```shell + claude mcp add --transport http datadog-onboarding-eu1 "https://mcp.datadoghq.eu/api/unstable/mcp-server/mcp?toolsets=onboarding" + ``` + {{% /site-region %}} + + {{% site-region region="ap1" %}} + ```shell + claude mcp add --transport http datadog-onboarding-ap1 "https://mcp.ap1.datadoghq.com/api/unstable/mcp-server/mcp?toolsets=onboarding" + ``` + {{% /site-region %}} + + {{% site-region region="ap2" %}} + ```shell + claude mcp add --transport http datadog-onboarding-ap2 "https://mcp.ap2.datadoghq.com/api/unstable/mcp-server/mcp?toolsets=onboarding" + ``` + {{% /site-region %}} + + {{< site-region region="gov" >}} +
Datadog Studio is not available in the selected site ({{< region-param key="dd_site_name" >}}) at this time.
+ {{< /site-region >}} + +{{% /tab %}} +{{< /tabs >}} + +2. In your AI agent client, click **Install** for the `datadog-onboarding-mcp` server. +3. If you see a **Needs login** link under the installed MCP server, click the link to complete the Oauth process. +4. When prompted to open an external website, click **Open**. +5. After you've granted access to your Datadog account, you are redirected to Cursor. Click **Open** to complete the authentication process. +5. Confirm you see MCP tools listed for the `datadog-onboarding-mcp` server. + +### 2. Configure your project + +After installing the MCP server, use a prompt to start the configuration process. Your AI agent detects your application type, installs the appropriate SDKs, and configures monitoring features automatically. + +**What happens when you run the prompt:** +1. The agent analyzes your project structure, dependencies, and framework +2. It determines which monitoring features to enable (frontend, backend, or LLM) +3. It requests permission to install packages and modify configuration files +4. It adds initialization code and environment variables +5. It provides testing steps to verify the setup + +**To configure your project:** + +1. Open your AI coding assistant in your project directory + +2. Copy and paste this prompt: + + ```console + Add Datadog Studio to my project + ``` + +3. Review each proposed change and accept the actions to complete setup (approximately 5-10 minutes) + +The agent does not commit any changes automatically—you maintain full control over what gets added to your codebase. + +### 3. Verify and deploy + +**Local verification:** +1. Start your application locally +2. Generate some activity (pageviews, errors, or API calls) +3. Check your terminal for confirmation that telemetry is being sent + +**Deploy to production:** +1. Commit the configuration changes to your repository +2. Add the environment variables provided during setup to your hosting platform (Vercel, Netlify, AWS, etc.) +3. Deploy your application + +**View your data:** +After deploying, telemetry appears in Datadog Studio within 1-2 minutes: +- **Frontend apps**: View error tracking, session replays, and analytics in the [RUM Explorer][13] +- **Backend services**: Check logs and metrics in the [Logs][14] and [Metrics Explorer][15] +- **LLM apps**: Monitor traces and costs in [LLM Observability][16] + +If data doesn't appear after 5 minutes, check that environment variables are set correctly in your production environment. + +## Manual setup + +Manual setup gives you full control over the integration process. Install SDKs, configure initialization code, and set environment variables yourself by following step-by-step instructions. + +**Setup workflow:** +1. Navigate to the [Studio Getting Started page][17] or add a New Application from the homepage +2. Select your application type (frontend, backend, or LLM) +3. Follow the in-app instructions specific to your framework and language +4. Install the required packages using your package manager +5. Add initialization code to your application entry point +6. Configure environment variables with your API keys +7. Deploy and verify data appears in Studio + +Typical setup time: 15-30 minutes depending on your application complexity. + +### Frontend monitoring + +Set up browser-based monitoring for web applications. **Recommended order**: Error Tracking → Session Replay → Product Analytics. + +{{< whatsnext desc="Follow the in-app setup instructions for each frontend product:" >}} + {{< nextlink href="/studio/error_tracking/frontend" >}}Frontend Error Tracking{{< /nextlink >}} + {{< nextlink href="/studio/real_user_monitoring/session_replay/" >}}Session Replay{{< /nextlink >}} + {{< nextlink href="/studio/product_analytics/#getting-started" >}}Product Analytics{{< /nextlink >}} +{{< /whatsnext >}} + +### Backend monitoring + +Set up server-side monitoring for APIs and services. Start with your primary log source (host, container, or cloud), then add Error Tracking and custom metrics as needed. + +{{< whatsnext desc="Follow the in-app instructions for each backend product:" >}} + {{< nextlink href="/studio/error_tracking/backend/getting_started/" >}}Backend Error Tracking{{< /nextlink >}} + {{< nextlink href="/studio/logs/log_collection/?tab=host" >}}Server / VM logs{{< /nextlink >}} + {{< nextlink href="/studio/logs/log_collection/?tab=container" >}}Container logs{{< /nextlink >}} + {{< nextlink href="/studio/logs/log_collection/?tab=cloudintegration" >}}Cloud / Integration logs{{< /nextlink >}} + {{< nextlink href="/studio/logs/log_collection/?tab=application" >}}Application logs{{< /nextlink >}} + {{< nextlink href="/studio/api/latest/logs/" >}}API logs{{< /nextlink >}} + {{< nextlink href="/studio/metrics/custom_metrics/" >}}Custom metrics{{< /nextlink >}} + {{< nextlink href="/studio/metrics/open_telemetry/" >}}OpenTelemetry metrics{{< /nextlink >}} + {{< nextlink href="https://app.datadoghq.com/integrations" >}}Integrations metrics{{< /nextlink >}} +{{< /whatsnext >}} + +### Llm observability + +Monitor AI applications, agents, and LLM API calls. Works with OpenAI, Anthropic, LangChain, LangGraph, and more. + +{{< whatsnext desc="Follow the in-app instructions for LLM Observability:" >}} + {{< nextlink href="/studio/llm_observability/quickstart/?tab=python#trace-an-llm-application" >}}LLM Observability{{< /nextlink >}} +{{< /whatsnext >}} + +[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]: https://app.datadoghq.com/rum/explorer +[14]: https://app.datadoghq.com/logs +[15]: https://app.datadoghq.com/metric/explorer +[16]: https://app.datadoghq.com/llm/overview +[17]: https://app.datadoghq.com/studio/getting-started diff --git a/content/studio/index.md b/content/studio/index.md new file mode 100644 index 00000000000..c5661666c5c --- /dev/null +++ b/content/studio/index.md @@ -0,0 +1,176 @@ +--- +title: Getting Started +description: Set up pre-configured monitoring packages for your frontend, backend, or LLM application using agentic or manual setup. +type: studio +--- + +## 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/content/studio/test.md b/content/studio/test.md new file mode 100644 index 00000000000..412c452c38e --- /dev/null +++ b/content/studio/test.md @@ -0,0 +1,6 @@ +--- +title: testing +type: studio +--- + +This is some testing... diff --git a/layouts/partials/nav/left-nav-studio.html b/layouts/partials/nav/left-nav-studio.html new file mode 100644 index 00000000000..949c4e410a2 --- /dev/null +++ b/layouts/partials/nav/left-nav-studio.html @@ -0,0 +1,297 @@ +{{/* + This navigation is used on the left of the site, and is the main Studio documentation nav. + Looking for the header nav? see website-modules + */}} + + {{ $dot := . }} + {{ $studioMenu := "studio" }} + {{ $menu := .Scratch.Get "menu" }} + {{ $currentPage := . }} + + +{{ $mainMenu := index .Site.Menus "main" }} +{{ if not $mainMenu }} + {{ $mainMenu = index .Sites.Default.Menus "main" }} +{{ end }} + + +{{ with index .Site.Menus $studioMenu }} + {{ $dot.Scratch.Set "menu" . }} +{{ else }} + {{ $dot.Scratch.Set "menu" (index .Sites.Default.Menus $studioMenu) }} +{{ end }} +{{ $menu := .Scratch.Get "menu" }} + +{{ $currentPage := . }} + + +{{ $currentEnURL := $currentPage.RelPermalink }} +{{ if ne $currentPage.Lang "en" }} + {{ $currentEnURL = (strings.Replace $currentPage.RelPermalink (printf "/%s" .Lang) "") }} +{{ end }} + +{{/* + build array ($engMenuChildren) of english menu items with parents from "studio.en.yaml". + for use in providing english names for anchoring the nav-links (.nav-link) +*/}} +{{ if ne $currentPage.Lang "en" }} +{{$engMenu := (index .Sites.Default.Menus $studioMenu) }} +{{ range $engMenu }} + {{ if and (.HasChildren) (ne $currentPage.CurrentSection.RelPermalink "/studio/") }} + {{ range .Children }} + {{ $dot.Scratch.SetInMap "engMenuChildren" .Identifier .Name }} + {{ end }} + {{ end }} +{{ end }} +{{ end }} + +{{$engMenuChildren := $dot.Scratch.Get "engMenuChildren" | default dict}} + +{{ $path := (printf "%s/" $.Site.Params.branch) }} + +{{/* account for branch name in preview site for data-path */}} +{{ if eq $.Site.Params.environment "preview"}} + {{ $.Scratch.Set "branch_path" $path }} +{{ else }} + {{ $.Scratch.Set "branch_path" "" }} +{{ end }} + +{{ $branchPath := trim ($.Scratch.Get "branch_path") "/" }} +{{ $url_without_anchor := "" }} + +{{ range $menu }} + {{ if .HasChildren }} + {{/* HEADER */}} +

{{.Name}}

+ + {{ end }} +{{ end }} diff --git a/layouts/partials/sidenav/main-sidenav.html b/layouts/partials/sidenav/main-sidenav.html index 6e072b54913..4065725331a 100644 --- a/layouts/partials/sidenav/main-sidenav.html +++ b/layouts/partials/sidenav/main-sidenav.html @@ -16,7 +16,11 @@ {{ end}}
- {{ partialCached "nav/left-nav.html" . .Section .Site.Language.Lang }} + {{ if eq site.Language.Lang "studio" }} + {{ partialCached "nav/left-nav-studio.html" . .Section .Site.Language.Lang }} + {{ else }} + {{ partialCached "nav/left-nav.html" . .Section .Site.Language.Lang }} + {{ end }}
diff --git a/layouts/shortcodes/not_available_in_studio.html b/layouts/shortcodes/not_available_in_studio.html new file mode 100644 index 00000000000..539cb72724c --- /dev/null +++ b/layouts/shortcodes/not_available_in_studio.html @@ -0,0 +1 @@ +{{- if ne site.Language.Lang "studio" -}}{{- .Inner -}}{{- end -}} diff --git a/layouts/studio/baseof.html b/layouts/studio/baseof.html new file mode 100644 index 00000000000..905a7bb6e50 --- /dev/null +++ b/layouts/studio/baseof.html @@ -0,0 +1,82 @@ + + + + + {{ partialCached "header-scripts.html" . }} + + + {{ partial "prefetch.html" . }} + {{ partial "preload.html" . }} + {{ .Title }} + + {{ if .Params.external_redirect }} {{ partial "meta-http-equiv.html" . }} {{ end }} + {{- partial "canonical.html" . -}} + {{- partial "noindex.html" . -}} + {{- partial "hreflang.html" . -}} + + + + {{ partialCached "css.html" . }} + + {{- if and (ne $.Params.disable_opengraph_meta_tags true) .File -}} + {{- partial "meta.html" . -}} + {{- end -}} + + + +{{- $bodyClass := $.Scratch.Get "bodyClass" -}} +{{ $ctx := . }} + + + + +
+
+
+
+
+
+
+
+ {{ partialCached "header/header.html" . }} + +
+
+
+ {{ partial "sidenav/main-sidenav.html" . }} +
+ +
+
+ {{ block "main" . }}{{ end }} + {{ partial "page-edit.html" (dict "ctx" $ctx "type" "contribute") }} +
+
+ + {{ if ne .Params.disable_sidebar true }} + + {{ end }} +
+
+ + {{ partialCached "footer/footer.html" . }} + {{ partial "footer-scripts.html" . }} + {{ partial "footer-js-dd-docs-methods" . }} + {{ partial "preview_banner/preview_banner" . }} + + + diff --git a/layouts/studio/index.html b/layouts/studio/index.html new file mode 100755 index 00000000000..83e7b73bd00 --- /dev/null +++ b/layouts/studio/index.html @@ -0,0 +1,95 @@ + + + + + {{ partialCached "header-scripts.html" . }} + + + {{ partial "prefetch.html" . }} + {{ partial "preload.html" . }} + {{ .Title }} + + {{ if .Params.external_redirect }} {{ partial "meta-http-equiv.html" . }} {{ end }} + {{- partial "canonical.html" . -}} + {{- partial "noindex.html" . -}} + {{- partial "hreflang.html" . -}} + + + + {{ partialCached "css.html" . }} + + {{- if and (ne $.Params.disable_opengraph_meta_tags true) .File -}} + {{- partial "meta.html" . -}} + {{- end -}} + + + +{{- $bodyClass := $.Scratch.Get "bodyClass" -}} +{{ $ctx := . }} + + + + +
+
+
+
+
+
+
+
+ {{ partialCached "header/header.html" . }} + +
+
+
+ {{ partial "sidenav/main-sidenav.html" . }} +
+ +
+
+
+
+

{{ .Title }}

+
+
+ {{ if .File }} + {{ partial "breadcrumbs.html" . }} + {{ end }} +
+
+ {{ 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") }} +
+
+ + {{ if ne .Params.disable_sidebar true }} + + {{ end }} +
+
+ + {{ partialCached "footer/footer.html" . }} + {{ partial "footer-scripts.html" . }} + {{ partial "footer-js-dd-docs-methods" . }} + {{ partial "preview_banner/preview_banner" . }} + + +