Generates onboarding code snippets for Phoenix tracing integrations and wires them into the project onboarding UI. Produces install dependencies and implementation sections for SDKs like OpenAI, LangChain, Vercel AI SDK, and others. Supports Python and TypeScript. Use when asked to create onboarding code, tracing setup snippets, quickstart examples, or getting-started code for a framework integration.
74
92%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Low
Low-risk findings worth noting
Generate onboarding snippets (install + implementation) for Phoenix tracing integrations and add them to the project onboarding UI.
Copy this checklist and track progress:
- [ ] 1. Research: read integration docs and OpenInference repo
- [ ] 2. Determine language support (Python, TypeScript, or both)
- [ ] 3. Generate snippets following the format below
- [ ] 4. Test every language variant against Phoenix
- [ ] 5. Wire into the onboarding UI
- [ ] 6. Report results with links to trace pagesStep 1: Research. Read the relevant file in docs/phoenix/integrations/ for the framework. Also check the OpenInference repo for example code: https://github.com/Arize-ai/openinference
Step 4: Test. See Testing below. Only proceed to wiring into the UI when traces are confirmed.
Step 5: Wire into the onboarding UI. After adding docsHref and githubHref, verify every URL returns HTTP 200 before committing. For GitHub links, prefer the OpenInference repo (https://github.com/Arize-ai/openinference/tree/main/...).
Step 6: Report. Provide clickable links to the Phoenix project pages (e.g., http://localhost:6006/projects/<base64-id>/traces).
Each snippet has two parts:
Packages: Array of package names. Order: phoenix-otel first, then instrumentation package, then SDK.
Do not assume the framework package bundles its model provider SDK. In a clean env, verify the exact imports used by the snippet; if the framework's OpenAI/Gemini/etc. adapter requires a separate SDK package, include it explicitly in packages.
Implementation: Working, copy-pasteable code that produces at least one trace. 10-20 lines, meaningful example prompt, no print/log statements.
Directory: js/app/src/components/project/integrationSnippets/ — read existing files to match conventions.
Whether a snippet passes an endpoint depends on what consumes it. Either way the value comes from PHOENIX_COLLECTOR_ENDPOINT, which the onboarding UI displays alongside the snippet.
register()-based snippets — do NOT pass endpoint/url. Both register functions read PHOENIX_COLLECTOR_ENDPOINT and derive the OTLP target from it.
Verbatim exporters — anything that POSTs to exactly the URL it is handed, such as @mastra/arize's ArizeExporter or a bare OTLPTraceExporter, MUST receive the full OTLP URL explicitly, built from the same variable:
endpoint: `${process.env.PHOENIX_COLLECTOR_ENDPOINT ?? "http://localhost:6006"}/v1/traces`,These exporters do not read the environment and do not append the OTLP path. Omitting the endpoint or passing a bare base URL loses every span, with no error.
Python: Use auto_instrument=True — no manual instrumentor calls. SDK imports must come after register().
Exception: if the framework emits native OpenTelemetry spans and uses a mutating span processor, start with register(...) so Phoenix becomes the global provider the framework will use. Then add the mutating processor so it replaces Phoenix's default processor, and add the Phoenix exporter back after it.
TypeScript: ESM imports are hoisted so import ordering doesn't matter. await provider.forceFlush() is required in short-lived scripts.
File: js/app/src/pages/project/integrationRegistry.tsx
Import your function and add an entry to ONBOARDING_INTEGRATIONS. Pass snippet functions as direct references (they match the getImplementationCode type in integrationDefinitions.ts).
Test snippets as written — the exact code the user will see in the onboarding UI. If any modification is required to make a snippet work, that is a bug.
Create a fresh environment per integration with only the packages from that snippet's packages array. This prevents false positives from cross-contamination (e.g., an installed openinference-instrumentation-openai producing extra traces when testing a LangChain snippet).
Set PHOENIX_COLLECTOR_ENDPOINT and run the snippet code verbatim.
Use a fresh Phoenix project name per test run. Reusing an existing project can mask failures by making old traces look like the new snippet worked.
For each snippet, verify:
405, no Failed to export span batch)chain spans, not just bare llm spans)If you must modify the snippet code to get traces flowing, do not silently work around it and continue. Instead:
e127482
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.