Code Assistant

The configuration of FirstSpirit AI is essential for using the Code Assistant.

The Code Assistant is part of the FirstSpirit AI Assistant Suite. You can use the Code Assistant to analyze:

• HTML code in the Template Development in Content Creator
• JavaScript code in the Media Management
• CSS code in the Media Management

The AI-based assistant analyzes your code and highlights areas for improvement. You can use the fully functional prompt from Crownpeak or modify it to define the project-specific topics considered in the analysis.

Configuration

To use the Code Assistant in Template Development for ContentCreator, you need to configure FirstSpirit AI.

Like the other assistants in the FirstSpirit AI Assistant Suite, you can configure the Code Assistant prompts in the ServerManager. Additionally, with the appropriate permissions, you can edit prompts directly in the ContentCreator.

FirstSpirit offers a preconfigured functional prompt for the Code Assistant depending on the use case.

The prompt for the analysis of HTML code provides suggestions for improvement in the following areas:

• Accessibility
• Search Engine Optimization
• Web Development Best Practices

The prompt for the analysis of JavaScript code provides suggestions for improvement in the following areas:

• Code Readability and Maintainability
• Modern JavaScript Best Practices
• Code Efficiency and Performance
• Potential Bugs and Logical Issues
• Security and Code Safety

The prompt for the analysis of CSS code provides suggestions for improvement in the following areas:

• Clean Code
• Selector Efficiency and Specificity
• Correct Usage of CSS Properties and Shorthands

We recommend not to modify the prompts provided by Crownpeak.

If you need to customize a prompt, we recommend duplicating a preset prompt and adjusting it according to your needs.

For more information and tips on creating and editing prompts, see here.

Handling

You can analyze HTML code with the Code Assistant in both full-screen mode and preview in the Template Development for ContentCreator. Moreover you can analyze JavaScript and CSS code in the Media Management. Problem areas in the code are thus easily visible in the Code Assistant report, and you can access them with a click.

You can use the Code Assistant in the following areas of the Template Development in ContentCreator:

• in full-screen view via the Code Assistant icon
  
• in preview via the Code Assistant icon
  

To use the Code Assistant in the Media Management for JavaScript and CSS code use the Code Assistant icon in edit mode.

To analyze code with the Code Assistant:

• Open a template in the template development for ContentCreator in full-screen view or preview or a JavaScript or CSS file in the Media Management.
• Click on the Code Assistant icon.
  → The Code Assistant report opens, and the page analysis starts automatically.
  
  → Entries marked with indicate issues in your code. Each entry describes an improvement opportunity as well as the category assigned to the improvement opportunity.

If no improvement suggestions are displayed for the current template in Template Development in ContentCreator, uncheck Only for current template to see improvement suggestions for the entire page.

• Optional: Configure the Code Assistant prompt.
• If there are specific issues with an entry, you can expand the entry using the .
  → The reference name and line number of the affected code file will be displayed.
  
• Click on the reference name to go directly to the affected file and line.
  → If you are in fullscreen view of the Template Development in ContentCreator and the affected template is not currently open, a new tab with the affected template will open. If you are in a preview, a new dialog window will open.
• Hover the mouse pointer over the next to the affected line.
  → An explanation of the issue regarding the current line will be displayed.