Skip to content

Commit 2239b61

Browse files
gewenyu99gewenyu99
authored
fix: Snippets for notable generation (#42625)
1 parent 2f80fb4 commit 2239b61

File tree

10 files changed

+63
-147
lines changed

10 files changed

+63
-147
lines changed

‎docs/onboarding/llm-analytics/_snippets/notable-generation-properties.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { useMDXComponents } from 'scenes/onboarding/OnboardingDocsContentWrapper'
2+
3+
export const NotableGenerationProperties = (): JSX.Element => {
4+
const { Markdown, dedent } = useMDXComponents()
5+
6+
return (
7+
<>
8+
<Markdown>
9+
{dedent`
10+
| Property | Description |
11+
|---------- | -------------|
12+
| \`$ai_model\` | The specific model, like \`gpt-5-mini\` or \`claude-4-sonnet\` |
13+
| \`$ai_latency\` | The latency of the LLM call in seconds |
14+
| \`$ai_tools\` | Tools and functions available to the LLM |
15+
| \`$ai_input\` | List of messages sent to the LLM |
16+
| \`$ai_input_tokens\` | The number of tokens in the input (often found in response.usage) |
17+
| \`$ai_output_choices\` | List of response choices from the LLM |
18+
| \`$ai_output_tokens\` | The number of tokens in the output (often found in \`response.usage\`) |
19+
| \`$ai_total_cost_usd\` | The total cost in USD (input + output) |
20+
| [[...]](https://posthog.com/docs/llm-analytics/generations#event-properties) | See [full list](https://posthog.com/docs/llm-analytics/generations#event-properties) of properties|
21+
`}
22+
</Markdown>
23+
</>
24+
)
25+
}
26+

‎docs/onboarding/llm-analytics/anthropic.tsx‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -198,25 +198,7 @@ export const AnthropicInstallation = (): JSX.Element => {
198198
`}
199199
</Markdown>
200200

201-
{NotableGenerationProperties ? (
202-
<NotableGenerationProperties />
203-
) : (
204-
<Markdown>
205-
{dedent`
206-
| Property | Description |
207-
|---------- | -------------|
208-
| \`$ai_model\` | The specific model, like \`gpt-5-mini\` or \`claude-4-sonnet\` |
209-
| \`$ai_latency\` | The latency of the LLM call in seconds |
210-
| \`$ai_tools\` | Tools and functions available to the LLM |
211-
| \`$ai_input\` | List of messages sent to the LLM |
212-
| \`$ai_input_tokens\` | The number of tokens in the input (often found in response.usage) |
213-
| \`$ai_output_choices\` | List of response choices from the LLM |
214-
| \`$ai_output_tokens\` | The number of tokens in the output (often found in \`response.usage\`) |
215-
| \`$ai_total_cost_usd\` | The total cost in USD (input + output) |
216-
| [[...]](https://posthog.com/docs/llm-analytics/generations#event-properties) | See [full list](https://posthog.com/docs/llm-analytics/generations#event-properties) of properties|
217-
`}
218-
</Markdown>
219-
)}
201+
{NotableGenerationProperties && <NotableGenerationProperties />}
220202
</Step>
221203

222204
<Step

‎docs/onboarding/llm-analytics/google.tsx‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -259,25 +259,7 @@ export const GoogleInstallation = (): JSX.Element => {
259259
`}
260260
</Markdown>
261261

262-
{NotableGenerationProperties ? (
263-
<NotableGenerationProperties />
264-
) : (
265-
<Markdown>
266-
{dedent`
267-
| Property | Description |
268-
|---------- | -------------|
269-
| \`$ai_model\` | The specific model, like \`gpt-5-mini\` or \`claude-4-sonnet\` |
270-
| \`$ai_latency\` | The latency of the LLM call in seconds |
271-
| \`$ai_tools\` | Tools and functions available to the LLM |
272-
| \`$ai_input\` | List of messages sent to the LLM |
273-
| \`$ai_input_tokens\` | The number of tokens in the input (often found in response.usage) |
274-
| \`$ai_output_choices\` | List of response choices from the LLM |
275-
| \`$ai_output_tokens\` | The number of tokens in the output (often found in \`response.usage\`) |
276-
| \`$ai_total_cost_usd\` | The total cost in USD (input + output) |
277-
| [[...]](https://posthog.com/docs/llm-analytics/generations#event-properties) | See [full list](https://posthog.com/docs/llm-analytics/generations#event-properties) of properties|
278-
`}
279-
</Markdown>
280-
)}
262+
{NotableGenerationProperties && <NotableGenerationProperties />}
281263
</Step>
282264

