Cursor rules · langflow-ai/langflow

First lines (shown under the repo's MIT license)

---
description: "Guidelines for developing and maintaining Langflow documentation using Docusaurus, including content structure, style, and deployment processes."
globs:
  - "docs/**/*.{md,mdx}"
  - "docs/**/*.{js,jsx,ts,tsx}"
  - "docs/package*.json"
  - "docs/docusaurus.config.js"
  - "docs/sidebars.js"
  - "docs/static/**/*"
alwaysApply: false
---

# Documentation Development Guidelines

## Purpose
Guidelines for developing and maintaining Langflow documentation using Docusaurus, including content structure, style, and deployment processes.

---

## 1. Documentation Environment Setup

### Prerequisites
- **Node.js:** v22.12 LTS for runtime
- **Package Manager:** npm for dependency management
- **Documentation Framework:** Docusaurus v3

### Documentation Service
```bash
cd docs
npm install       # Install dependencies
npm run start     # Start dev server
```
- Auto-reloads on documentation changes
- Access at: http://localhost:3000/
- Documentation source: `docs/`

---

## 2. Documentation Structure

### Directory Layout
```
docs/
├── docs/                    # Main documentation content
│   ├── agents/              # Agent and MCP guides
│   ├── get-started/         # Getting started guides
│   ├── tutorials/           # Langflow tutorials
│   ├── components/          # Component documentation
│   ├── flows/               # Guides to build, run, and test flows
│   ├── deployment/          # Guides for deploying and hosting a Langflow server
│   ├── develop/             # Guides for developing apps with Langflow
│   ├── support/             # Help and release notes
│   ├── contributing/        # Contribution guidelines
│   ├── api-reference/       # API documentation
│   └── _partial-*.mdx       # Shared content partials (imported by other pages)
├── src/                     # Custom React components
├── static/                  # Static assets (images, etc.)
├── sidebars.js              # Sidebar configuration
├── docusaurus.config.js     # Main configuration
└── package.json             # Dependencies
```

---

## 3. Writing Documentation

### Frontmatter
Every `.mdx` file uses only `title` and `slug`. No `description` or `sidebar_position`.

```
---
title: Page Title
slug: /page-slug
---
```

The `title` value is used as the page heading — do not add a duplicate `# h1` after the frontmatter.

### MDX Imports
Most pages import one or more of these at the top, after frontmatter:

```
import Icon from "@site/src/components/icon";
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import SomePartial from '@site/docs/_partial-some-content.mdx';
```

- Use `<Icon name="IconName" aria-hidden="true" />` to reference Lucide icons inline. Always include `aria-hidden="true"` and bold the button name next to it for accessibility: `<Icon name="Play" aria-hidden="true" /> **Run**`.
- Use `<SomePartial />` to embed shared content partials.

### Admonitions
```
:::tip
Use for helpful tips.
:::

:::warning
Use for potential issues.
:::

:::danger
Use for critical warnings.
:::
```

### Images and Assets
```
![Descriptive alt text](/img/some-image.png)
```

Images go in `static/img/`. Use descriptive alt text.

---

## 4. Component Documentation

### Component Page Template
```
---
title: Component Name
slug: /component-name
---

import Icon from "@site/src/components/icon";

One-sentence description of what the component does.

## Use the Component Name component in a flow

Step-by-step instructions for using the component.

## Component Name parameters

| Name | Type | Description |
|------|------|-------------|
| `input_name` | MessageTextInput | Description of the input. |
| `output_name` | Message | Description of the output. |
```

### API Documentation
```
---
title: API Endpoint Name
slug: /api-endpoint-name
---

## Endpoint

`POST /api/v1/endpoint`

## Request body

| Parameter | Type | Description |
|-----------|------|-------------|
| `param` | string | Description. |

## Example

```bash