Acquia Source customers can use external AI-powered code editors such as Cursor, Claude Code, Replit, or Lovable to quickly create components of a page in Drupal Canvas.

Use the following checklist to create components of a page with AI:

Configuring an API client in Acquia Source

• In a terminal window, run the following command to install the CLI tool:

  copy

  npm install @drupal-canvas/cli -g

• Access your site.
• In the left sidebar, click API > API clients.

• Click Add API client to start creating a new client.

  If you do not want to create a new client, you can edit an existing client.

• In the Label field, enter a label.

• In the Client ID field, enter a client ID.

  Make a note of the client ID and save it to a secure location.

• Select the Client Credentials checkbox and add canvas:asset_library and canvas:js_component as scopes.

• In the User field, configure a user to serve as the author of actions made by this client.

  Important

  • Do not use the anonymous user.
  • The permissions associated with the roles of the user that you configure in this field are ignored for authorization.
• Save the client to generate credentials.

Creating a local codebase

• In a terminal window, run the following command to invoke the latest version of the Drupal Canvas create tool published on npm:

  copy

  npx @drupal-canvas/create@latest

• Scaffold a template repository called Nebula.

  This repository contains the default UI components for Acquia Source and is located at [email protected]:acquia/nebula.git.

• Verify that the scaffolded repository contains all the folders from the template repository.

  The repository includes the ruler/rules folder, which contains AI instructions written to build code components and provide context and prompts for AI coding agents.

Creating components with an AI agent

• From the scaffolded repository, run the following command to apply the Ruler tool with Cursor as the preferred AI coding agent:

  copy

  npx ruler apply --agents=cursor

  The command creates an agents.md file compatible with Cursor.

• Run the following command to open Cursor.

  copy

  cursor .

  Cursor displays all files and folders of the local codebase, which include:

  • Storybook setup that serves as the local development environment
  • Example component
  • The env file that connects the new site to the Drupal Canvas CLI tool
  • The Drupal Canvas CLI tool to synchronize components between the local environment, the Drupal environment, and the Source environment
  • A Vite plugin to automatically configure the JSON API client for executing requests against the Drupal website, mirroring the in-browser code editor in Drupal Canvas
  • A Drupal Canvas recommended eslint.config file to validate code against standards required for it to work in Drupal Canvas

• In the AI Sidebar of Cursor, type Build this page: <page URL>.

  <page URL> is the URL of the page whose components are to be created in Drupal Canvas.

• Press Enter.

  The AI agent builds the components, validates them against the rules defined in the eslint.config file, and fixes any linting errors. 

• Open the Storybook build in a standalone browser and verify the components.
• Switch back to Cursor.

• In the AI Sidebar of Cursor, type Upload all these components to Drupal Canvas.

  The components are created in the new Acquia Source site and are displayed in the Components panel.

• Do the required changes in the components of the page.

Creating components with AI