Intro

This article discusses the usage of the AI writing assistant.

The AI writing assistant streamlines interactions with generative AI, helping users complete tasks more efficiently and making the experience intuitive and valuable for them.

The AI writing assistant is available within an input field, text area, or rich text editor component to assist users in creating, iterating, and improving their text input through quick prompts. These instructions for generative AI are crafted by experts known as prompt engineers, who focus on prompt quality and achieving the most optimal output. The AI writing assistant menu provides writing-specific prompts such as Change Tone, Adjust Length, Translate, and Make Bulleted List, which users can apply to the entire text.

For more information on various prompt patterns, refer to our guidance on designing effective AI prompts.

AI writing assistant applied to an input field

AI writing assistant applied to a rich text editor

When to Use

Use the AI writing assistant:

For repetitive text writing and editing tasks.
To spark creativity with diverse, unexpected AI outputs.
To enhance and speed up text iteration and refinement.

Don't

Don’t use the AI writing assistant:

For non-AI functions.
For non-text editing tasks.
Together with the button or menu for quick prompts.
For personalized or customized outputs. Use guided prompts, custom prompts, or Joule instead.
Where AI-assisted editing adds no value, for example:
- Pre-populated fields with confident AI recommendations.
- Unpredictable user intent.
- Lack of context or data for high-quality results; consider using guided prompts, custom prompts, or Joule instead.

Use the AI writing assistant with the AI notice guideline to inform users they’re interacting with AI.
Make sure that the language used by the AI agent is unbiased and inclusive. It should also correspond to the company tone and identity.
Use recommended AI action labels and keyboard shortcuts.
Ensure text area and rich text editor components have the proper minimum height to accommodate the AI writing assistant.
Prioritize AI value and performance:
- Enable the AI writing assistant only on key fields that benefit from creative or iterative suggestions.
- Coordinate with your product team to limit AI prompts based on user needs and subscription costs.
- Use character limit as parameter for content generation to reduce subscription costs and improve user outcomes.

Components

The following components are new and designed to enable the AI writing assistant capabilities:

Versioning
AI writing assistant toolbar

The AI writing assistant pattern extends the following components to enable new AI-specific interactions:

Within input

In a single-line input, the AI writing assistant includes the following components:

AI icon menu button: Embedded within the input field, the button indicates AI writing assistance and offers a menu with AI prompts.
Menu: Popover menu consisting of AI prompts configured by product teams.
Versioning: Enables users to navigate through the different versions of text. Positioned within the menu, it includes:
a. Version indicator
b. Previous Version button for navigation
c. Next Version button for navigation

Anatomy of the AI writing assistant for single-line input

Within a text area or rich text editor

In the text area and rich text editor components, the AI writing assistant includes the following components:

AI writing assistant toolbar: Embedded within the text area or rich text editor, the toolbar spans the entire width of the parent component. The AI icon menu button is shown alongside the performed AI prompt label and versioning elements when supported.
Versioning: Enables users to view different versions of AI-generated content. Positioned within the AI writing assistant toolbar, it includes:
a. Previous Version icon button for navigation
b. Version indicator
c. Next Version icon button for navigation
Performed AI prompt: Label displaying the AI prompt applied to this version of the content. The prompt label is shown to the right of the versioning elements when available.
AI icon menu button: Positioned within the AI writing assistant toolbar, the button indicates AI writing assistance and provides a menu with AI prompts.

Anatomy of the AI writing assistant for a text area or rich text editor

Behavior and Interaction

When the user focuses on an AI-enabled field, the AI writing assistant appears within the component. Choosing the AI icon menu button opens the AI writing assistant menu, allowing users to generate content or refine existing text.

Interface displaying a form for Create assignment. On clik on the first field AI writing assistant appears inside the field. On click on the next field writing assistant moves from the prevous field to the current fied on focus.

AI writing assistant on a form

Content generation in input

Starting the generation process

The AI icon menu button opens the menu for the AI writing assistant prompts, allowing the user to select the Generate AI action.

Input field with a 'Title:’ label and placeholder text 'Write a descriptive title.' An AI button is located on the right-hand side of the input field, displaying an opened menu with the 'Generate' option and the shortcut 'Ctrl+Enter.’

Initiating the AI writing assistant for an input

During generation

Busy indicator: The input shows a busy indicator, informing the user that the AI is processing the request. Once the generation starts, the busy indicator is replaced by text streaming - AI-generated text that appears token by token in the input.
Stop Generating icon button: The AI icon menu button changes to a Stop Generating icon button, allowing the user to halt the AI process at any time. If the user chooses this button, the input reverts to its previous state.

Input field with a ’Title:’ label and busy indicator overlaying the field. Stop generating button is located on the right-hand side of the input field where menu button previously was.

Generating content for an input

After generation
When generation is complete, the new text is displayed. A version control is embedded in the menu for refinement. The versioning element appears when an AI prompt is applied to a populated field, or when more than one AI prompt is applied to the same field.

Input field with a 'Title:’ label and AI generated text ’AI Design Fellowship’, shown. An AI button is located on the right-hand side of the input field.

