AI Powered Angular DOCX Editor

A sample project showcasing the Angular DOCX Editor (Document Editor) with AI assistance for generating, refining, and translating content.

Introduction

This sample demonstrates document editing with AI-assisted content generation using the Syncfusion^® Angular DOCX Editor (Document Editor) in the client and an ASP.NET Core Web API.

Features

AI-Assisted Editing

The AI Assist experience is integrated into the Angular DOCX editor and communicates with Azure OpenAI through the ASP.NET Core API.

The sample supports:

• AI content generation.
• Rephrasing selected content.
• Grammar improvement.
• Translation.

The Azure OpenAI API key remains on the server and is not exposed to the Angular client.

---

Prerequisites

Install the following before running the sample:

1. .NET 10 SDK
2. Node.js and npm
3. A valid Syncfusion license key for the Syncfusion components used by the sample.
4. An Azure OpenAI resource with a deployed chat-capable model if the AI features are required.

---

Configuration

Azure OpenAI Configuration

Azure OpenAI configuration is located in:

Server-side/src/appsettings.json

The repository contains the following configuration section. Configure the chat settings for the AI functionality:

"AzureOpenAI": {
  "ChatEndpoint": "",
  "ChatApiKey": "",
  "ChatDeploymentName": ""
}

---

Web API Base URL

The Angular application gets the ASP.NET Core API URL from:

Angular/src/app/app.component.ts

The default configuration is:

const SERVICE_URL = 'http://localhost:62869/api/DocumentEditor/';

If the Web API is deployed to Azure, update SERVICE_URL.

For example:

const SERVICE_URL = 'https://your-api.azurewebsites.net/api/DocumentEditor/';

---

How to Run the Sample

1. Run the ASP.NET Core Web API

Open a terminal in:

Server-side/src/

Restore the NuGet packages:

dotnet restore

Build the project:

dotnet build

Run the API:

dotnet run

The configured project profile uses:

http://localhost:62870/

Keep the API running.

---

2. Run the Angular Client

Open another terminal in:

Angular/

Install the npm dependencies:

npm install

Start the Angular development server:

npm start

Angular CLI will display the client URL in the terminal.

Open the displayed URL in a browser.

---

Resources

• Product page: Syncfusion Angular DOCX Editor

• Documentation: Syncfusion Angular DOCX Editor - Documentation

• Online demo: Syncfusion Angular DOCX Editor - Online demo

Support and feedback 

For any other queries, reach our Syncfusion® support team or post the queries through the community forums. 

Request new feature through Syncfusion® feedback portal. 

License

This is a commercial product and requires a paid license for possession or use Syncfusion's licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. You can purchase a licnense here or start a free 30-day trial here.