Docs - Traceloop docs (#8897)

* traceloop docs * Apply suggestions from code review Co-authored-by: Ian Vanagas <[email protected]> --------- Co-authored-by: Ian Vanagas <[email protected]>
PostHog · Jul 5, 2024 · 329ce16 · 329ce16
1 parent 1372cee
commit 329ce16
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 11 deletions.
diff --git a/contents/docs/ai-engineering/helicone-posthog.md b/contents/docs/ai-engineering/helicone-posthog.md
@@ -6,11 +6,9 @@ availability:
     enterprise: full
 ---
 
-> This feature is currently in public beta. This means it's not yet a perfect experience, but we'd love to know your thoughts. Please [share your feedback](http://app.posthog.com/home#supportModal) and [follow our roadmap](https://github.com/PostHog/posthog/issues/18547).
-
 You can integrate with [Helicone](https://www.helicone.ai/) and bring data into PostHog for analysis. Additionally, we offer a dashboard template to help you quickly get insights into your LLM product. 
 
-## Integrating with Helicone
+## How to install the integration
 
 1. Sign up for [Helicone](https://www.helicone.ai/) and add it to your app.
 2. Similar to how you set `Helicone-Auth` [header](https://docs.helicone.ai/helicone-headers/header-directory#supported-headers) when configuring your LLM client, add two new headers `Helicone-Posthog-Key` and `Helicone-Posthog-Host` with your PostHog host and API key (you can find these in your [PostHog project settings](https://us.posthog.com/settings/project)):
@@ -80,6 +78,6 @@ To create your own dashboard from a template:
 
 1. Go the [dashboard tab](https://us.posthog.com/dashboard) in PostHog.
 2. Click the **New dashboard** button in the top right.
-3. Select **LLM metrics – [name of the integration you installed]** from the list of templates.
+3. Select **LLM metrics – Helicone** from the list of templates.
 
 ![How to create an LLM analytics dashboard using the template](https://res.cloudinary.com/dmukukwp6/video/upload/v1713967763/posthog.com/contents/docs/langfuse-dash.mp4)
diff --git a/contents/docs/ai-engineering/langfuse-posthog.md b/contents/docs/ai-engineering/langfuse-posthog.md
@@ -6,11 +6,9 @@ availability:
     enterprise: full
 ---
 
-> This feature is currently an [opt-in public beta](/docs/getting-started/enable-betas). This means it's not yet a perfect experience, but we'd love to know your thoughts. Please [share your feedback](http://app.posthog.com/home#supportModal) and [follow our roadmap](https://github.com/PostHog/posthog/issues/18547).
-
 You can integrate with [Langfuse](https://langfuse.com/) and bring data into PostHog for analysis. Additionally, we offer a dashboard template to help you quickly get insights into your LLM product. 
 
-## Integrating with Langfuse
+## How to install the integration
 
 1. First add [Langfuse Tracing](https://langfuse.com/docs/tracing) to your LLM app ([Quickstart](https://langfuse.com/docs/get-started)).
 2. In your [Langfuse dashboard](https://cloud.langfuse.com/), click on **Settings** and scroll down to the **Integrations** section to find the PostHog integration.
@@ -29,6 +27,6 @@ To create your own dashboard from a template:
 
 1. Go the [dashboard tab](https://us.posthog.com/dashboard) in PostHog.
 2. Click the **New dashboard** button in the top right.
-3. Select **LLM metrics – [name of the integration you installed]** from the list of templates.
+3. Select **LLM metrics – Langfuse** from the list of templates.
 
 ![How to create an LLM analytics dashboard using the template](https://res.cloudinary.com/dmukukwp6/video/upload/v1713967763/posthog.com/contents/docs/langfuse-dash.mp4)
diff --git a/contents/docs/ai-engineering/llm-insights.md b/contents/docs/ai-engineering/llm-insights.md
@@ -19,11 +19,11 @@ Currently, we support integrations for the following platforms:
 
 - [Langfuse](https://langfuse.com) ([instructions](/docs/ai-engineering/langfuse-posthog))
 - [Helicone](https://www.helicone.ai/) ([instructions](/docs/ai-engineering/helicone-posthog))
-
+- [Traceloop](https://www.traceloop.com/) ([instructions](/docs/ai-engineering/traceloop-posthog))
 
 ## Dashboard templates
 
-Once you've installed an integration, [dashboard templates](/docs/product-analytics/dashboards) help you quickly set up relevant insights. Here examples for [Langfuse](https://eu.posthog.com/shared/HPOaK5zNVkP062nQJQJoooXe61l15w) and [Helicone](https://us.posthog.com/shared/6_Qa74au0RhxERZ3wW9g87oxWlFxNA).
+Once you've installed an integration, [dashboard templates](/docs/product-analytics/dashboards) help you quickly set up relevant insights. Here are examples for [Langfuse](https://eu.posthog.com/shared/HPOaK5zNVkP062nQJQJoooXe61l15w), [Helicone](https://us.posthog.com/shared/6_Qa74au0RhxERZ3wW9g87oxWlFxNA), and [Traceloop](https://us.posthog.com/shared/tpX9kUd5BbGkdjxQE8YhCskNuYA7Jw).
 
 To create your own dashboard from a template:
 

diff --git a/contents/docs/ai-engineering/traceloop-posthog.md b/contents/docs/ai-engineering/traceloop-posthog.md
@@ -0,0 +1,40 @@
+---
+title: Integrating with Langfuse
+availability:
+    free: full
+    selfServe: full
+    enterprise: full
+---
+
+> This integration is currently an [opt-in public beta](/docs/getting-started/enable-betas). This means it's not yet a perfect experience, but we'd love to know your thoughts. Please [share your feedback](http://us.posthog.com/home#supportModal) and [follow our roadmap](https://github.com/PostHog/posthog/issues/18547).
+
+You can integrate with [Traceloop](https://www.traceloop.com/) and bring data into PostHog for analysis. Additionally, we offer a dashboard template to help you quickly get insights into your LLM product. 
+
+## How to install the integration
+
+1. Sign up for [Traceloop](https://www.traceloop.com/) and add it to your app.
+2. Go to the [integrations page](https://app.traceloop.com/settings/integrations) in your Traceloop dashboard and click on the PostHog card.
+
+![PostHog in Traceloop settings](https://res.cloudinary.com/dmukukwp6/image/upload/v1720097489/posthog.com/contents/posthog-traceloop.png)
+
+3. Enter in your PostHog host and project API key (you can find these in your [PostHog project settings](https://us.posthog.com/settings/project)).
+4. Select the environment you want to connect to PostHog and click **Enable**.
+
+Traceloop will now send events to PostHog under the name `traceloop span`.
+
+## Using the Traceloop dashboard template
+
+Once you've installed the integration, our Traceloop [dashboard template](/docs/product-analytics/dashboards) helps you quickly set up relevant insights. You can see an [example dashboard here](https://us.posthog.com/shared/tpX9kUd5BbGkdjxQE8YhCskNuYA7Jw).
+
+To create your own dashboard from a template:
+
+1. Go the [dashboard tab](https://us.posthog.com/dashboard) in PostHog.
+2. Click the **New dashboard** button in the top right.
+3. Select **LLM metrics – Traceloop** from the list of templates.
+
+<ProductVideo
+    videoLight= "https://res.cloudinary.com/dmukukwp6/video/upload/v1720101505/posthog.com/contents/traceloop-dashbooard-light.mp4" 
+    videoDark= "https://res.cloudinary.com/dmukukwp6/video/upload/v1720101505/posthog.com/contents/traceloop-dark.mp4"
+    alt="How to create traceloop dashboard from a template" 
+    classes="rounded"
+/>
diff --git a/src/navs/index.js b/src/navs/index.js
@@ -2858,14 +2858,20 @@ export const docsMenu = {
                     name: 'Langfuse',
                     url: '/docs/ai-engineering/langfuse-posthog',
                     icon: 'IconWrench',
-                    color: 'purple',
+                    color: 'red',
                 },
                 {
                     name: 'Helicone',
                     url: '/docs/ai-engineering/helicone-posthog',
                     icon: 'IconWrench',
                     color: 'green',
                 },
+                {
+                    name: 'Traceloop',
+                    url: '/docs/ai-engineering/traceloop-posthog',
+                    icon: 'IconWrench',
+                    color: 'purple',
+                },
             ],
         },
     ],