Generation completed

Content generation in a text area or rich text editor

Starting the generation process

The AI icon menu button, located in the AI writing assistant toolbar, opens the menu for the AI writing assistant prompts, allowing the user to choose the Generate AI action.

The AI writing assistant integrated within the rich text editor interface, which includes a placeholder text 'Write your message here.' An AI button featuring a sparkles icon is located on the right-hand side of the toolbar showing an open menu with a 'Generate' option, accessible via the shortcut 'Ctrl+Enter.'

AI writing assistant in the rich text editor During generation

Busy indicator: The text area shows a busy indicator, informing the user that the AI is processing the request. Once the generation starts, the busy indicator is replaced by text streaming.
AI writing assistant toolbar: Embedded within the text area or rich text editor, the toolbar allows the user to see the applied prompt and the Stop Generating action.
Stop Generating icon button: The AI icon menu button changes to a Stop Generating icon button, allowing the user to halt the AI process at any time. If the user chooses this button, the text area reverts to its previous state.

Rich text editor interface with AI writing assistant during generation process with key elements labeled: 1. Text area with busy indicator. 2. AI writing assistant toolbar at the bottom showing 'Generating text.' 3. AI button on the right side of the toolbar, now showing a stop generating button.

Generating content in the rich text editor

After generation
Once the generation process is completed, the new text is displayed in the text area.

AI menu options now include recommended AI writing assistant quick prompts, which can be applied to the entire text.

Generation completed

See busy indicator for when and how to display it during content generation.

Refining

Users can iterate and refine the generated text as needed by applying more AI writing assistant prompts. The number of prompts should be determined by your product team, as it affects the customer’s AI subscription costs.

AI writing assistant completed generation of content within the rich text editor

Versioning

The versioning elements appear in the AI writing assistant when an AI prompt is applied to a populated field, or when more than one AI prompt is applied to the same field. If no prompts have been used, the versioning elements are hidden.

If versioning is supported, the versioning elements appear inside the menu for input fields. In text areas or rich text editors, the versioning elements appear in the toolbar.

Each time new content is generated through an AI prompt, a new version is created and the version number updates. The Previous Version and Next Version icon buttons adjust to the appropriate states (regular or disabled). If the user adds text, applies formatting or manually edits the generated text, these changes are retained within the version and won’t create new versions.

After form field validation, the value state will remain within each version.

After the first generation, clicking the AI button opens a menu with various AI prompts for refining the text, version indicator showing '2/2', previous version button and next version button for navigation between the versions of text.

Versioning for an input within the menu of the AI writing assistant

After the first generation, the AI writing assistant toolbar shows the version indicator showing '3/3', previous version button and next version button for navigation between the versions of text, the selected AI prompt label and the AI button. Clicking the AI button opens a menu with various AI prompts for refining text.

AI writing assistant after generating content within the rich text editor

guideline

Align with your product team on the use of the AI writing assistant:

To manage costs and sustainability, follow product team guidance on the number of prompts users can apply in a given use case.
Define the relationship between global AI actions and the AI writing assistant version control.
If versioning functionality is not supported, we recommend that product teams add a warning dialog to ensure users are aware of potential content loss when applying more prompts to fine-tune the content.

Quick prompts

Using AI actions

To ensure a consistent user experience across all SAP products, we recommend using the AI writing assistant prompts listed in the terminology section below, as long as they align with your product use case.

We don’t recommend using Make Bulleted List and Adjust Length prompts for single-line input fields.

Grouping

For guidance on menu and submenu terminology, see quick prompts – grouping and the terminology section below.

Handling errors

If the AI writing assistant prompt is interrupted or fails, follow the guidance for error messages from the message handling pattern. For consistent user experiences, we suggest using the following error message:

“There was a problem generating your content. Please try again.”

Terminology

The following guidance is based on the default labels provided in the quick prompts article. We strongly recommend maintaining consistency and user familiarity by following the suggested wording. Only change the default text if absolutely necessary for your specific use case.

Recommended AI UI text for the AI writing assistant

<div> <div>Label for Menu Items</div> <div>Text for Performed AI Prompt</div> <div>Description</div> </div> <div> <div>Generate</div> <div>Generated Text</div> <div>Creates first text version.</div> </div> <div> <div>Regenerate</div> <div>Regenerated Text</div> <div>Regenerates the text using the same prompt.</div> </div> <div> <div>Fix Spelling and Grammar</div> <div>Fixed Spelling and Grammar</div> <div>Corrects errors in spelling and grammar.</div> </div> <div> <div>Rewrite Text</div> <div>** choose performed AI prompt for applied submenu action</div> <div>Changes the structure of the text.</div> </div> <div> <div>Adjust Length</div> <div>** choose performed AI prompt for applied submenu action</div> <div>Adjusts the length of the text.</div> </div> <div> <div>Make Bulleted List</div> <div>Made Bulleted List</div> <div>Organizes information into a list.</div> </div> <div> <div>Change Tone</div> <div>** choose performed AI prompt for applied submenu action</div> <div>Adjusts the style or emotional quality of the text.</div> </div> <div> <div>Translate</div> <div>Translated to < Language # ></div> <div>Converts text from one language to another.</div> </div>

