From 32ba6f1e0a22ed058c709b601a867fc6f58eff7c Mon Sep 17 00:00:00 2001 From: Lior539 Date: Thu, 25 Jul 2024 18:26:20 +0100 Subject: [PATCH] feat: Add LLM platforms to product analytics onboarding (#23729) Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> --- .../src/scenes/onboarding/sdks/allSDKs.tsx | 21 +++++++ .../scenes/onboarding/sdks/logos/helicone.svg | 8 +++ .../scenes/onboarding/sdks/logos/langfuse.svg | 9 +++ .../onboarding/sdks/logos/traceloop.svg | 13 +++++ .../ProductAnalyticsSDKInstructions.tsx | 6 ++ .../sdks/product-analytics/helicone.tsx | 58 +++++++++++++++++++ .../sdks/product-analytics/index.tsx | 3 + .../sdks/product-analytics/langfuse.tsx | 54 +++++++++++++++++ .../sdks/product-analytics/traceloop.tsx | 43 ++++++++++++++ .../sdk-install-instructions/html-snippet.tsx | 4 +- frontend/src/types.ts | 4 ++ 11 files changed, 221 insertions(+), 2 deletions(-) create mode 100644 frontend/src/scenes/onboarding/sdks/logos/helicone.svg create mode 100644 frontend/src/scenes/onboarding/sdks/logos/langfuse.svg create mode 100644 frontend/src/scenes/onboarding/sdks/logos/traceloop.svg create mode 100644 frontend/src/scenes/onboarding/sdks/product-analytics/helicone.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/product-analytics/langfuse.tsx create mode 100644 frontend/src/scenes/onboarding/sdks/product-analytics/traceloop.tsx diff --git a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx index c9a6a88c5b3cc..099383964ce4d 100644 --- a/frontend/src/scenes/onboarding/sdks/allSDKs.tsx +++ b/frontend/src/scenes/onboarding/sdks/allSDKs.tsx @@ -100,6 +100,13 @@ export const allSDKs: SDK[] = [ image: require('./logos/go.svg'), docsLink: 'https://posthog.com/docs/libraries/go', }, + { + name: 'Helicone', + key: SDKKey.HELICONE, + tags: [SDKTag.LLM], + image: require('./logos/helicone.svg'), + docsLink: 'https://posthog.com/docs/ai-engineering/helicone-posthog', + }, { name: 'iOS', key: SDKKey.IOS, @@ -114,6 +121,13 @@ export const allSDKs: SDK[] = [ image: require('./logos/java.svg'), docsLink: 'https://posthog.com/docs/libraries/java', }, + { + name: 'Langfuse', + key: SDKKey.LANGFUSE, + tags: [SDKTag.LLM], + image: require('./logos/langfuse.svg'), + docsLink: 'https://posthog.com/docs/ai-engineering/langfuse-posthog', + }, { name: 'Laravel', key: SDKKey.LARAVEL, @@ -201,6 +215,13 @@ export const allSDKs: SDK[] = [ image: require('./logos/svelte.svg'), docsLink: 'https://posthog.com/docs/libraries/svelte', }, + { + name: 'Traceloop', + key: SDKKey.TRACELOOP, + tags: [SDKTag.LLM], + image: require('./logos/traceloop.svg'), + docsLink: 'https://posthog.com/docs/ai-engineering/traceloop-posthog', + }, { name: 'Vue.js', key: SDKKey.VUE_JS, diff --git a/frontend/src/scenes/onboarding/sdks/logos/helicone.svg b/frontend/src/scenes/onboarding/sdks/logos/helicone.svg new file mode 100644 index 0000000000000..c2f5f19dd7487 --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/logos/helicone.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/frontend/src/scenes/onboarding/sdks/logos/langfuse.svg b/frontend/src/scenes/onboarding/sdks/logos/langfuse.svg new file mode 100644 index 0000000000000..eb38976cf6975 --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/logos/langfuse.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/frontend/src/scenes/onboarding/sdks/logos/traceloop.svg b/frontend/src/scenes/onboarding/sdks/logos/traceloop.svg new file mode 100644 index 0000000000000..8059c33709a0d --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/logos/traceloop.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx index d435dc8bfa3ad..84bcb31a88446 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/ProductAnalyticsSDKInstructions.tsx @@ -13,7 +13,9 @@ import { ProductAnalyticsFlutterInstructions, ProductAnalyticsFramerInstructions, ProductAnalyticsGoInstructions, + ProductAnalyticsHeliconeInstructions, ProductAnalyticsIOSInstructions, + ProductAnalyticsLangfuseInstructions, ProductAnalyticsLaravelInstructions, ProductAnalyticsNextJSInstructions, ProductAnalyticsNodeInstructions, @@ -24,6 +26,7 @@ import { ProductAnalyticsRNInstructions, ProductAnalyticsRubyInstructions, ProductAnalyticsSvelteJSInstructions, + ProductAnalyticsTraceloopInstructions, ProductAnalyticsVueInstructions, ProductAnalyticsWebflowInstructions, } from '.' @@ -40,8 +43,10 @@ export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = { [SDKKey.FLUTTER]: ProductAnalyticsFlutterInstructions, [SDKKey.FRAMER]: ProductAnalyticsFramerInstructions, [SDKKey.GO]: ProductAnalyticsGoInstructions, + [SDKKey.HELICONE]: ProductAnalyticsHeliconeInstructions, [SDKKey.HTML_SNIPPET]: HTMLSnippetInstructions, [SDKKey.IOS]: ProductAnalyticsIOSInstructions, + [SDKKey.LANGFUSE]: ProductAnalyticsLangfuseInstructions, [SDKKey.LARAVEL]: ProductAnalyticsLaravelInstructions, [SDKKey.NEXT_JS]: ProductAnalyticsNextJSInstructions, [SDKKey.NODE_JS]: ProductAnalyticsNodeInstructions, @@ -52,6 +57,7 @@ export const ProductAnalyticsSDKInstructions: SDKInstructionsMap = { [SDKKey.REMIX]: ProductAnalyticsRemixJSInstructions, [SDKKey.RUBY]: ProductAnalyticsRubyInstructions, [SDKKey.SVELTE]: ProductAnalyticsSvelteJSInstructions, + [SDKKey.TRACELOOP]: ProductAnalyticsTraceloopInstructions, [SDKKey.VUE_JS]: ProductAnalyticsVueInstructions, [SDKKey.WEBFLOW]: ProductAnalyticsWebflowInstructions, } diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/helicone.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/helicone.tsx new file mode 100644 index 0000000000000..5f09774f3d562 --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/helicone.tsx @@ -0,0 +1,58 @@ +import { Link } from '@posthog/lemon-ui' +import { useValues } from 'kea' +import { CodeSnippet, Language } from 'lib/components/CodeSnippet' +import { apiHostOrigin } from 'lib/utils/apiHost' +import { teamLogic } from 'scenes/teamLogic' + +export function ProductAnalyticsHeliconeInstructions(): JSX.Element { + const { currentTeam } = useValues(teamLogic) + + return ( + <> +

Install

+

+ + Helicone + {' '} + supports most popular LLM models and you can bring your Helicone data into PostHog for analysis. To get + started: +

+
    +
  1. + Sign up to{' '} + + Helicone + {' '} + and add it to your LLM app. +
    2. +
  2. + Similar to how you add a{' '} + + Helicone-Auth header + {' '} + when installing Helicone, add two new headers + Helicone-Posthog-Key and Helicone-Posthog-Host with your PostHog + details: + + {`# Example for adding it to OpenAI in Python + +client = OpenAI( +api_key="your-api-key-here", # Replace with your OpenAI API key +base_url="https://oai.hconeai.com/v1", # Set the API endpoint +default_headers= { + "Helicone-Auth": f"Bearer {HELICONE_API_KEY}", + "Helicone-Posthog-Key": "${currentTeam?.api_token}}", + "Helicone-Posthog-Host": "${apiHostOrigin()}", + } +) + `} + +
    3. +
+

Helicone events will now be exported into PostHog as soon as they're available.

+ + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx index bf5c8678d04a1..5f05ae88b0ee7 100644 --- a/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/index.tsx @@ -8,9 +8,11 @@ export * from './elixir' export * from './flutter' export * from './framer' export * from './go' +export * from './helicone' export * from './html-snippet' export * from './ios' export * from './js-web' +export * from './langfuse' export * from './laravel' export * from './next-js' export * from './nodejs' @@ -21,5 +23,6 @@ export * from './react-native' export * from './remix' export * from './ruby' export * from './svelte' +export * from './traceloop' export * from './vue' export * from './webflow' diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/langfuse.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/langfuse.tsx new file mode 100644 index 0000000000000..bf137f99af131 --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/langfuse.tsx @@ -0,0 +1,54 @@ +import { Link } from '@posthog/lemon-ui' +import { useValues } from 'kea' +import { CodeSnippet, Language } from 'lib/components/CodeSnippet' +import { apiHostOrigin } from 'lib/utils/apiHost' +import { teamLogic } from 'scenes/teamLogic' + +export function ProductAnalyticsLangfuseInstructions(): JSX.Element { + const { currentTeam } = useValues(teamLogic) + + return ( + <> +

Install

+

+ + Langfuse + {' '} + supports most popular LLM models and you can bring your Langfuse data into PostHog for analysis. To get + started: +

+
    +
  1. + First add{' '} + + Langfuse Tracing + {' '} + to your LLM app. +
    2. +
  2. + In your{' '} + + Langfuse dashboard + + , click on Settings and scroll down to the Integrations section to + find the PostHog integration. +
    3. +
  3. + Click Configure and paste in your PostHog project API key: + {currentTeam?.api_token} +
    4. +
  4. + Paste in your PostHog host: + {apiHostOrigin()} +
    5. +
  5. + Click Enable and then Save. +
    6. +
+

+ Langfuse will now begin exporting your data into PostHog. Note that Langfuse batch exports your data + into PostHog once a day, so it can take up to 24 hours for your Langfuse data to appear in PostHog. +

+ + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/product-analytics/traceloop.tsx b/frontend/src/scenes/onboarding/sdks/product-analytics/traceloop.tsx new file mode 100644 index 0000000000000..9d4498d460ff4 --- /dev/null +++ b/frontend/src/scenes/onboarding/sdks/product-analytics/traceloop.tsx @@ -0,0 +1,43 @@ +import { Link } from '@posthog/lemon-ui' +import { useValues } from 'kea' +import { CodeSnippet, Language } from 'lib/components/CodeSnippet' +import { apiHostOrigin } from 'lib/utils/apiHost' +import { teamLogic } from 'scenes/teamLogic' + +export function ProductAnalyticsTraceloopInstructions(): JSX.Element { + const { currentTeam } = useValues(teamLogic) + + return ( + <> +

Install

+

+ + Traceloop + {' '} + supports most popular LLM models and you can bring your Traceloop data into PostHog for analysis. To get + started: +

+
    +
  1. + Go to the{' '} + + integrations page + {' '} + in your Traceloop dashboard and click on the PostHog card. +
    2. +
  2. + Paste in your PostHog project API key: + {currentTeam?.api_token} +
    3. +
  3. + Paste in your PostHog host: + {apiHostOrigin()} +
    4. +
  4. + Select the environment you want to connect to PostHog and click Enable +
    5. +
+

Traceloop events will now be exported into PostHog as soon as they're available.

+ + ) +} diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/html-snippet.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/html-snippet.tsx index b816f27be392c..8e50d7fc8269e 100644 --- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/html-snippet.tsx +++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/html-snippet.tsx @@ -5,8 +5,8 @@ export function SDKHtmlSnippetInstructions(): JSX.Element { <>

Install

- Just add this snippet to your website within the <head> tag and you'll be ready to - start using PostHog. This can also be used in services like Google Tag Manager. + Add this snippet to your website within the <head> tag and you'll be ready to start + using PostHog. This can also be used in services like Google Tag Manager.

diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 31a685da19cbe..94eabf1b7ba59 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -4102,11 +4102,13 @@ export enum SDKKey { GATSBY = 'gatsby', GO = 'go', GOOGLE_TAG_MANAGER = 'google_tag_manager', + HELICONE = 'helicone', HTML_SNIPPET = 'html', IOS = 'ios', JAVA = 'java', JS_WEB = 'javascript_web', LARAVEL = 'laravel', + LANGFUSE = 'langfuse', NEXT_JS = 'nextjs', NODE_JS = 'nodejs', NUXT_JS = 'nuxtjs', @@ -4123,6 +4125,7 @@ export enum SDKKey { SENTRY = 'sentry', SHOPIFY = 'shopify', SVELTE = 'svelte', + TRACELOOP = 'traceloop', VUE_JS = 'vuejs', WEBFLOW = 'webflow', WORDPRESS = 'wordpress', @@ -4134,6 +4137,7 @@ export enum SDKTag { SERVER = 'Server', INTEGRATION = 'Integration', RECOMMENDED = 'Recommended', + LLM = 'LLM', OTHER = 'Other', }