> ## Documentation Index > Fetch the complete documentation index at: https://dhiwisepvtltd-5e04e6a4.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Directus > Plug Directus into Rocket.new to build content-driven sites, product catalogs, and multi-language storefronts with a flexible headless CMS. Describe the content experience you want in chat and Rocket generates pages, listing views, and dynamic layouts that pull directly from your Directus collections. ## What you can do > **Blog or content site** > > Publish articles, tutorials, and news posts managed entirely through Directus. > **Product catalog** > > Display products with images, descriptions, pricing, and variant options from Directus. > **Multi-language site** > > Serve content in multiple languages using Directus translations with a language switcher. > **FAQ or knowledge base** > > Searchable help center powered by Directus content, grouped by category. > **Rich media collections** > > 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](https://directus.io/docs/guides/ai/mcp/installation#generate-access-token) **1. Open your User Profile** Open your Directus project and go to your **User Profile**. **2. Generate a new token** Scroll to the **Token** field and click **Generate New Token**. **3. Copy the token and URL** Copy the token and note your **project URL** (e.g., `https://your-project.directus.app`). > [!WARNING] > > 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 **Web Browser** 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. ![Rocket chat panel showing a Connect prompt for Directus.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/connectors/directus/web-browser/directus-chat-light.webp) ![Rocket chat panel showing a Connect prompt for Directus.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/connectors/directus/web-browser/directus-chat-dark.webp) Directus connection prompt in chat **Option 2: From the Connectors tab** Click the **`...`** button in the preview toolbar, then select **Connectors**. Open Connectors from the toolbar Click the **Directus** card, then click **Connect**. ![Connectors panel showing the Directus card with a Connect button.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/connectors/directus/web-browser/directus-connectors-tab-light.webp) ![Connectors panel showing the Directus card with a Connect button.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/connectors/directus/web-browser/directus-connectors-tab-dark.webp) Directus card in the Connectors panel **After clicking Connect** A popup opens. Enter your **Project URL** and **Access Token**, then click **Save**. ![Popup showing Project URL and Access Token fields for Directus.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/connectors/directus/web-browser/directus-popup-light.webp) ![Popup showing Project URL and Access Token fields for Directus.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/connectors/directus/web-browser/directus-popup-dark.webp) Directus credentials popup 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. ![Directus card in edit state showing Disconnect option.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/connectors/directus/web-browser/directus-disconnect-light.webp) ![Directus card in edit state showing Disconnect option.](https://mintlify.s3.us-west-1.amazonaws.com/dhiwisepvtltd-5e04e6a4/images/build/connectors/directus/web-browser/directus-disconnect-dark.webp) Edit or disconnect Directus **Mobile App** 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? > **[Strapi](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/connectors/strapi.md)** > > Comparing headless CMS options? See how Strapi works with Rocket. > **[Supabase](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/connectors/supabase/overview.md)** > > Pair Directus content with Supabase auth and user management. > **[Resend](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/connectors/resend.md)** > > Send notification emails when new content is published from Directus. > **[Netlify](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/connectors/netlify.md)** > > Deploy your Directus-powered site to Netlify with one prompt. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.