<div> <div>Menu Items with Submenu</div> <div>Labels for Submenu Items</div> <div>Text for Performed AI Prompt</div> <div>Description</div> </div> <div> <div>Rewrite Text</div> <div>Simplify</div> <div>Simplified Text</div> <div>Makes text easier to understand.</div> </div> <div> <div></div> <div>Expand</div> <div>Expanded Text</div> <div>Elaborates on the content, providing more detail or depth.</div> </div> <div> <div></div> <div>Summarize</div> <div>Summarized Text</div> <div>Condenses information while retaining the key points.</div> </div> <div> <div>Change Tone</div> <div>Make More Casual</div> <div>Made More Casual</div> <div>Makes text less formal.</div> </div> <div> <div></div> <div>Make More Professional</div> <div>Made More Professional</div> <div>Makes text more formal.</div> </div> <div> <div>Adjust Length</div> <div>Make Shorter</div> <div>Shortened Text</div> <div>Reduces the length of the text.</div> </div> <div> <div></div> <div>Make Longer</div> <div>Lengthened Text</div> <div>Increases the length of the text.</div> </div> <div> <div>Translate</div> <div>Language 1</div> <div>Translated to < Language 1 ></div> <div>Translates text into selected language.</div> </div> <div> <div></div> <div>Language 2</div> <div>Translated to < Language 2 ></div> <div>Translates text into selected language.</div> </div>

Best practices

For prompts not covered above, apply the following guidelines:

Use an imperative verb.
Keep AI action labels as short and clear as possible while prioritizing clarity for users.
Use the same AI action labels consistently.

Responsible AI

Responsible AI guidance for the AI writing assistant extends the following guidance:

Appropriate use of the AI writing assistant

To ensure responsible use, carefully assess which prompt types suit your use case. Remember that the AI writing assistant uses quick prompts. These are predefined AI prompts, crafted by prompt engineers, and provided by the system to save users from writing their own.

Use the AI writing assistant only when it enhances user experience by sparking creativity, improving and refining text, accelerating delivery, and improving user confidence and outcome quality.

Avoid using this pattern when the AI lacks the context to produce high-quality outcomes; use guided or custom prompts or a combination instead.

For guidance on menu and submenu terminology, see quick prompts – grouping and the terminology section above.

Building trust

Transparency

Ensure users know they’re interacting with AI when they use the AI writing assistant. Follow the provided pattern guideline, incorporating recommended components and patterns, such as the AI icon, AI menu button, and AI notice. Use consistent terminology.

For more information, refer to the responsible AI guidance within the quick prompt guidelines.

Fairness and inclusion

Ensure our AI avoids using harmful stereotypes from its training data. To achieve this, it’s crucial to craft prompts carefully, rigorously evaluate data sources, regularly test LLMs for bias and fairness, and use methods like blocklists.

For more information, refer to the guidance on building trust with generative AI.

Designing for AI safety

Fail-safes

Ensure users are able to cancel generative AI actions in progress. Provide transparency into AI errors and interruptions using the message strip pattern.

Give users control over the system

People should always have control of what’s being created by generative AI applications, including the ability to turn it off or to override its decisions.

Designing for AI sustainability

Energy consumption

Generative AI models use a lot of energy. This can have a significant environmental impact since the energy used to power these models comes from fossil fuels. Be proactive and mindful of keeping SAP products energy-efficient by:

Only applying the AI writing assistant when it delivers measurable value to users and customers.
Limiting the number of times users can apply AI writing assistant prompts to an input field or text area.
Using recommended quick prompts for text editing and limiting them to those most relevant to your use case.

For more information, refer to the guidance on designing for sustainable generative AI experiences.

Helpful Terms

A list of specific words, phrases, or types of content that are filtered out to prevent the AI from producing inappropriate outputs.

Fine-tuning
Fine-tuning LLMs is the resource-intensive process of customizing a pre-trained language model on specific tasks or datasets to make it more proficient and accurate in generating relevant text.

Generative AI
A type of artificial intelligence that, when instructed by a user, can generate novel content — such as text, images, sound, or video — based on patterns learned from training data.

Quick prompt
Predefined instructions provided by the system and expertly crafted by prompt engineers, eliminating the need for users to write their own prompts.

Elements and Controls

AI Button (guidelines)
AI Icon (guidelines)
Menu (guidelines)
Quick Prompts (guidelines)
Input (guidelines)
Text Area (guidelines)
Rich Text Editor (guidelines)
Design Principles for Generative AI (guidelines)
Building Trust with Generative AI (guidelines)
Designing Safety into Generative AI Experiences (guidelines)
Designing for Sustainable Generative AI Experiences (guidelines)
SAP Global AI Ethics Policy (guidelines)

Implementation

Button (SAPUI5 samples)
AI Button (UI5 web component documentation)

Visual Design

Button (visual design)
Button (interaction design, web component)