phoenix-integration-snippets

Add an implementation function in js/app/src/components/project/integrationSnippets/ following existing conventions, then register it in the ONBOARDING_INTEGRATIONS list in integrationRegistry.tsx. Test the snippet verbatim against Phoenix first and verify all docsHref and githubHref URLs return HTTP 200.

Use register() with auto_instrument=True and place SDK imports after the register() call. Order packages as phoenix-otel first, then the instrumentation package, then the SDK, and include any separately required model provider SDK explicitly.

Verbatim exporters like @mastra/arize's ArizeExporter or a bare OTLPTraceExporter must receive the full OTLP URL built from PHOENIX_COLLECTOR_ENDPOINT with /v1/traces appended. register()-based snippets read the environment variable themselves and need no endpoint.

Missing traces usually come from omitting the OTLP endpoint on verbatim exporters, cross-contamination from other instrumentors in a shared environment, or reusing an existing Phoenix project that masks failures. Test in a fresh environment with only the snippet's packages and a fresh project name.

The Skill supports Python and TypeScript snippet generation. TypeScript snippets use ESM imports where ordering does not matter, but short-lived scripts require await provider.forceFlush() to ensure spans are exported before exit.