diff --git a/content/en/agentic_onboarding/setup.md b/content/en/agentic_onboarding/setup.md new file mode 100644 index 00000000000..d9e14934392 --- /dev/null +++ b/content/en/agentic_onboarding/setup.md @@ -0,0 +1,182 @@ +--- +title: Agentic Onboarding Setup +description: Set up the Datadog MCP server to instrument your frontend applications with coding agents like Cursor or Claude Code. +further_reading: + +--- + +{{< callout btn_hidden="true" header="Join the Preview!">}} +Agentic Onboarding is in Preview. +{{< /callout >}} + +{{< site-region region="gov" >}} +
Agentic Onboarding is not available in the selected site ({{< region-param key="dd_site_name" >}}) at this time.
+{{< /site-region >}} + +## Overview + +Datadog's Agentic Onboarding allows you to instrument your frontend applications with one prompt using LLM coding agents like [Cursor][1] or [Claude Code][2]. + +Instead of navigating multiple setup steps or searching through documentation, you can instrument your frontend applications for [Error Tracking][3], [Real User Monitoring (RUM)][4], and [Product Analytics][5] in one command. + +With Agentic Onboarding, your coding assistant automatically detects your project's frameworks, add configuration, and provisions required tokens and apps directly from your IDE. + +## Prerequisites +### Supported frameworks +Agentic Onboarding is available for the following frameworks: Android, Angular, iOS, Next.js, React, Svelte, Vanilla JS, Vue + +## Setup + +### Install the Datadog Onboarding MCP server + +To install the Datadog Onboarding Model Context Protocol (MCP) server, follow the steps below. + +{{< tabs >}} +{{% tab "Cursor" %}} +1. Copy and paste the following 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" >}} +
Agentic Onboarding is not available in the selected site ({{< region-param key="dd_site_name" >}}) at this time.
+ {{< /site-region >}} + +2. In Cursor, click **Install** for the `datadog-onboarding-mcp` server. +3. If the MCP server shows a **Needs login** link, select it and complete the OAuth flow. When prompted, choose **Open** to continue and grant access to your Datadog account. +4. After authentication, return to Cursor and confirm that MCP tools appear under the `datadog-onboarding-mcp` server. + +{{% /tab %}} + +{{% tab "Claude Code" %}} + +1. Open an active Claude Code session with the /mcp command: + + {{% 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" >}} +
Agentic Onboarding is not available in the selected site ({{< region-param key="dd_site_name" >}}) at this time.
+ {{< /site-region >}} + +2. Select the MCP server installed in Step 1. You should see a `disconnected - Enter to login` message. Press Enter. +3. When you see the option to authenticate, press Enter. This brings you to the OAuth screen. + +{{% /tab %}} +{{< /tabs >}} + +### Set up your project + +Your AI coding agent can help configure Datadog for your project. When you provide a setup prompt, it: + +- analyzes your project and identifies your project's framework, language, and bundler +- calls the tool, asking for your permission before it runs + + **Note**: Your coding agent makes changes locally without committing them. +- applies the configuration changes specified by the tool +- provides steps to verify that your application is sending telemetry to Datadog + +1. To get started, copy and paste the following prompt based on the product you want to use into your coding agent (such as Cursor or Claude Code): + + {{< tabs >}} + {{% tab "Error Tracking" %}} + ```console + Add Datadog Error Tracking to my project + ``` + {{% /tab %}} + + {{% tab "Real User Monitoring" %}} + ```console + Add Datadog Real User Monitoring to my project + ``` + {{% /tab %}} + + {{% tab "Product Analytics" %}} + ```console + Add Datadog Product Analytics to my project + ``` + {{% /tab %}} + {{< /tabs >}} + +2. After pasting the prompt, review and accept each action your AI agent proposes to move through the setup process. + +### Deploy your app to production + +Commmit the changes in your repository and configure the provided environment variables in your production environment. + +[1]: https://cursor.com/ +[2]: https://claude.ai/ +[3]: /error_tracking/frontend/ +[4]: /real_user_monitoring/ +[5]: /product_analytics/ +[6]: https://platform.openai.com/docs/guides/text +[7]: https://github.com/langchain-ai/langgraph +[8]: https://github.com/vercel/ai-chatbot + diff --git a/content/en/error_tracking/_index.md b/content/en/error_tracking/_index.md index 885dd0b5792..718871e49bf 100644 --- a/content/en/error_tracking/_index.md +++ b/content/en/error_tracking/_index.md @@ -23,6 +23,19 @@ Additional features are available depending on the source of the error. See [sup - Take a tour of key Error Tracking features in the [Error Tracking Explorer][5] documentation. - Use the product-specific links in the next section to set up Error Tracking for a particular error source. +## Setup +{{< whatsnext desc="To get started with Datadog Error Tracking, see the corresponding documentation:" >}} + {{< nextlink href="agentic_onboarding/setup" >}}Agentic Onboarding{{< /nextlink >}} + {{< nextlink href="error_tracking/frontend/browser" >}}Browser{{< /nextlink >}} + {{< nextlink href="error_tracking/frontend/mobile/android" >}}Android{{< /nextlink >}} + {{< nextlink href="error_tracking/frontend/mobile/ios" >}}iOS{{< /nextlink >}} + {{< nextlink href="error_tracking/frontend/mobile/expo" >}}Expo{{< /nextlink >}} + {{< nextlink href="error_tracking/frontend/mobile/reactnative" >}}React Native{{< /nextlink >}} + {{< nextlink href="error_tracking/frontend/mobile/flutter" >}}Flutter{{< /nextlink >}} + {{< nextlink href="error_tracking/frontend/mobile/kotlin_multiplatform" >}}Kotlin Multiplatform{{< /nextlink >}} + {{< nextlink href="error_tracking/frontend/logs" >}}Logs{{< /nextlink >}} +{{< /whatsnext >}} + ## Supported error sources Error Tracking captures and processes errors across your web, mobile, and backend applications. You can instrument your applications and services using the [Browser SDK][6], [Mobile SDK][7], or ingest errors from your Logs, Traces, and Real User Monitoring events. diff --git a/content/en/error_tracking/frontend/_index.md b/content/en/error_tracking/frontend/_index.md index 406397211ee..15a893467b3 100644 --- a/content/en/error_tracking/frontend/_index.md +++ b/content/en/error_tracking/frontend/_index.md @@ -25,13 +25,14 @@ It is critical for your system’s health to consistently monitor the errors col Error Tracking simplifies debugging by grouping thousands of similar errors into a single issue. Error Tracking enables you to: - Track, triage, and debug fatal errors -- Group similar errors into issues, so that you can more easily identify important errors and reduce noise +- Group similar errors into issues to identify important errors and reduce noise - Set monitors on error tracking events, such as high error volume or new issues - Follow issues over time to know when they first started, if they are still ongoing, and how often they occur -- See a detailed timeline of steps a user took leading up to the error, simplifying the process to reproduce and resolve errors quickly +- See a detailed timeline of steps a user took leading up to the error, simplifying the process to reproduce and resolve errors ## Setup {{< whatsnext desc="To get started with Datadog Error Tracking, see the corresponding documentation:" >}} + {{< nextlink href="agentic_onboarding/setup" >}}Agentic Onboarding (frontend only){{< /nextlink >}} {{< nextlink href="error_tracking/frontend/browser" >}}Browser{{< /nextlink >}} {{< nextlink href="error_tracking/frontend/mobile/android" >}}Android{{< /nextlink >}} {{< nextlink href="error_tracking/frontend/mobile/ios" >}}iOS{{< /nextlink >}} diff --git a/content/en/real_user_monitoring/application_monitoring/agentic_onboarding.md b/content/en/real_user_monitoring/application_monitoring/agentic_onboarding.md new file mode 100644 index 00000000000..1d49d08c1c7 --- /dev/null +++ b/content/en/real_user_monitoring/application_monitoring/agentic_onboarding.md @@ -0,0 +1,6 @@ +--- +title: Agentic Onboarding for RUM +description: Instrument your frontend application with one prompt using LLM coding agents like Cursor or Claude. +--- + +{{< include-markdown "agentic_onboarding/setup" >}} \ No newline at end of file diff --git a/content/en/real_user_monitoring/application_monitoring/android/setup.md b/content/en/real_user_monitoring/application_monitoring/android/setup.md index 10272a30a8f..9ce57ac6afa 100644 --- a/content/en/real_user_monitoring/application_monitoring/android/setup.md +++ b/content/en/real_user_monitoring/application_monitoring/android/setup.md @@ -27,7 +27,14 @@ The Datadog Android SDK supports Android 6.0+ (API level 23) and Android TV. ## Setup -To start sending RUM data from your Android or Android TV application to Datadog: +**Choose your setup method:** + +- **[Agentic Onboarding (in Preview)][18]**: Use AI coding agents (Cursor, Claude Code) to automatically instrument your Android application with one prompt. The agent detects your project structure and configures the RUM SDK for you. +- **Manual setup** (below): Follow the step-by-step instructions to manually add and configure the RUM SDK in your Android application. + +### Manual setup + +To start sending RUM data from your Android or Android TV application to Datadog, follow the steps below. ### Step 1 - Declare the Android SDK as a dependency @@ -637,3 +644,4 @@ val inputStream = context.getRawResAsRumResource(id) [15]: https://square.github.io/okhttp/features/interceptors/#network-interceptors [16]: /real_user_monitoring/application_monitoring/android/advanced_configuration/#automatically-track-network-requests [17]: https://square.github.io/okhttp/features/interceptors/ +[18]: /real_user_monitoring/application_monitoring/agentic_onboarding/?tab=realusermonitoring \ No newline at end of file diff --git a/content/en/real_user_monitoring/application_monitoring/browser/_index.md b/content/en/real_user_monitoring/application_monitoring/browser/_index.md index 4130cf695c8..b027d08e964 100644 --- a/content/en/real_user_monitoring/application_monitoring/browser/_index.md +++ b/content/en/real_user_monitoring/application_monitoring/browser/_index.md @@ -23,6 +23,7 @@ To get started with RUM for Browser, create an application and configure the Bro {{< whatsnext desc="This section includes the following topics:" >}} {{< nextlink href="real_user_monitoring/application_monitoring/browser/setup/client">}}Client-Side: Instrument each of your browser-based web applications, deploy the application, then configure the initialization parameters you want to track, and use advanced configuration to further manage data and context that RUM collects.{{< /nextlink >}} {{< nextlink href="/real_user_monitoring/application_monitoring/browser/setup/server">}}Auto-Instrumentation: Inject a RUM SDK JavaScript scriptlet into the HTML responses of your web applications being served through a web server or proxy.{{< /nextlink >}} + {{< nextlink href="/real_user_monitoring/application_monitoring/agentic_onboarding/?tab=realusermonitoring">}}Agentic Onboarding: (In Preview) Perform an AI-guided setup that automatically detects your project's framework and adds the RUM SDK with one prompt using coding agents.{{< /nextlink >}} {{< nextlink href="/real_user_monitoring/application_monitoring/browser/advanced_configuration">}}Advanced configuration: Configure RUM Browser SDK to modify data collection, override view names, manage user sessions, and control sampling for your application's needs.{{< /nextlink >}} {{< nextlink href="/real_user_monitoring/application_monitoring/browser/data_collected">}}Data Collected: Review data that the Browser SDK collects.{{< /nextlink >}} {{< nextlink href="/real_user_monitoring/application_monitoring/browser/monitoring_page_performance">}}Monitoring Page Performance: Monitor view timings to understand your application's performance from a user's perspective. {{< /nextlink >}} diff --git a/content/en/real_user_monitoring/application_monitoring/browser/setup/_index.md b/content/en/real_user_monitoring/application_monitoring/browser/setup/_index.md index 00176689a46..6a6ce52355b 100644 --- a/content/en/real_user_monitoring/application_monitoring/browser/setup/_index.md +++ b/content/en/real_user_monitoring/application_monitoring/browser/setup/_index.md @@ -12,18 +12,20 @@ further_reading: ## Setup {{< whatsnext desc="Choose the instrumentation type for the Browser SDK:" >}} - {{< nextlink href="real_user_monitoring/application_monitoring/browser/setup/client">}}Client-Side: Instrument each of your browser-based web applications, deploy the application, then configure the initialization parameters you want to track, and use advanced configuration to further manage data and context that RUM collects.{{< /nextlink >}} {{< nextlink href="/real_user_monitoring/application_monitoring/browser/setup/server">}}Auto-Instrumentation: Inject a RUM SDK JavaScript scriptlet into the HTML responses of your web applications being served through a web server or proxy.{{< /nextlink >}} + {{< nextlink href="/real_user_monitoring/application_monitoring/agentic_onboarding">}}Agentic Onboarding: Instrument your frontend applications with one prompt using LLM coding agents like Cursor or Claude.{{< /nextlink >}} + {{< nextlink href="real_user_monitoring/application_monitoring/browser/setup/client">}}Client-Side: Instrument each of your browser-based web applications, deploy the application, then configure the initialization parameters you want to track, and use advanced configuration to further manage data and context that RUM collects.{{< /nextlink >}} {{< /whatsnext >}} ## How to choose the instrumentation type -| | Auto-instrumentation (Preview) | Client-side (Manual) | -|----------------------|--------------------------------|----------------------| -| **SDK setup mechanism** | [Automatically][1] add RUM JS to your web app HTML. Once RUM Auto-instrumentation is set-up, manage configurations from the UI. | [Manually][2] add the RUM SDK to your application code and manage configurations in code. | -| **Code changes required** | No | Yes | -| **Setup complexity** | Low | Medium | -| **User groups** | **SRE and engineering teams** without access to frontend code, or **teams who need to manage** all observability needs centrally, may find this useful for:
- Unlocking performance data across all applications upon setting up RUM
- Holistically monitoring application performance across the organization | **Frontend engineering, mobile engineering, or product teams** with access to frontend code may find this method useful for:
- Daily engineering needs (for example: live support, troubleshooting, and health checks for downstream services)
-Product needs (for example: user flow analysis, user segmentation, and feature flag tracking)
- Capturing observability from in-house code or complex functions that aren't captured by automatic instrumentation | +| | Auto-instrumentation (Preview) | Agentic Onboarding (Preview) | Client-side (Manual) | +|----------------------|--------------------------------|------------------------------|----------------------| +| **SDK setup mechanism** | [Automatically][1] add RUM JS to your web app HTML. Once RUM Auto-instrumentation is set-up, manage configurations from the UI. | [AI-guided setup][3] that automatically detects your project's framework and adds the RUM SDK with one prompt using coding agents. | [Manually][2] add the RUM SDK to your application code and manage configurations in code. | +| **Code changes required** | No | Yes (automated by AI agent) | Yes | +| **Setup complexity** | Low | Low | Medium | +| **Supported platforms** | Apache, IBM HTTP Server, Java Servlet, Nginx, Windows IIS | Next.js, React, Svelte, Vue, Vanilla JavaScript | All browser-based applications | +| **User groups** | **SRE and engineering teams** without access to frontend code, or **teams who need to manage** all observability needs centrally, may find this useful for:
- Unlocking performance data across all applications upon setting up RUM
- Holistically monitoring application performance across the organization | **Teams using AI coding agents** (Cursor, Claude Code) may find this useful for:
- Accelerating RUM setup with AI-guided instrumentation
- Automating framework detection and SDK configuration
- Reducing time-to-observability for new projects | **Frontend engineering, mobile engineering, or product teams** with access to frontend code may find this method useful for:
- Daily engineering needs (for example: live support, troubleshooting, and health checks for downstream services)
-Product needs (for example: user flow analysis, user segmentation, and feature flag tracking)
- Capturing observability from in-house code or complex functions that aren't captured by automatic instrumentation | ## Further reading @@ -31,3 +33,4 @@ further_reading: [1]: /real_user_monitoring/application_monitoring/browser/setup/server [2]: /real_user_monitoring/application_monitoring/browser/setup/client +[3]: /real_user_monitoring/application_monitoring/agentic_onboarding/?tab=realusermonitoring diff --git a/content/en/real_user_monitoring/application_monitoring/ios/setup.md b/content/en/real_user_monitoring/application_monitoring/ios/setup.md index a8228a39410..61d7ffb9bf5 100644 --- a/content/en/real_user_monitoring/application_monitoring/ios/setup.md +++ b/content/en/real_user_monitoring/application_monitoring/ios/setup.md @@ -47,7 +47,14 @@ Before you begin, ensure you have: ## Setup -To start sending RUM data from your iOS or tvOS application to Datadog: +**Choose your setup method:** + +- **[Agentic Onboarding (in Preview)][14]**: Use AI coding agents (Cursor, Claude Code) to automatically instrument your iOS application with one prompt. The agent detects your project structure and configures the RUM SDK for you. +- **Manual setup** (below): Follow the step-by-step instructions to manually add and configure the RUM SDK in your iOS application. + +### Manual setup + +To start sending RUM data from your iOS or tvOS application to Datadog, follow the steps below. ### Step 1 - Add the iOS SDK as a dependency @@ -553,3 +560,4 @@ See [Supported versions][9] for a list of operating system versions and platform [11]: /real_user_monitoring/ios/web_view_tracking/ [12]: /real_user_monitoring/ios/data_collected/ [13]: https://app.datadoghq.com/rum/application/ +[14]: /real_user_monitoring/application_monitoring/agentic_onboarding/?tab=realusermonitoring diff --git a/content/en/real_user_monitoring/application_monitoring/react_native/setup/reactnative.md b/content/en/real_user_monitoring/application_monitoring/react_native/setup/reactnative.md index 6774dd6d89f..1ec41f44046 100644 --- a/content/en/real_user_monitoring/application_monitoring/react_native/setup/reactnative.md +++ b/content/en/real_user_monitoring/application_monitoring/react_native/setup/reactnative.md @@ -41,6 +41,12 @@ The React Native SDK supports the following services: ## Setup +Follow the step-by-step instructions to manually add and configure the RUM SDK in your React Native application. + +### Manual setup + +To start sending RUM data from your React Native application to Datadog, follow the steps below. + To install with NPM, run: ```sh @@ -478,3 +484,4 @@ end [12]: https://support.apple.com/guide/security/security-of-runtime-process-sec15bfe098e/web [13]: https://stackoverflow.com/questions/37388126/use-frameworks-for-only-some-pods-or-swift-pods/60914505#60914505 [14]: https://reactnative.dev/architecture/landing-page +[15]: /real_user_monitoring/application_monitoring/ios/agentic_onboarding/?tab=realusermonitoring