docs: improve structure (langfuse#325)

Author: marcklingen

components/Background.tsx

@@ -12,11 +12,11 @@ export const Background = () => (
       cr={1}
       className={cn(
         "[mask-image:linear-gradient(to_bottom,white,transparent,transparent)]",
-        "dark:opacity-70"
+        "dark:opacity-30"
       )}
     />
     <LinearGradient
-      to="rgba(120,119,198,0.25)"
+      to="rgba(120,119,198,0.15)"
       from="rgba(0,0,0,0.0)"
       direction="top"
       transitionPoint="50%"

components/NotebookBanner.tsx

@@ -1,4 +1,4 @@
-import { Callout, Cards, Card } from "nextra-theme-docs";
+import { Callout } from "nextra-theme-docs";
 import { Button } from "./ui/button";
 
 export const NotebookBanner: React.FC<{ src: string; className?: string }> = ({

components/home/Integrations.tsx

@@ -14,7 +14,7 @@ const features = [
     description:
       "Using Langchain? Get full execution traces in 5 minutes by adding the Langfuse Callback Handler to your app. Works for Python and JS projects.",
     icon: Link,
-    href: "/docs/langchain",
+    href: "/docs/integrations/langchain",
   },
   {
     name: "Web SDK",
@@ -28,7 +28,7 @@ const features = [
     description:
       "If you use the OpenAI SDK, use the Langfuse drop-in replacement to get full trace data by just changing the import.",
     icon: SiOpenai,
-    href: "/docs/openai",
+    href: "/docs/integrations/openai",
   },
   {
     name: "API",

components/qaChatbot/index.tsx

@@ -104,5 +104,5 @@ const welcomeMessage: Message = {
   id: "announcement-1",
   content: `👋 Do you have any questions about Langfuse? Ask me!
 
-_⚠️ Warning: Do not enter sensitive information. All chat messages can be viewed in the [live demo](/docs/demo). Hosted LLMs by OpenAI are used. Humans (the founders) are available via the chat widget._`,
+_⚠️ Warning: Do not enter sensitive information. All chat messages can be viewed in the public demo project. Humans (the founders) are available via the chat widget._`,
 } as const;

cookbook/_routes.json

@@ -5,15 +5,15 @@
   },
   {
     "source": "cookbook/integration_langchain.md",
-    "destination": "/docs/langchain/python.md"
+    "destination": "/docs/integrations/langchain/python.md"
   },
   {
     "source": "cookbook/integration_openai_sdk.md",
-    "destination": "/docs/openai.md"
+    "destination": "/docs/integrations/openai.md"
   },
   {
-    "source": "cookbook/evaluation_get_started.md",
-    "destination": "/docs/scores/model-based-evals.md"
+    "source": "cookbook/evaluation_with_langchain.md",
+    "destination": "/docs/scores/model-based-evals/langchain.md"
   },
   {
     "source": "cookbook/python_sdk.md",

cookbook/evaluation_get_started.ipynb renamed to cookbook/evaluation_with_langchain.ipynb

@@ -6,17 +6,9 @@
         "id": "SWL354n0DECo"
       },
       "source": [
-        "# Model-based Evaluations in Langfuse\n",
+        "# Run Langchain Evaluations on data in Langfuse\n",
         "\n",
-        "Model-based evaluations are a powerful tool to automate the evaluation of production completions in Langfuse.\n",
-        "\n",
-        "Currently, model-based evals can be applied to production data in Langfuse via the Python SDK. This gives you full flexibility to run various eval libraries on your production data and discover which work well for your use case.\n",
-        "\n",
-        "**Coming soon**: support for running model-based evals directly from the Langfuse UI/Server.\n",
-        "\n",
-        "## Example using Langchain Evals\n",
-        "\n",
-        "This cookbook shows how model-based evaluations can be used to automate the evaluation of production completions in Langfuse. This example uses Langchain but any other eval library can be used as well. Which library is the best to use depends heavily on the use case.\n",
+        "This cookbook shows how model-based evaluations can be used to automate the evaluation of production completions in Langfuse. This example uses Langchain and is adaptable to other libraries. Which library is the best to use depends heavily on the use case.\n",
         "\n",
         "This cookbook follows three steps:\n",
         "1. Fetch production `generations` stored in Langfuse\n",
@@ -25,7 +17,7 @@
         "\n",
         "\n",
         "----\n",
-        "Not using Langfuse yet? [Get started](/docs/get-started) by capturing LLM events."
+        "Not using Langfuse yet? [Get started](https://langfuse.com/docs/get-started) by capturing LLM events."
       ]
     },
     {

cookbook/python_sdk.ipynb

@@ -28,9 +28,7 @@
         "id": "qL7HhNyIYNwn"
       },
       "source": [
-        "This is a Python SDK used to send LLM data to Langfuse in a convenient way. It uses a worker Thread and an internal queue to manage requests to the Langfuse backend asynchronously. Hence, the SDK adds only minimal latency to your application.\n",
-        "\n",
-        "Using Langchain or OpenAI SDK? Use the native [integrations](https://langfuse.com/docs/integrations)."
+        "This is a Python SDK used to send LLM data to Langfuse in a convenient way. It uses a worker Thread and an internal queue to manage requests to the Langfuse backend asynchronously. Hence, the SDK adds only minimal latency to your application."
       ]
     },
     {
@@ -193,8 +191,8 @@
         "| input | object | yes | The input of the trace. Can be any JSON object.\n",
         "| output | object | yes | The output of the trace. Can be any JSON object.\n",
         "| metadata | object | yes | Additional metadata of the trace. Can be any JSON object. Metadata is merged when being updated via the API.\n",
-        "| user_id | string | yes | The id of the user that triggered the execution. Used to provide [user-level analytics](https://langfuse.com/docs/user-explorer).\n",
-        "| session_id | string| yes | Used to group multiple traces into a [session](https://langfuse.com/docs/sessions) in Langfuse. Use your own session/thread identifier.\n",
+        "| user_id | string | yes | The id of the user that triggered the execution. Used to provide [user-level analytics](https://langfuse.com/docs/tracing/users).\n",
+        "| session_id | string| yes | Used to group multiple traces into a [session](https://langfuse.com/docs/tracing/sessions) in Langfuse. Use your own session/thread identifier.\n",
         "| version | string | yes | The version of the trace type. Used to understand how changes to the trace type affect metrics. Useful in debugging.\n",
         "| release | string | yes | The release identifier of the current deployment. Used to understand how changes of different deployments affect metrics. Useful in debugging.\n",
         "| tags | string[] | yes | Tags are used to categorize or label traces. Traces can be filtered by tags in the UI and GET API. Tags can also be changed in the UI. Tags are merged and never deleted via the API. |"
@@ -519,7 +517,7 @@
       "source": [
         "## Scores\n",
         "\n",
-        "[Scores](https://langfuse.com/docs/scores) are used to evaluate single executions/traces. They can created manually via the Langfuse UI or via the SDKs.\n",
+        "[Scores](https://langfuse.com/docs/scores/overview) are used to evaluate single executions/traces. They can created manually via the Langfuse UI or via the SDKs.\n",
         "\n",
         "If the score relates to a specific step of the trace, specify the `observation_id`.\n",
         "\n",

next.config.mjs

@@ -59,32 +59,47 @@ const nonPermanentRedirects = [
   ["/issue", "https://github.com/langfuse/langfuse/issues/new/choose"],
   ["/security", "/docs/data-security-privacy"],
   ["/idea", "https://github.com/orgs/langfuse/discussions/new?category=ideas"],
-];
 
-const permanentRedirects = [
-  // Migration 2023-07
-  ["/observability", "/docs/tracing"],
-  ["/docs/debugging-ui", "/docs/tracing"],
-  // Migration 2023-08-01
-  // deployment
+  // Redirect to overview pages
+  ...[
+    "/docs/integrations",
+    "/docs/sdk",
+    "/docs/tracing",
+    "/docs/scores",
+    "/docs/scores/model-based-evals",
+    "/docs/datasets",
+  ].map((path) => [path, path + "/overview"]),
+
+  // Redirects to bridge all kinds of old links to new links
+  ["/docs/reference", "https://api.reference.langfuse.com/"],
+  ["/docs/integrations/api", "https://api.reference.langfuse.com/"],
+  ["/docs/langchain", "/docs/integrations/langchain/python"],
+  ["/docs/integrations/langchain", "/docs/integrations/langchain/python"],
+  ["/docs/langchain/python", "/docs/integrations/langchain/python"],
+  ["/docs/langchain/typescript", "/docs/integrations/langchain/typescript"],
+  ["/docs/flowise", "/docs/integrations/flowise"],
+  ["/docs/litellm", "/docs/integrations/litellm"],
+  ["/docs/langflow", "/docs/integrations/langflow"],
+  ["/integrations", "/docs/integrations"],
   ["/docs/local", "/docs/deployment/local"],
   ["/docs/self-host", "/docs/deployment/self-host"],
   ["/docs/cloud", "/docs/deployment/cloud"],
-  // integrations
-  ["/integrations", "/docs/integrations"],
-  ["/docs/reference", "/docs/api"],
-  // Integrations back on root
-  ...["langchain", "api", "openai", "sdk", "flowise", "langflow", "litellm"].map(
-    (integration) => [`/docs/integrations/${integration}/:path*`, `/docs/${integration}/:path*`]),
-  // sdk integration guide
-  ["/docs/langchain", "/docs/langchain/python"],
-  ["/docs/guides/sdk-integration", "/docs/sdk#example"],
-  // evals
-  ["/docs/scores/evals", "/docs/scores/model-based-evals"],
-  // old experimentation to new experimentation
+  ["/docs/guides/sdk-integration", "/docs/sdk/overview"],
+  ["/docs/scores/evals", "/docs/scores/model-based-evals/overview"],
   ["/experimentation", "/docs/experimentation"],
-  // token usage to model usage, 2024-01
   ["/docs/token-usage", "/docs/model-usage-and-cost"],
-]
+  ["/docs/debugging-ui", "/docs/tracing/overview"],
+  ["/observability", "/docs/tracing/overview"],
+  ["/docs/openai", "/docs/integrations/openai"],
+  ["/docs/api", "https://api.reference.langfuse.com/"],
+  ["/docs/qa-chatbot", "/docs/demo"],
+  ["/docs/user-explorer", "/docs/tracing/users"],
+  ["/docs/sessions", "/docs/tracing/sessions"],
+  ["/docs/deployment/cloud", "/security"],
+  ["/docs/schedule-demo", "/schedule-demo"],
+  ["/docs/project-sharing", "/docs/rbac"],
+];
+
+const permanentRedirects = []
 
 export default withBundleAnalyzer(nextraConfig);

package.json

@@ -31,11 +31,9 @@
     "autoprefixer": "^10.4.17",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "core-js": "^3.35.1",
     "gpt3-tokenizer": "^1.1.5",
     "langfuse": "3.0.2",
     "lucide-react": "^0.321.0",
-    "mobx": "^6.12.0",
     "next": "^14.1.0",
     "next-sitemap": "^4.2.3",
     "nextra": "^2.13.3",
@@ -50,10 +48,8 @@
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-tweet": "^3.2.0",
-    "redoc": "^2.1.3",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
-    "styled-components": "^6.1.8",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",

pages/_meta.json

@@ -55,7 +55,7 @@
     "type": "menu",
     "items": {
       "try-yourself": {
-        "title": "Try live demo",
+        "title": "Interactive demo",
         "href": "/docs/demo"
       },
       "video": {

pages/blog/langchain-integration.mdx

@@ -34,7 +34,7 @@ chain = LLMChain(llm=llm, prompt=prompt)
 chain.run(input="<user_input", callbacks=[handler])
 ```
 
-_From the [Langchain integration docs](/docs/langchain)_
+_From the [Langchain integration docs](/docs/integrations/langchain/python)_
 
 ## Which actions are tracked?
 
@@ -57,15 +57,15 @@ Demo of the debug view in Langfuse:
   ![Debug view in Langfuse](/images/blog/langchain/langfuse-debug-ui.gif)
 </Frame>
 
-_You can find the code of these examples in the [Langchain integration docs](/docs/langchain)_
+_You can find the code of these examples in the [Langchain integration docs](/docs/integrations/langchain/python)_
 
 ## About Langfuse
 
 Langfuse is an open source product analytics platform for LLM applications. It is used by teams to track and analyze their LLM app in production with regards to quality, cost and latency across product releases and use cases. In addition, the Langfuse Debug UI helps to visualize the control flow of LLM apps in production. Read our [launch post](/blog/product-analytics-for-LLM-apps) if you want to learn more.
 
 ## Next steps
 
-- Read the [Langchain integration](/docs/langchain) docs for more details and examples to get started.
+- Read the [Langchain integration](/docs/integrations/langchain/python) docs for more details and examples to get started.
 - **Not (exclusively) using Langchain in production?** Follow the [quickstart](/docs/get-started) to get started with the Typescript and Python SDKs that allow you to integrate with your custom LLM app.
 
 ## Questions / Feedback?

pages/blog/qa-chatbot-for-langfuse-docs.mdx

@@ -22,8 +22,6 @@ We've built a new Q&A chatbot to help users find the right information in the La
 
 **Update:** All Langfuse Cloud users now have view-only access to this project. [View live demo](/docs/demo) to explore it yourself.
 
-**Try it** _(also available in the [docs](/docs/qa-chatbot))_
-
 <div className="p-3 rounded-lg mt-2 bg-gradient-to-tr from-green-300 via-blue-500 to-purple-600">
   <Chat className="h-96 my-0 bg-background/90" />
 </div>

pages/blog/update-2023-07.mdx

@@ -54,7 +54,7 @@ chain = LLMChain(llm=llm, prompt=prompt)
 chain.run(input="<user_input", callbacks=[handler])
 ```
 
-→ [Integration docs](/docs/langchain)
+→ [Integration docs](/docs/integrations/langchain/python)
 
 ## ⚡️ Improved SDKs for Python and JS/TS [#SDKs]
 
@@ -108,7 +108,7 @@ More user-based analytics and features are coming soon, e.g. APIs to use this da
 
 <Frame>![User reporting](/images/blog/update-july-2023/users.gif)</Frame>
 
-→ [Learn more](/docs/user-explorer)
+→ [Learn more](/docs/tracing/users)
 
 ## 📈 Analytics (alpha) [#analytics]
 

pages/blog/update-2023-08.mdx

@@ -66,7 +66,7 @@ const llm = new OpenAI();
 const res = await llm.call("<user-input>", { callbacks: [handler] });
 ```
 
-→ [Integration docs](/docs/langchain/typescript)
+→ [Integration docs](/docs/integrations/langchain/typescript)
 
 ## ⛓️ Langchain integrations with Trace context [#langchain-trace]
 
@@ -97,7 +97,7 @@ chain = LLMChain(llm=llm, prompt=PromptTemplate(...))
 chain.run("<your-input>", callbacks=[handler])
 ```
 
-→ [Docs](/docs/langchain/python)
+→ [Docs](/docs/integrations/langchain/python)
 
 ## 📦 Trace context: Releases and versions [#releases-and-versions]
 

pages/blog/update-2023-09.mdx

@@ -155,7 +155,7 @@ for item in dataset.items:
 
 Datasets are currently in beta on Langfuse Cloud as the API might still slightly change. If you'd like to try it, let us know via the in-app chat.
 
-→ [Dataset docs](/docs/datasets)
+→ [Dataset docs](/docs/datasets/overview)
 → [Python Cookbook](/docs/datasets/python-cookbook)
 
 ## 📊 In-app dashboards [#analytics]

pages/blog/update-2023-10.mdx

@@ -86,7 +86,7 @@ openai.ChatCompletion.create(
 
 This integration fully supports grouping multiple requests into one trace if they belong to a single invocation. Also you can add scores to evaluate the outputs.
 
-See [integration docs](/docs/openai) for full details.
+See [integration docs](/docs/integrations/openai) for full details.
 
 Thanks to [@Dev-Khant](https://github.com/Dev-Khant) for contributing to this.
 

pages/changelog/2023-08-30-integration-langchain-js.mdx

@@ -10,4 +10,4 @@ import { ChangelogHeader } from "@/components/changelog/ChangelogHeader";
 
 <ChangelogHeader />
 
-Checkout the [documentation](/docs/langchain/typescript) for more details.
+Checkout the [documentation](/docs/integrations/langchain/typescript) for more details.

pages/changelog/2023-09-25-datasets.mdx

@@ -86,5 +86,5 @@ Datasets are currently in beta on Langfuse Cloud as the API might still slightly
 
 Links:
 
-- [Dataset docs](/docs/datasets)
+- [Dataset docs](/docs/datasets/overview)
 - [Python Cookbook](/docs/datasets/python-cookbook)

pages/changelog/2023-10-25-openai-sdk-integration.mdx

@@ -10,6 +10,6 @@ import { ChangelogHeader } from "@/components/changelog/ChangelogHeader";
 
 <ChangelogHeader />
 
-For detailed instructions checkout the [docs/cookbook](/docs/openai).
+For detailed instructions checkout the [docs/cookbook](/docs/integrations/openai).
 
 Thanks to [@Dev-Khant](https://github.com/dev-khant) for the initial contribution!

pages/changelog/2023-11-13-support-for-langchain-expression-language.mdx

@@ -16,4 +16,4 @@ To use Langfuse, simply add the callback handler to the invoke method:
 chain.invoke(input, config={"callbacks":[handler]})
 ```
 
-See [Langchain integration docs](/docs/langchain/python) for full details.
+See [Langchain integration docs](/docs/integrations/langchain/python) for full details.

pages/changelog/2023-11-16-openai-sdk-version-1.mdx

@@ -24,4 +24,4 @@ openai.langfuse_public_key = "YOUR_PUBLIC_KEY"
 openai.langfuse_secret_key = "YOUR_SECRET_KEY"
 ```
 
-See the [OpenAI SDK integration](/docs/openai) page for more information.
+See the [OpenAI SDK integration](/docs/integrations/openai) page for more information.

pages/changelog/2023-12-13-sessions.mdx

@@ -15,4 +15,4 @@ Example use cases:
 - Conversations / threads
 - Multiple interactions within a user session
 
-To get started, add a `sessionId` string when creating/updating a trace. See [docs](/docs/sessions) for full details on how to add sessions to your traces.
+To get started, add a `sessionId` string when creating/updating a trace. See [docs](/docs/tracing/sessions) for full details on how to add sessions to your traces.

pages/changelog/2023-12-28-v2-sdks.mdx

@@ -67,7 +67,7 @@ langfuse.generation(
 
 For every chain run, a new trace is created. Previously all runs that were traced with the same Callback Handler instance were grouped into the same trace. While this was intended to be able to trace complex applications, it is not a great default for most users.
 
-For those who want this behavior, you can create a trace and get a Langchain Handler that is scoped to the trace ([Python](/docs/langchain/python#upgrading-from-v1xx-to-v2xx), [JS/TS](/docs/langchain/typescript#upgrade1to2)).
+For those who want this behavior, you can create a trace and get a Langchain Handler that is scoped to the trace ([Python](/docs/integrations/langchain/python#upgrading-from-v1xx-to-v2xx), [JS/TS](/docs/integrations/langchain/typescript#upgrade1to2)).
 
 ### Other
 

pages/changelog/2024-01-03-prompt-management.mdx

@@ -23,6 +23,6 @@ langfuse.get_prompt("clemens-awesome-prompt")
 
 ### 🕹️ Give it a spin
 
-Head over to [our docs](/docs/prompts) to learn more and get started. Alternatively, see a demo by [logging in](https://cloud.langfuse.com) and selecting the ‘langfuse-docs’ project since we use Langfuse Prompt Management for the [QA-chatbot](/docs/qa-chatbot).
+Head over to [our docs](/docs/prompts) to learn more and get started. Alternatively, see a [live demo](/docs/demo) since we use Langfuse Prompt Management to build a demo project that is integrated with Langfuse.
 
 If you have any feedback, do get in touch on [Discord](/discord).