Add docs for n8n

app/app.config.ts

@@ -92,6 +92,11 @@ export default defineAppConfig({
 						to: '/guides/ai/mcp',
 						icon: 'directus-ai',
 					},
+					{
+						label: 'Integrations',
+						to: '/guides/integrations',
+						icon: 'directus-integrations',
+					},
 				],
 			},
 			{

app/components/IntegrationsList.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const integrations = [
+	{
+		title: 'n8n',
+		description: 'Automate workflows between Directus and other services using n8n\'s visual workflow builder.',
+		to: '/guides/integrations/n8n',
+		logo: '/img/tutorials/n8n.png',
+	},
+	{
+		title: 'Clay',
+		description: 'Connect Directus with Clay for data enrichment and automated workflows.',
+		to: '/guides/integrations/clay',
+		logo: '/img/tutorials/clay.png',
+	},
+];
+</script>
+
+<template>
+	<div class="mt-8 gap-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+		<template
+			v-for="integration in integrations"
+			:key="integration.to"
+		>
+			<UPageCard
+				:to="integration.to"
+				class="hover:bg-primary/5 hover:ring-primary"
+				:ui="{
+					title: 'font-bold text-pretty',
+					description: '',
+					container: 'p-0',
+				}"
+			>
+				<div class="min-w-0">
+					<div
+						class="relative p-5 rounded-t-lg bg-gradient-to-br from-primary/10 via-transparent to-primary/10"
+					>
+						<div class="pointer-events-none absolute inset-0 rounded-t-lg ring-1 ring-inset ring-gray-200/60 dark:ring-gray-700/60" />
+						<div class="relative mx-auto flex h-22 w-22 sm:h-24 sm:w-24 items-center justify-center rounded-2xl bg-white shadow-sm ring-1 ring-gray-200/70">
+							<img
+								class="max-h-[70%] max-w-[70%] object-contain"
+								:src="integration.logo"
+								:alt="`${integration.title} logo`"
+							>
+						</div>
+					</div>
+
+					<div class="p-3">
+						<ProseP class="text-gray-900 dark:text-white text-base truncate font-bold text-pretty">
+							{{ integration.title }}
+						</ProseP>
+						<ProseP class="text-[15px] text-gray-500 dark:text-gray-400 mt-1 leading-snug">
+							{{ integration.description }}
+						</ProseP>
+					</div>
+				</div>
+			</UPageCard>
+		</template>
+	</div>
+</template>

app/pages/[...slug].vue