283265
<Step checkpoint title="Verify traces and generations" subtitle="Confirm LLM events are being sent to PostHog" docsOnly>

‎docs/onboarding/llm-analytics/langchain.tsx‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -204,25 +204,7 @@ export const LangChainInstallation = (): JSX.Element => {
204204
PostHog automatically captures an `$ai_generation` event along with these properties:
205205
</Markdown>
206206

207-
{NotableGenerationProperties ? (
208-
<NotableGenerationProperties />
209-
) : (
210-
<Markdown>
211-
{dedent`
212-
| Property | Description |
213-
|---------- | -------------|
214-
| \`$ai_model\` | The specific model, like \`gpt-5-mini\` or \`claude-4-sonnet\` |
215-
| \`$ai_latency\` | The latency of the LLM call in seconds |
216-
| \`$ai_tools\` | Tools and functions available to the LLM |
217-
| \`$ai_input\` | List of messages sent to the LLM |
218-
| \`$ai_input_tokens\` | The number of tokens in the input (often found in response.usage) |
219-
| \`$ai_output_choices\` | List of response choices from the LLM |
220-
| \`$ai_output_tokens\` | The number of tokens in the output (often found in \`response.usage\`) |
221-
| \`$ai_total_cost_usd\` | The total cost in USD (input + output) |
222-
| [[...]](https://posthog.com/docs/llm-analytics/generations#event-properties) | See [full list](https://posthog.com/docs/llm-analytics/generations#event-properties) of properties|
223-
`}
224-
</Markdown>
225-
)}
207+
{NotableGenerationProperties && <NotableGenerationProperties />}
226208

227209
<Markdown>
228210
It also automatically creates a trace hierarchy based on how LangChain components are nested.

‎docs/onboarding/llm-analytics/litellm.tsx‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -159,25 +159,7 @@ export const LiteLLMInstallation = (): JSX.Element => {
159159
`}
160160
</Markdown>
161161

162-
{NotableGenerationProperties ? (
163-
<NotableGenerationProperties />
164-
) : (
165-
<Markdown>
166-
{dedent`
167-
| Property | Description |
168-
|---------- | -------------|
169-
| \`$ai_model\` | The specific model, like \`gpt-5-mini\` or \`claude-4-sonnet\` |
170-
| \`$ai_latency\` | The latency of the LLM call in seconds |
171-
| \`$ai_tools\` | Tools and functions available to the LLM |
172-
| \`$ai_input\` | List of messages sent to the LLM |
173-
| \`$ai_input_tokens\` | The number of tokens in the input (often found in response.usage) |
174-
| \`$ai_output_choices\` | List of response choices from the LLM |
175-
| \`$ai_output_tokens\` | The number of tokens in the output (often found in \`response.usage\`) |
176-
| \`$ai_total_cost_usd\` | The total cost in USD (input + output) |
177-
| [[...]](https://posthog.com/docs/llm-analytics/generations#event-properties) | See [full list](https://posthog.com/docs/llm-analytics/generations#event-properties) of properties|
178-
`}
179-
</Markdown>
180-
)}
162+
{NotableGenerationProperties && <NotableGenerationProperties />}
181163
</Step>
182164

183165
<Step

‎docs/onboarding/llm-analytics/openai.tsx‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { useMDXComponents } from 'scenes/onboarding/OnboardingDocsContentWrapper'
22

