> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocket.new/llms.txt
> Use this file to discover all available pages before exploring further.
# Directus
> Connect Directus to Rocket and build content-driven apps, product catalogs, and multi-language sites: all from chat.
export const LlmsDirective = () =>
For the complete documentation index, see llms.txt.
For a lightweight markdown version of this page, append .md to the URL.
;
Describe the content experience you want in chat and Rocket generates pages, listing views, and dynamic layouts that pull directly from your Directus collections.
This connector is only available for **Next.js TypeScript** web build tasks.
## What you can do
Publish articles, tutorials, and news posts managed entirely through Directus.
Display products with images, descriptions, pricing, and variant options from Directus.
Serve content in multiple languages using Directus translations with a language switcher.
Searchable help center powered by Directus content, grouped by category.
Image-heavy collections like projects, case studies, or creative work with filtering and detail views.
## Before you connect
You need a running Directus instance and an access token.
**Get your Directus access token** from the Directus documentation.
Open your Directus project and go to your **User Profile**.
Scroll to the **Token** field and click **Generate New Token**.
Copy the token and note your **project URL** (e.g., `https://your-project.directus.app`).
Never paste your Directus access token directly into Rocket chat. Always use the secure connection flow. If you think your token has been exposed, regenerate it from your Directus User Profile.
## Connect Directus
You can connect from two places. Both do the same thing.
**Option 1: From chat**
Type a prompt that mentions Directus, for example `Connect Directus and build a blog listing page from my articles collection`. Rocket detects the intent and shows a **Connect** button inline. Click it to open the credentials popup.
**Option 2: From the Connectors tab**
Click the **`...`** button in the preview toolbar, then select **Connectors**.
Click the **Directus** card, then click **Connect**.
**After clicking Connect**
A popup opens. Enter your **Project URL** and **Access Token**, then click **Save**.
A green dot appears next to Directus when the connection is active.
**Update or disconnect**
Open [**Connectors > Directus**](#connect-directus) and click the card. Replace the existing credentials to update, or click **Disconnect** to remove the integration.
You can connect from two places. Both do the same thing.
**Option 1: From chat**
Type a prompt that mentions Directus. Rocket detects the intent and shows a **Connect** button inline. Tap it to open the credentials screen.
**Option 2: From the Connectors tab**
Tap the **More** button in the header, then tap **Integrations**. Tap the **Directus** card, then tap **Connect**.
**After tapping Connect**
Enter your **Project URL** and **Access Token**, then tap **Done** to save. A green dot appears next to Directus when the connection is active.
**Update or disconnect**
Go back to the **Directus** card in Integrations. Update your credentials anytime or tap **Disconnect** to remove the integration.
## Example prompts
| What you want | Prompt to use |
| :--------------- | :----------------------------------------------------------------------------------------------------- |
| Blog listing | `Show all articles from my Directus posts collection with thumbnails and publish dates.` |
| Detail page | `When a user clicks an article, open a detail page with the full rich-text body from Directus.` |
| Product catalog | `Create a product grid from my Directus products collection with images, prices, and a detail modal.` |
| Multi-language | `Add a language switcher that toggles content between English and Spanish from Directus translations.` |
| FAQ page | `Build an FAQ accordion from my Directus faqs collection, grouped by category.` |
| Search | `Add a full-text search bar to my Directus-powered blog listing page.` |
| Media gallery | `Display images from my Directus media collection in a responsive grid with lightbox preview.` |
| Filtered listing | `Show Directus products filtered by category with a sidebar navigation.` |
| Pagination | `Add pagination to my Directus blog listing, showing 10 posts per page.` |
| Admin view | `Create a simple admin table for my Directus collection with inline editing and a delete button.` |
## Tips
* **Choose token permissions carefully.** The access token inherits the permissions of the Directus user that generated it. Use a dedicated service account with scoped permissions for production apps.
* **Your access token is stored securely.** Rocket encrypts it at rest and never exposes it in client-side code.
* **Directus must be publicly reachable.** Local-only instances will not work. Your Directus URL must be accessible from the internet.
* **Deleting content must happen in Directus.** Rocket can create and update records, but content and asset deletion should be managed directly in your Directus admin panel.
* **One Directus project per Rocket project.** Each Rocket project connects to one set of credentials. Use different Rocket projects for different Directus instances.
* **Licensing.** Directus is licensed under [BSL 1.1](https://directus.io/docs/self-hosting/overview). Organizations with over \$5 million in total finances require a commercial license. Smaller organizations and individuals can use Directus commercially without a license.
## What's next?
Comparing headless CMS options? See how Strapi works with Rocket.
Pair Directus content with Supabase auth and user management.
Send notification emails when new content is published from Directus.
Deploy your Directus-powered site to Netlify with one prompt.