Share via

Create an artificial intelligence-generated content (AIGC) add-in in Word

Browse code

A Word document that contains content generated by the add-in.

This sample shows how to use a Word add-in to insert predefined or AI-generated content into a document. You'll learn how to:

  • Uses the insertFileFromBase64 method to import the document template.
  • Uses the insertParagraph, insertComment, and insertFootnote methods to insert predefined content or content generated by Azure OpenAI Service.
  • Uses the insertInlinePictureFromBase64 method to insert a sample image into the document.
  • Uses the Style API to customize the document.

How to run this sample

Prerequisites

  • Download and install Visual Studio Code.
  • Install the latest version of the Office Add-ins Development Kit into Visual Studio Code.
  • Node.js (the latest LTS version). Visit the Node.js site to download and install the right version for your operating system. To verify if you've already installed these tools, run the commands node -v and npm -v in your terminal.
  • Microsoft Office connected to a Microsoft 365 subscription. You might qualify for a Microsoft 365 E5 developer subscription through the Microsoft 365 Developer Program, see FAQ for details. Alternatively, you can sign up for a 1-month free trial or purchase a Microsoft 365 plan.
  • (Optional) Azure OpenAI Completion Deployment. We're using completion model to generate content in this sample. You might need to update the API call code if you want to use other Chat models like gpt4o.

Run the add-in from the Office Add-ins Development Kit

  1. Create a new project with the sample code.

    Open the Office Add-ins Development Kit extension and view samples in the Sample gallery. Select the Create button in the top-right corner of the sample page. The new project will open in a second Visual Studio Code window. Close the original VSC window.

  2. Open the Office Add-ins Development Kit.

    Select the The Office Add-ins Development Kit icon in the activity bar of Visual Studio Code. icon in the Activity Bar to open the extension.

  3. Preview Your Office Add-in (F5).

    Select Preview Your Office Add-in(F5) to launch the add-in and debug the code. In the drop down menu, select the option Desktop (Edge Chromium).

    The 'Preview your Office Add-in' option in the Office Add-ins Development Kit's task pane.

    The extension checks that the prerequisites are met before debugging starts. The terminal will alert you to any issues with your environment. After this process, the Word desktop application launches and opens a new workbook with the sample add-in sideloaded. The add-in automatically opens as well.

    If this is the first time that you have sideloaded an Office Add-in on your computer (or the first time in over a month), you may be prompted to delete an old certificate and/or to install a new one. Agree to both prompts. The first run requires installing dependency of this project, which might take 2~3 minutes or longer. During this time, there might be a dialog pop up at the lower right of the VSC screen. You should not interact with this dialog before the Office application launched.

  4. Stop Previewing Your Office Add-in.

    Once you are finished testing and debugging the add-in, select the The Office Add-ins Development Kit icon in the activity bar of VSCode icon and then select Stop Previewing Your Office Add-in. This closes the web server and removes the add-in from the registry and cache.

Use the sample add-in

  1. In the add-in's task pane, select one of the following options.
    • Select Generate sample content to insert sample content into the document.
    • Select Create custom content to create your own content using a template.
  2. Perform the following steps to add a title, comment, and footnote citation into the document.
    1. Hover over Add a title, Add a comment, or Add a footnote citation.
    2. Select Add a predefined title or Add a title generated by AI. If you select Add a title generated by AI, you must connect to your Azure OpenAI Service account by providing your endpoint, deployment, and API key.
  3. Select Add a sample image to insert an image into the document.
  4. Select Format the document to customize the document style.
  5. Select Back to return to the main page of the task pane.

Explore sample files

These are the important files in the sample project.

| .eslintrc.json
| .gitignore
| .vscode/
|   | extensions.json
|   | launch.json               Launch and debug configurations
|   | settings.json             
|   | tasks.json                
| assets/                       Static assets like image/gif
| babel.config.json
| manifest.xml                  Manifest file
| package.json                  
| README.md                     
| RUN_WITH_EXTENSION.md         
| src/                          Add-ins source code
|   | taskpane/
|   |   | components/           React components
|   |   | css/                  Task pane style
|   |   | taskpane.html         Task pane entry HTML
|   |   | index.tsx             Task pane React component
| webpack.config.js             Webpack config
| tsconfig.json

Troubleshooting

If you have problems running the sample, take the following steps.

  • Close any open instances of Word.
  • Close the previous web server started for the sample with the Stop Previewing Your Office Add-in Office Add-ins Development Kit extension option.
  • Try running again.

If you still have problems, see troubleshoot development errors or create a GitHub issue and we'll help you.

For information on running the sample on Word on the web, see Sideload Office Add-ins to Office on the web.

For information on debugging on older versions of Office, see Debug add-ins using developer tools in Microsoft Edge Legacy.

Make code changes

Once you understand the sample, make it your own! All the information about Office Add-ins is found in our official documentation. You can also explore more samples in the Office Add-ins Development Kit. Select View Samples to see more samples of real-world scenarios.

If you edit the manifest as part of your changes, use the Validate Manifest File option in the Office Add-ins Development Kit. This shows you any errors with the manifest's syntax.

Engage with the team

Did you experience any problems with the sample? Create an issue and we'll help you out.

Want to learn more about new features and best practices for the Office platform? Join the Microsoft Office Add-ins community call.

Copyright (c) 2024 Microsoft Corporation. All rights reserved. This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.