33
export const OpenAIInstallation = (): JSX.Element => {
4-
const { Steps, Step, CodeBlock, CalloutBox, ProductScreenshot, OSButton, Markdown, Blockquote, dedent } =
4+
const { Steps, Step, CodeBlock, CalloutBox, ProductScreenshot, OSButton, Markdown, Blockquote, dedent, snippets } =
55
useMDXComponents()
6+
7+
const NotableGenerationProperties = snippets?.NotableGenerationProperties
8+
69
return (
710
<Steps>
811
<Step title="Install the PostHog SDK" badge="required">
@@ -187,20 +190,10 @@ export const OpenAIInstallation = (): JSX.Element => {
187190
<Markdown>
188191
{dedent`
189192
You can expect captured \`$ai_generation\` events to have the following properties:
190-
191-
| Property | Description |
192-
|----------|-------------|
193-
| \`$ai_model\` | The specific model, like \`gpt-5-mini\` or \`claude-4-sonnet\` |
194-
| \`$ai_latency\` | The latency of the LLM call in seconds |
195-
| \`$ai_tools\` | Tools and functions available to the LLM |
196-
| \`$ai_input\` | List of messages sent to the LLM |
197-
| \`$ai_input_tokens\` | The number of tokens in the input (often found in response.usage) |
198-
| \`$ai_output_choices\` | List of response choices from the LLM |
199-
| \`$ai_output_tokens\` | The number of tokens in the output (often found in \`response.usage\`) |
200-
| \`$ai_total_cost_usd\` | The total cost in USD (input + output) |
201-
| [[...]](https://posthog.com/docs/llm-analytics/generations#event-properties) | See [full list](https://posthog.com/docs/llm-analytics/generations#event-properties) of properties |
202193
`}
203194
</Markdown>
195+
196+
{NotableGenerationProperties && <NotableGenerationProperties />}
204197
</Step>
205198

206199
<Step

‎docs/onboarding/llm-analytics/openrouter.tsx‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -193,25 +193,7 @@ export const OpenRouterInstallation = (): JSX.Element => {
193193
`}
194194
</Markdown>
195195

196-
{NotableGenerationProperties ? (
197-
<NotableGenerationProperties />
198-
) : (
199-
<Markdown>
200-
{dedent`
201-
| Property | Description |
202-
|---------- | -------------|
203-
| \`$ai_model\` | The specific model, like \`gpt-5-mini\` or \`claude-4-sonnet\` |
204-
| \`$ai_latency\` | The latency of the LLM call in seconds |
205-
| \`$ai_tools\` | Tools and functions available to the LLM |
206-
| \`$ai_input\` | List of messages sent to the LLM |
207-
| \`$ai_input_tokens\` | The number of tokens in the input (often found in response.usage) |
208-
| \`$ai_output_choices\` | List of response choices from the LLM |
209-
| \`$ai_output_tokens\` | The number of tokens in the output (often found in \`response.usage\`) |
210-
| \`$ai_total_cost_usd\` | The total cost in USD (input + output) |
211-
| [[...]](https://posthog.com/docs/llm-analytics/generations#event-properties) | See [full list](https://posthog.com/docs/llm-analytics/generations#event-properties) of properties|
212-
`}
213-
</Markdown>
214-
)}
196+
{NotableGenerationProperties && <NotableGenerationProperties />}
215197
</Step>
216198

217199
<Step

‎docs/onboarding/llm-analytics/vercel-ai.tsx‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -123,25 +123,7 @@ export const VercelAIInstallation = (): JSX.Element => {
123123
`}
124124
</Markdown>
125125

126-
{NotableGenerationProperties ? (
127-
<NotableGenerationProperties />
128-
) : (
129-
<Markdown>
130-
{dedent`
131-
| Property | Description |
132-
|---------- | -------------|
133-
| \`$ai_model\` | The specific model, like \`gpt-5-mini\` or \`claude-4-sonnet\` |
134-
| \`$ai_latency\` | The latency of the LLM call in seconds |
135-
| \`$ai_tools\` | Tools and functions available to the LLM |
136-
| \`$ai_input\` | List of messages sent to the LLM |
137-
| \`$ai_input_tokens\` | The number of tokens in the input (often found in response.usage) |
138-
| \`$ai_output_choices\` | List of response choices from the LLM |
139-
| \`$ai_output_tokens\` | The number of tokens in the output (often found in \`response.usage\`) |
140-
| \`$ai_total_cost_usd\` | The total cost in USD (input + output) |
141-
| [[...]](https://posthog.com/docs/llm-analytics/generations#event-properties) | See [full list](https://posthog.com/docs/llm-analytics/generations#event-properties) of properties|
142-
`}
143-
</Markdown>
144-
)}
126+
{NotableGenerationProperties && <NotableGenerationProperties />}
145127
</Step>
146128

147129
<Step checkpoint title="Verify traces and generations" subtitle="Confirm LLM events are being sent to PostHog" docsOnly>

