Docs: Anthropic TypeScript observability (#10584)

Author: ivanagas

contents/docs/ai-engineering/_snippets/anthropic.mdx

@@ -1,12 +1,22 @@
-Start by installing the Anthropic Python SDK:
+Start by installing the Anthropic SDK:
 
-```bash
+<MultiLanguage>
+
+```bash file=Python
 pip install anthropic
 ```
 
+```bash file=TypeScript
+npm install @anthropic-ai/sdk
+```
+
+</MultiLanguage>
+
 In the spot where you initialize the Anthropic SDK, import PostHog and our Anthropic wrapper, initialize PostHog with your project API key and host (from [your project settings](https://us.posthog.com/settings/project)), and pass it to our Anthropic wrapper.
 
-```python
+<MultiLanguage>
+
+```python 
 from posthog.ai.anthropic import Anthropic
 import posthog
 
@@ -19,11 +29,30 @@ client = Anthropic(
 )
 ``` 
 
+```typescript
+import { Anthropic } from '@posthog/ai'
+import { PostHog } from 'posthog-node'
+
+const phClient = new PostHog(
+  '<ph_project_api_key>',
+  { host: '<ph_client_api_host>' }
+)
+
+const client = new Anthropic({
+  apiKey: 'sk-ant-api...', // Replace with your Anthropic API key
+  posthog: phClient
+})
+```
+
+</MultiLanguage>
+
 > **Note:** This also works with the `AsyncAnthropic` client as well as `AnthropicBedrock`, `AnthropicVertex`, and the async versions of those.
 
 Now, when you use the Anthropic SDK, it automatically captures many properties into PostHog including `$ai_input`, `$ai_input_tokens`, `$ai_latency`, `$ai_model`, `$ai_model_parameters`, `$ai_output_choices`, and `$ai_output_tokens`.
 
-You can also capture additional properties like `posthog_distinct_id`, `posthog_trace_id`, `posthog_properties`, `posthog_groups`, and `posthog_privacy_mode`.
+You can also capture or modify additional properties with the distinct ID, trace ID, properties, groups, and privacy mode parameters.
+
+<MultiLanguage>
 
 ```python
 response = client.messages.create(
@@ -44,6 +73,28 @@ response = client.messages.create(
 print(response.content[0].text)
 ```
 
+```typescript
+const response = await client.messages.create({
+  model: "claude-3-5-sonnet-latest",
+  messages: [
+    {
+      role: "user",
+      content: "Tell me a fun fact about hedgehogs"
+    }
+  ],
+  posthogDistinctId: "user_123", // optional
+  posthogTraceId: "trace_123", // optional
+  posthogProperties: { conversationId: "abc123", paid: true }, // optional
+  posthogGroups: { company: "company_id_in_your_db" }, // optional
+  posthogPrivacyMode: false // optional
+})
+
+console.log(response.content[0].text)
+phClient.shutdown() 
+```
+
+</MultiLanguage>
+
 > **Notes:** 
 > - This also works when message streams are used (e.g. `stream=True` or `client.messages.stream(...)`).
 > - If you want to capture LLM events anonymously, **don't** pass a distinct ID to the request. See our docs on [anonymous vs identified events](/docs/data/anonymous-vs-identified-events) to learn more.