Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions components-mdx/get-started/agent-prompt-observability.mdx
Original file line number Diff line number Diff line change
@@ -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
```
6 changes: 6 additions & 0 deletions components-mdx/get-started/agent-prompt-prompt-management.mdx
Original file line number Diff line number Diff line change
@@ -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
```
18 changes: 18 additions & 0 deletions components-mdx/get-started/agent-prompt-text.tsx
Original file line number Diff line number Diff line change
@@ -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 "";
}
}
132 changes: 24 additions & 108 deletions components-mdx/get-started/auto-install.mdx
Original file line number Diff line number Diff line change
@@ -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.

<Tabs items={["Cursor", "Claude Code", "Codex", "Other AI Coding Apps"]}>
<Tabs
items={["Ask your coding agent", "Cursor plugin", "Manual installation"]}
className="my-0"
>

<Tab>

Ask your coding agent to set up Langfuse by following the get-started guide for this page:

{props.topic === "observability" && <AgentPromptObservability />}
{props.topic === "prompt-management" && <AgentPromptPromptManagement />}
<CopyAgentPromptButton topic={props.topic} />

</Tab>

<Tab>

Langfuse has a [Cursor Plugin](https://cursor.com/docs/plugins) that includes the skill automatically.

<div className="flex gap-2 mt-3 mb-6">
<div className="flex gap-2 mt-3">
<Button asChild>
<Link
href="https://cursor.com/marketplace/langfuse"
Expand All @@ -20,116 +36,16 @@ Langfuse has a [Cursor Plugin](https://cursor.com/docs/plugins) that includes th
</Link>
</Button>
</div>
</Tab>

<Tab>

Claude stores its skills in a `.claude/skills` directory, you can install skills either globally or per project.

<div className="[&_.nextra-filetree>ul]:block [&_.nextra-filetree>ul]:w-full">
<FileTree>
<FileTree.Folder name="~/.claude or <project>/.claude" defaultOpen>
<FileTree.Folder name="skills" defaultOpen>
<FileTree.Folder name="langfuse" defaultOpen>
</FileTree.Folder>
</FileTree.Folder>
</FileTree.Folder>
</FileTree>
</div>

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"
```

<details>
<summary>Alternatively you can do this manually</summary>

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
```

</details>
After installing the plugin, prompt your coding agent:

{props.topic === "observability" && <AgentPromptObservability />}
{props.topic === "prompt-management" && <AgentPromptPromptManagement />}
</Tab>

<Tab>
Comment on lines +42 to 46
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 The 'Cursor plugin' tab shows the agent prompt but is missing the that appears in the 'Ask your coding agent' tab. Adding after the prompt MDX components in the Cursor tab (around line 46 of auto-install.mdx) would restore consistency.

Extended reasoning...

Both tabs in auto-install.mdx display the same agent prompt via the conditional AgentPromptObservability / AgentPromptPromptManagement MDX components, and both were clearly intended to give users a prominent, labeled way to copy that prompt text. The PR introduced CopyAgentPromptButton and wired it up correctly in Tab 1 ('Ask your coding agent'), but the same button was not added to Tab 2 ('Cursor plugin').

The specific code path: in auto-install.mdx, Tab 1 ends with <CopyAgentPromptButton topic={props.topic} /> (line 20), while Tab 2 ends after the prompt MDX block with no corresponding button (lines 42–46). The import for CopyAgentPromptButton is already present at the top of the file, so the fix is simply a one-line addition.

Existing code does not compensate for this omission in a fully equivalent way. Fumadocs code blocks do render a small native copy icon, so the prompt text is not uncopyable — but that icon is small, unlabeled, and part of the code block UI rather than a standalone, discoverable action. The CopyAgentPromptButton is a larger, labeled button ('Copy Agent Prompt') that makes the action explicit, especially for users who may not notice the code-block icon.

The practical impact is a UX inconsistency: users who land on the Cursor plugin tab see a less polished experience than those on the first tab. The button's absence may also be mildly confusing if users notice it exists on Tab 1 but not Tab 2. There is no functional breakage, which is why this is nit-level.

The fix is minimal: add <CopyAgentPromptButton topic={props.topic} /> directly after the prompt MDX components in Tab 2, mirroring exactly what Tab 1 does. No new imports are needed since CopyAgentPromptButton is already imported.

Step-by-step proof: (1) A user visits the Cursor plugin tab. (2) They see the agent prompt rendered via AgentPromptObservability or AgentPromptPromptManagement. (3) They look for a 'Copy Agent Prompt' button like the one visible on the first tab — it is absent. (4) They must rely on the smaller native code-block copy icon or manually select the text. Meanwhile, a user on Tab 1 gets the large labeled button immediately below the prompt.


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).

<div className="[&_.nextra-filetree>ul]:block [&_.nextra-filetree>ul]:w-full">
<FileTree>
<FileTree.Folder name="~/.agents or <repo>/.agents" defaultOpen>
<FileTree.Folder name="skills" defaultOpen>
<FileTree.Folder name="langfuse" defaultOpen>
</FileTree.Folder>
</FileTree.Folder>
</FileTree.Folder>
</FileTree>
</div>

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"
```

<details>
<summary>Alternatively you can do this manually</summary>

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
```

</details>

</Tab>

<Tab>

For other AI coding agents, the skill folder structure is:

<div className="[&_.nextra-filetree>ul]:block [&_.nextra-filetree>ul]:w-full">
<FileTree>
<FileTree.Folder name="<agent-skill-root>" defaultOpen>
<FileTree.Folder name="skills" defaultOpen>
<FileTree.Folder name="langfuse" defaultOpen>
</FileTree.Folder>
</FileTree.Folder>
</FileTree.Folder>
</FileTree>
</div>

`<agent-skill-root>` 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"
Expand All @@ -142,7 +58,7 @@ npx skills add langfuse/skills --skill "langfuse" --agent "<agent-id>"
```

<details>
<summary>Alternatively you can do this manually</summary>
<summary>Alternatively you can manually clone the skill</summary>

1. Clone repo somewhere stable
```bash
Expand Down
45 changes: 45 additions & 0 deletions components-mdx/get-started/copy-agent-prompt-button.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Button onClick={handleCopy}>
{copied ? (
<>
<Check className="mr-2 h-4 w-4" />
Prompt copied
</>
) : (
<>
<Copy className="mr-2 h-4 w-4" />
Copy Agent Prompt
</>
)}
</Button>
);
}
52 changes: 52 additions & 0 deletions components-mdx/get-started/copyable-agent-prompt.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div
className={cn(
"relative rounded-md border bg-muted/30 p-4 pr-12 text-sm leading-relaxed text-foreground",
className,
)}
>
<p className="whitespace-pre-wrap font-sans">{text}</p>
<Button
type="button"
size="icon"
variant="ghost"
className="absolute right-2 top-2 shrink-0 text-muted-foreground hover:text-foreground"
onClick={handleCopy}
aria-label="Copy prompt to clipboard"
>
{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
</Button>
</div>
);
}
35 changes: 4 additions & 31 deletions content/docs/observability/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<Steps>
### 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

<GetStartedAutoInstall />

### 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."
```
<div className="rounded-lg border bg-muted-blue/5 px-6 pb-6 [&>h2]:mt-6 [&>h2]:mb-4">

### 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)_

<Video
src="https://static.langfuse.com/docs-videos/trace-new-ui.mp4"
aspectRatio={16 / 9}
gifStyle
/>
## Agentic installation [#agentic-installation]

_[What does a good trace look like?](/faq/all/what-does-a-good-trace-look-like)_
<GetStartedAutoInstall topic="observability" />

</Steps>
</div>

## Manual installation [#manual-installation]
This guide helps you get started with Langfuse tracing manually.
Expand Down
23 changes: 4 additions & 19 deletions content/docs/prompt-management/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<Steps>
### 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

<GetStartedAutoInstall />
<div className="rounded-lg border bg-muted-blue/5 px-6 pb-6 [&>h2]:mt-6 [&>h2]:mb-4">

### 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."
```
<GetStartedAutoInstall topic="prompt-management" />

</Steps>
</div>

## Manual installation [#manual-installation]
This guide helps you get started with Langfuse Prompt Management manually.
Expand Down
Loading