‎frontend/src/scenes/onboarding/OnboardingDocsContentWrapper.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -58,21 +58,25 @@ interface OnboardingComponents {
5858
const OnboardingContext = createContext<OnboardingComponents | null>(null)
5959

6060
function Steps({ children }: { children: ReactNode }): JSX.Element {
61-
const validSteps = Children.toArray(children).filter((child) => {
61+
let stepNumber = 0
62+
63+
const processedChildren = Children.map(children, (child) => {
6264
if (!isValidElement(child)) {
63-
return false
65+
return child
6466
}
65-
return !child.props.docsOnly
66-
})
6767

68-
const numberedSteps = validSteps.map((step, index) => {
69-
if (isValidElement(step)) {
70-
return React.cloneElement(step, { stepNumber: index + 1 } as any)
68+
// Only number Step components - check if it's actually a Step component
69+
const isStep = child.type === Step && 'title' in child.props && typeof child.props.title === 'string'
70+
71+
if (isStep && !child.props.docsOnly) {
72+
stepNumber += 1
73+
return React.cloneElement(child, { stepNumber } as any)
7174
}
72-
return step
75+
76+
return child
7377
})
7478

75-
return <div className="space-y-6">{numberedSteps}</div>
79+
return <div className="space-y-6">{processedChildren}</div>
7680
}
7781

7882
function Step({

‎frontend/src/scenes/onboarding/sdks/llm-analytics/LLMAnalyticsSDKInstructions.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { EmbeddingEvent } from '@posthog/shared-onboarding/llm-analytics/_snippets/embedding-event'
22
import { GenerationEvent } from '@posthog/shared-onboarding/llm-analytics/_snippets/generation-event'
3+
import { NotableGenerationProperties } from '@posthog/shared-onboarding/llm-analytics/_snippets/notable-generation-properties'
34
import { SpanEvent } from '@posthog/shared-onboarding/llm-analytics/_snippets/span-event'
45
import { TraceEvent } from '@posthog/shared-onboarding/llm-analytics/_snippets/trace-event'
56
import { AnthropicInstallation } from '@posthog/shared-onboarding/llm-analytics/anthropic'
@@ -30,57 +31,57 @@ function LLMManualInstructions(): JSX.Element {
3031
)
3132
}
3233

33-
function LLMOpenAIInstructions(): JSX.Element {
34+
function LLMAnthropicInstructions(): JSX.Element {
3435
return (
35-
<OnboardingDocsContentWrapper>
36-
<OpenAIInstallation />
36+
<OnboardingDocsContentWrapper snippets={{ NotableGenerationProperties }}>
37+
<AnthropicInstallation />
3738
</OnboardingDocsContentWrapper>
3839
)
3940
}
4041

41-
function LLMAnthropicInstructions(): JSX.Element {
42+
function LLMOpenAIInstructions(): JSX.Element {
4243
return (
43-
<OnboardingDocsContentWrapper>
44-
<AnthropicInstallation />
44+
<OnboardingDocsContentWrapper snippets={{ NotableGenerationProperties }}>
45+
<OpenAIInstallation />
4546
</OnboardingDocsContentWrapper>
4647
)
4748
}
4849

4950
function LLMGoogleInstructions(): JSX.Element {
5051
return (
51-
<OnboardingDocsContentWrapper>
52+
<OnboardingDocsContentWrapper snippets={{ NotableGenerationProperties }}>
5253
<GoogleInstallation />
5354
</OnboardingDocsContentWrapper>
5455
)
5556
}
5657

5758
function LLMOpenRouterInstructions(): JSX.Element {
5859
return (
59-
<OnboardingDocsContentWrapper>
60+
<OnboardingDocsContentWrapper snippets={{ NotableGenerationProperties }}>
6061
<OpenRouterInstallation />
6162
</OnboardingDocsContentWrapper>
6263
)
6364
}
6465

6566
function LLMLangChainInstructions(): JSX.Element {
6667
return (
67-
<OnboardingDocsContentWrapper>
68+
<OnboardingDocsContentWrapper snippets={{ NotableGenerationProperties }}>
6869
<LangChainInstallation />
6970
</OnboardingDocsContentWrapper>
7071
)
7172
}
7273

7374
function LLMLiteLLMInstructions(): JSX.Element {
7475
return (
75-
<OnboardingDocsContentWrapper>
76+
<OnboardingDocsContentWrapper snippets={{ NotableGenerationProperties }}>
7677
<LiteLLMInstallation />
7778
</OnboardingDocsContentWrapper>
7879
)
7980
}
8081

8182
function LLMVercelAIInstructions(): JSX.Element {
8283
return (
83-
<OnboardingDocsContentWrapper>
84+
<OnboardingDocsContentWrapper snippets={{ NotableGenerationProperties }}>
8485
<VercelAIInstallation />
8586
</OnboardingDocsContentWrapper>
8687
)

0 commit comments

Comments
 (0)