@@ -18,6 +18,13 @@ if (!page.value) {
 
 const headline = computed(() => findPageHeadline(navigation.value, page.value));
 
+const imageSrc = computed(() => {
+	if (!page.value?.technologies) return '';
+	const technologies = page.value.technologies || ['directus'];
+	const techString = technologies.join(', ');
+	return `/docs/api/tutorialimg?logos=${techString}`;
+});
+
 const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryCollectionItemSurroundings('content',
 	route.path,
 	{
@@ -37,6 +44,11 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => qu
 			<template #links>
 				<CopyDocButton :page="page!" />
 			</template>
+			<img
+				v-if="imageSrc"
+				:src="imageSrc"
+				alt="Generated Image"
+			>
 		</UPageHeader>
 
 		<UPageBody

content/guides/11.integrations/.navigation.yml

@@ -0,0 +1,4 @@
+title: Integrations
+icon: directus-integrations
+
+

content/guides/11.integrations/1.n8n/.navigation.yml

@@ -0,0 +1,3 @@
+title: n8n
+headline: n8n
+

content/guides/11.integrations/1.n8n/0.index.md

@@ -0,0 +1,85 @@
+---
+id: n8n-integration
+title: Integration
+description: Connect Directus with n8n to automate workflows, sync data, and integrate your CMS with other services using the Directus community node.
+technologies:
+  - n8n
+---
+
+Connect your Directus instance with n8n to automate workflows, sync data between systems, and build powerful integrations.
+
+::callout{icon="heroicons-outline:rocket-launch"}
+**Quick Start**
+
+1. **Install the node**: In n8n, go to **Settings** → **Community Nodes** → Install `@directus/n8n-nodes-directus`
+2. **Configure credentials**: Add your Directus URL and API token
+3. **Start building**: Use the **Directus** node for actions or **Directus Trigger** node for automation
+::
+## Available Nodes
+
+The Directus community node provides two components:
+
+- **Directus Node**: Perform CRUD operations on items, users, and files
+- **Directus Trigger Node**: Automatically start workflows when events occur in Directus
+
+## Installation
+
+### Install the Community Node
+
+1. In n8n, go to **Settings** → **Community Nodes**
+2. Click **Install a community node**
+3. Enter: `@directus/n8n-nodes-directus`
+4. Click **Install**
+
+### Configure Credentials
+
+Before you can use the Directus nodes, you need to connect to your Directus instance:
+
+1. In any Directus node, click on **Credential to connect with**
+2. Click **Create New Credential** (or select an existing one)
+3. Fill in your connection details:
+   - **Directus URL**: Your Directus instance URL 
+   - **Token**: Your Directus API token
+4. Click **Save** to store your credentials
+
+#### Getting Your API Token
+
+1. In Directus, go to **Users**
+2. Select or create a user for n8n integration
+3. Open the user's detail page
+4. Scroll to **Token** section
+5. Click **Generate Token**
+6. Copy the token and paste into n8n
+7. **Important**: Click the checkmark (✓) to save
+
+::callout{icon="material-symbols:info-outline"}
+**Permissions**
+<br>
+**Admin Token (Recommended for Getting Started)**
+<br>
+Many operations, including creating webhooks for triggers, require Administrator permissions. Assign the Administrator role to the user for the easiest setup and full access to all collections and features.
+
+<br>
+
+**Custom Role (For Production)**
+<br>
+For better security, create a custom role with specific permissions. This allows you to limit access to only the collections and operations your workflows need. The token inherits the user's role permissions, so you can lock down access while still allowing necessary operations.
+::
+
+
+
+## Documentation
+
+**[Working with Directus Actions →](/guides/integrations/n8n/directus-n8n-actions)**
+
+Perform operations on your Directus data: create, read, update, and delete items, users, and files.
+
+**[Using Directus Triggers →](/guides/integrations/n8n/directus-n8n-triggers)**
+
+Set up automated workflows that trigger when events happen in Directus.
+
+**[Advanced Features →](/guides/integrations/n8n/directus-n8n-advanced)**
+
+Use raw CRUD operations with Directus filter syntax, complex queries, and advanced query parameters.
+
+

content/guides/11.integrations/1.n8n/directus-n8n-actions.md

@@ -0,0 +1,173 @@
+---
+id: directus-n8n-actions
+title: Actions
+description: Complete guide for using Directus actions in n8n workflows, including working with items, users, and files.
+technologies:
+  - n8n
+---
+
+This guide covers how to use the Directus Node to perform actions on your Directus data in n8n workflows, including working with items, users, and files.
+
+**[← Back to Directus + n8n Overview](/guides/integrations/n8n)**
+
+## Using the Directus Node (Actions)
+
+The Directus node lets you perform actions on your Directus data. It works with three types of resources: **Items**, **Users**, and **Files**.
+
+## Available Actions
+
+Quick reference of all available actions organized by resource type:
+
+| Resource | Operation | Description |
+|----------|-----------|-------------|
+| **Items** | Create | Add a new item to a collection |
+| **Items** | Get | Retrieve a single item by ID |
+| **Items** | Get Many | Retrieve multiple items with optional filters |
+| **Items** | Update | Modify an existing item |
+| **Items** | Delete | Permanently remove an item |
+| **Users** | Invite | Send an invitation to a new user |
+| **Users** | Get | Retrieve a single user by ID |
+| **Users** | Get Many | Retrieve multiple users with optional filters |
+| **Users** | Update | Modify an existing user |
+| **Users** | Delete | Permanently remove a user |
+| **Files** | Upload a File | Upload a file from binary data |
+| **Files** | Import a File | Import a file from a URL |
+| **Files** | Get | Retrieve a single file by ID |
+| **Files** | Get Many | Retrieve multiple files with optional filters |
+| **Files** | Update | Modify file metadata |
+| **Files** | Delete | Permanently remove a file |
+
+---
+
+## Common Operations
+
+Most operations follow a similar pattern across resources. Set the **Resource** type (Item, User, or File), choose the **Operation**, and configure the required fields.
+
+### Create, Update, Delete
+
+These operations work similarly across all resources:
+
+- **Create**: Set Resource → Operation to Create → Select Collection (Items only) → Fill in fields → Click **Add Field** for additional fields
+- **Update**: Set Resource → Operation to Update → Enter ID → Update desired fields
+- **Delete**: Set Resource → Operation to Delete → Enter ID
+
+**Note for Items**: When creating or updating items, you must select the **Collection** first. For Users and Files, no collection selection is needed.
+
+::callout{icon="material-symbols:warning-rounded" color="warning"}
+**Permanent Deletion**
+Delete operations permanently remove data. Make sure this is what you want to do!
+::
+
+### Get Operations
+
+- **Get**: Set Resource → Operation to Get → Enter ID → Optionally select **Fields** to return
+- **Get Many**: Set Resource → Operation to Get Many → Optionally add filters → Set **Limit** → Optionally select **Fields**
+
+**Note for Items**: Select the **Collection** before configuring filters.
+
+## Resource-Specific Operations
+
+### Items
+
+Items are content entries in your Directus collections (blog posts, products, pages, etc.). All standard operations require selecting a **Collection** first.
+
+**Example**: Create a blog post
+- Collection: `posts`
+- Fields: `title`, `content`, `status`
+
+### Users
+
+#### Invite a User
+
+Set **Resource** to **User** → **Operation** to **Invite** → Enter **Email** → Select **Role**.
+
+All other operations (Get, Get Many, Update, Delete) follow the standard pattern above.
+
+### Files
+
+#### Upload a File
+
+Set **Resource** to **File** → **Operation** to **Upload a File**. The file must come from a previous node that outputs binary data (like an HTTP Request node). Optionally set **Title**, **Description**, and **Folder**.
+
+#### Import a File from URL
+
+Set **Resource** to **File** → **Operation** to **Import a File** → Enter **File URL** 
+
+All other operations (Get, Get Many, Update, Delete) follow the standard pattern above.
+
+---
+
+## Tips and Best Practices
+
+### Using Expressions
+
+You can use n8n expressions to reference data from previous nodes:
+
+- `{{ $json.id }}` - Get the ID from the previous node
+- `{{ $json.title }}` - Get the title field
+- `{{ $json.email }}` - Get the email field
+
+This is especially useful when chaining Directus nodes together. For example, use `{{ $json.id }}` to update an item that was just created in a previous node.
+
+### Field Selection
+
+When getting items, you can select specific fields to return. This is helpful when:
+
+- You only need certain information
+- You want to reduce the amount of data transferred
+- You're working with large collections
+
+::callout{icon="material-symbols:info-outline"}
+**Performance Tip**
+Selecting only the fields you need reduces data transfer and improves workflow performance, especially with large collections.
+::
+
+### Simplify Option
+
+For **Get Many** operations on Users and Files, use the **Simplify** option to get only the most commonly used fields. This makes the data easier to work with in subsequent nodes.
+
+
+
+
+
+---
+
+## Troubleshooting
+
+When working with Directus API through n8n, you may encounter various error codes. For a comprehensive list of Directus error codes and their meanings, refer to the [official Directus Error Codes documentation](https://directus.io/docs/guides/connect/errors).
+
+### Error Handling
+
+If you get errors:
+
+1. **Permission Errors**: Check that your Directus API token has the right permissions
+2. **Not Found Errors**: Verify that the collection, item ID, or user ID exists
+3. **Connection Errors**: Make sure your Directus URL is correct and accessible
+
+
+### Getting Help
+
+If you encounter issues:
+
+1. **For Directus-specific questions:** Ask for help in the [Directus Community](https://community.directus.io/)
+2. **For n8n-specific questions:** Visit the [n8n Community Forum](https://community.n8n.io/) or check [n8n Documentation](https://docs.n8n.io/)
+3. **For API connection issues:** Verify your Directus configuration and permissions
+
+---
+
+## Next Steps
+
+- **[← Back to Overview](/guides/integrations/n8n)** Return to the integration overview
+- **[Learn about Directus Triggers →](/guides/integrations/n8n/directus-n8n-triggers)** Set up automated workflows
+
+
+
+
+
+
+
+
+
+
+
+