diff --git a/components-mdx/get-started/agent-prompt-observability.mdx b/components-mdx/get-started/agent-prompt-observability.mdx new file mode 100644 index 000000000..f4546d4b9 --- /dev/null +++ b/components-mdx/get-started/agent-prompt-observability.mdx @@ -0,0 +1,6 @@ +```txt +Please follow the instructions on this page to set up tracing for my project: +https://langfuse.com/docs/observability/get-started.md + +Leveraging the Langfuse skill https://github.com/langfuse/skills +``` diff --git a/components-mdx/get-started/agent-prompt-prompt-management.mdx b/components-mdx/get-started/agent-prompt-prompt-management.mdx new file mode 100644 index 000000000..00dcfabf6 --- /dev/null +++ b/components-mdx/get-started/agent-prompt-prompt-management.mdx @@ -0,0 +1,6 @@ +```txt +Please follow the instructions on this page to set up prompt management for my project: +https://langfuse.com/docs/prompt-management/get-started.md + +Leveraging the Langfuse skill https://github.com/langfuse/skills +``` diff --git a/components-mdx/get-started/agent-prompt-text.tsx b/components-mdx/get-started/agent-prompt-text.tsx new file mode 100644 index 000000000..66f3f04f1 --- /dev/null +++ b/components-mdx/get-started/agent-prompt-text.tsx @@ -0,0 +1,18 @@ +export function getAgentPromptText(topic: string | undefined): string { + switch (topic) { + case "observability": + return `Please follow the instructions on this page to set up tracing for my project: +https://langfuse.com/docs/observability/get-started.md + +Leveraging the Langfuse skill https://github.com/langfuse/skills`.trim(); + case "prompt-management": + return `Please follow the instructions on this page to set up prompt management for my project: +https://langfuse.com/docs/prompt-management/get-started.md + +Leveraging the Langfuse skill https://github.com/langfuse/skills`.trim(); + case "evals": + return ""; + default: + return ""; + } +} diff --git a/components-mdx/get-started/auto-install.mdx b/components-mdx/get-started/auto-install.mdx index e21b6b03b..bfe1a87c8 100644 --- a/components-mdx/get-started/auto-install.mdx +++ b/components-mdx/get-started/auto-install.mdx @@ -1,15 +1,31 @@ import { Button } from "@/components/ui/button"; import { Link } from "@/components/ui/link"; +import AgentPromptObservability from "@/components-mdx/get-started/agent-prompt-observability.mdx"; +import AgentPromptPromptManagement from "@/components-mdx/get-started/agent-prompt-prompt-management.mdx"; +import { CopyAgentPromptButton } from "@/components-mdx/get-started/copy-agent-prompt-button"; -Install the [Langfuse Agent Skill](https://github.com/langfuse/skills) to let your coding agent / agentic IDE access all Langfuse features. +Install the [Langfuse AI Skill](https://github.com/langfuse/skills) to let your coding agent access all Langfuse features. - + + + + +Ask your coding agent to set up Langfuse by following the get-started guide for this page: + +{props.topic === "observability" && } +{props.topic === "prompt-management" && } + + + Langfuse has a [Cursor Plugin](https://cursor.com/docs/plugins) that includes the skill automatically. -
+
- - - - -Claude stores its skills in a `.claude/skills` directory, you can install skills either globally or per project. - -
- - - - - - - - -
- -Copy the [Langfuse Skill](https://github.com/langfuse/skills/tree/main/skills/langfuse) to your local claude skills folder. We'd recommend using a symlink to keep the skill up to date. - -You can do this using npm ([skills CLI](https://www.npmjs.com/package/skills)): - -```bash -npx skills add langfuse/skills --skill "langfuse" --agent "claude-code" -``` -
-Alternatively you can do this manually - -1. Clone repo somewhere stable -```bash -git clone https://github.com/langfuse/skills.git /path/to/langfuse-skills -``` - -2. Make sure Claude skills dir exists (common location) -```bash -mkdir -p ~/.claude/skills -``` - -3. Symlink the skill folder -```bash -ln -s /path/to/langfuse-skills/skills/langfuse ~/.claude/skills/langfuse -``` - -
+After installing the plugin, prompt your coding agent: +{props.topic === "observability" && } +{props.topic === "prompt-management" && } -Codex stores its skills in a `.agents/skills` directory, you can install skills either globally or per project. See [Codex docs: Where to save skills](https://developers.openai.com/codex/skills/#where-to-save-skills). - -
- - - - - - - - -
- -Copy the [Langfuse Skill](https://github.com/langfuse/skills/tree/main/skills/langfuse) to your local codex skills folder. We'd recommend using a symlink to keep the skill up to date. - -You can do this using npm ([skills CLI](https://www.npmjs.com/package/skills)): - -```bash -npx skills add langfuse/skills --skill "langfuse" --agent "codex" -``` - -
-Alternatively you can do this manually - -1. Clone repo somewhere stable -```bash -git clone https://github.com/langfuse/skills.git /path/to/langfuse-skills -``` - -2. Make sure Codex skills dir exists (common location) -```bash -mkdir -p ~/.agents/skills -``` - -3. Symlink the skill folder -```bash -ln -s /path/to/langfuse-skills/skills/langfuse ~/.agents/skills/langfuse -``` - -
- - - - - -For other AI coding agents, the skill folder structure is: - -
- - - - - - - - -
- -`` depends on your tool. The npm command below installs to the correct location automatically. - -For other AI coding agents, install via npm ([skills CLI](https://www.npmjs.com/package/skills)): +Install via npm ([skills CLI](https://www.npmjs.com/package/skills)): ```bash npx skills add langfuse/skills --skill "langfuse" @@ -142,7 +58,7 @@ npx skills add langfuse/skills --skill "langfuse" --agent "" ```
-Alternatively you can do this manually +Alternatively you can manually clone the skill 1. Clone repo somewhere stable ```bash diff --git a/components-mdx/get-started/copy-agent-prompt-button.tsx b/components-mdx/get-started/copy-agent-prompt-button.tsx new file mode 100644 index 000000000..97b60dbe6 --- /dev/null +++ b/components-mdx/get-started/copy-agent-prompt-button.tsx @@ -0,0 +1,45 @@ +"use client"; + +import { Button } from "@/components/ui/button"; +import { Check, Copy } from "lucide-react"; +import { useState } from "react"; +import { getAgentPromptText } from "@/components-mdx/get-started/agent-prompt-text"; + +type CopyAgentPromptButtonProps = { + topic?: string; +}; + +export function CopyAgentPromptButton({ topic }: CopyAgentPromptButtonProps) { + const prompt = getAgentPromptText(topic); + const [copied, setCopied] = useState(false); + + if (!prompt) { + return null; + } + + const handleCopy = async () => { + try { + await navigator.clipboard.writeText(prompt); + setCopied(true); + setTimeout(() => setCopied(false), 3000); + } catch (err) { + console.error("Failed to copy prompt:", err); + } + }; + + return ( + + ); +} diff --git a/components-mdx/get-started/copyable-agent-prompt.tsx b/components-mdx/get-started/copyable-agent-prompt.tsx new file mode 100644 index 000000000..d0b307673 --- /dev/null +++ b/components-mdx/get-started/copyable-agent-prompt.tsx @@ -0,0 +1,52 @@ +"use client"; + +import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; +import { Check, Copy } from "lucide-react"; +import { useState } from "react"; +import { getAgentPromptText } from "./agent-prompt-text"; + +type CopyableAgentPromptProps = { + topic?: string; + className?: string; +}; + +export function CopyableAgentPrompt({ topic, className }: CopyableAgentPromptProps) { + const text = getAgentPromptText(topic); + const [copied, setCopied] = useState(false); + + if (!text) { + return null; + } + + const handleCopy = async () => { + try { + await navigator.clipboard.writeText(text); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch (err) { + console.error("Failed to copy prompt:", err); + } + }; + + return ( +
+

{text}

+ +
+ ); +} diff --git a/content/docs/observability/get-started.mdx b/content/docs/observability/get-started.mdx index 614fc8074..6e37c31e1 100644 --- a/content/docs/observability/get-started.mdx +++ b/content/docs/observability/get-started.mdx @@ -18,40 +18,13 @@ import GetStartedVercelAiSdk from "@/components-mdx/get-started/vercel-ai-sdk.md import { BookOpen, Code } from "lucide-react"; import { FaqPreview } from "@/components/faq/FaqPreview"; -## Agentic installation [#agentic-installation] -This guide helps you get started with Langfuse tracing using your coding agent / agentic IDE. - - -### Get API keys - -1. [Create Langfuse account](https://cloud.langfuse.com/auth/sign-up) or [self-host Langfuse](/self-hosting). -2. Create new API credentials in the project settings. - -### Set up your AI agent - - - -### Instrument your codebase - -Start a new agent session, then prompt it to instrument your codebase: - -```txt filename="Agent instruction" -"Instrument this application with Langfuse tracing following best practices." -``` +
-### See your trace in Langfuse - -After running your application, visit the Langfuse interface to view the trace you just created. _[(Example LangGraph trace in Langfuse)](https://cloud.langfuse.com/project/cloramnkj0002jz088vzn1ja4/traces/7d5f970573b8214d1ca891251e42282c)_ - -
## Manual installation [#manual-installation] This guide helps you get started with Langfuse tracing manually. diff --git a/content/docs/prompt-management/get-started.mdx b/content/docs/prompt-management/get-started.mdx index b4ad72949..3cbb95b6c 100644 --- a/content/docs/prompt-management/get-started.mdx +++ b/content/docs/prompt-management/get-started.mdx @@ -13,28 +13,13 @@ import PromptUse from "@/components-mdx/prompt-use.mdx"; import GetStartedAutoInstall from "@/components-mdx/get-started/auto-install.mdx"; import { FaqPreview } from "@/components/faq/FaqPreview"; -## Agentic installation [#agentic-installation] -This guide helps you get started with Langfuse Prompt Management using your coding agent / agentic IDE. - - -### Get API keys - -1. [Create Langfuse account](https://langfuse.com/cloud) or [self-host Langfuse](/self-hosting). -2. Create new API credentials in the project settings. - -### Set up your AI agent - - +
-### Create and use prompts [#create-update-prompt] - -Start a new agent session, then prompt it to migrate your existing prompts to Langfuse: +## Agentic installation [#agentic-installation] -```txt filename="Agent instruction" -"Migrate the prompts in this codebase to Langfuse." -``` + - +
## Manual installation [#manual-installation] This guide helps you get started with Langfuse Prompt Management manually.