DEV Community: Arun Kumar Dorepally

Build an AI-Powered PPT Generator Using NestJS

Arun Kumar Dorepally — Thu, 13 Mar 2025 13:35:38 +0000

In this tutorial, I'll walk you through creating an AI-powered PowerPoint generator using NestJS. The goal is to:

Use Mistral AI to generate slide content based on a topic and slide count.
Convert the generated content into a PowerPoint presentation using pptxgenjs.
Structure the project using NestJS best practices.

We'll focus on four key files:

mistral.service.ts – Handles AI interaction.
ppt-generator.controller.ts – Handles incoming HTTP requests.
ppt-generator.service.ts – Creates PowerPoint files.
app.module.ts – Configures the app and connects modules.

1. Setting Up the Project

Step 1: Create a New NestJS Project

Install the NestJS CLI globally if you haven't already:

npm install -g @nestjs/cli

Create a new NestJS project:

nest new ai-ppt-generator

Move into the project directory:

cd ai-ppt-generator

Step 2: Install Dependencies

Install the required dependencies:

npm install axios pptxgenjs @nestjs/config

axios – For making HTTP requests to Mistral AI.
pptxgenjs – For generating PowerPoint files.
@nestjs/config – For loading environment variables.

Step 3: Set Up Environment Variables

Create a .env file in the root directory:

MISTRAL_BASE_URL=<Mistral AI API URL>
MISTRAL_API_KEY=<Mistral API Key>

Ensure .env is loaded by installing @nestjs/config.

2. Create the Mistral Module

We’ll create a dedicated module to handle AI-based content generation.

Create the Mistral Service

Create a mistral module and service:

nest generate module mistral
nest generate service mistral

This will create:

src/mistral/
├── mistral.module.ts
├── mistral.service.ts

Edit `mistral.service.ts`

Open mistral.service.ts and add the following logic:

import { Injectable } from "@nestjs/common";
import axios from "axios";

@Injectable()
export class MistralService {
  private readonly apiUrl = process.env.MISTRAL_BASE_URL;
  private readonly apiKey = process.env.MISTRAL_API_KEY;

  async generateSlideContent(
    topic: string,
    slideCount: number
  ): Promise<string[]> {
    const prompt = `Generate ${slideCount} slides about "${topic}". Each slide should have a title(preferably short title) and bullet points.`;

    try {
      const response = await axios.post(
        `${this.apiUrl}/v1/chat/completions`,
        {
          model: "mistral-small", // Options: 'mistral-small', 'mistral-large', 'codestral'
          messages: [{ role: "user", content: prompt }],
          max_tokens: 800,
        },
        {
          headers: {
            Authorization: `Bearer ${this.apiKey}`,
            "Content-Type": "application/json",
          },
        }
      );

      const content = response.data.choices[0].message.content;
      return content.split("\n"); // Split slides by paragraph
    } catch (error) {
      console.error("Error generating slide content:", error);
      throw new Error("Failed to generate slide content.");
    }
  }
}

Explanation

The generateSlideContent() method takes a topic and slide count.
It constructs a structured prompt.
Uses axios to send a POST request to the Mistral AI API.
Returns an array of slides from the API response.

3. Create the PPT Generator Module

Next, we'll create the module to handle PowerPoint file creation.

Create the PPT Generator Module & Service

Create the module and services:

nest generate module ppt-generator
nest generate controller ppt-generator
nest generate service ppt-generator

This will create:

src/ppt-generator/
├── ppt-generator.module.ts
├── ppt-generator.controller.ts
├── ppt-generator.service.ts

Edit `ppt-generator.service.ts`

Open ppt-generator.service.ts and add the following logic:

import { Injectable } from "@nestjs/common";
const PptxGenJS = require("pptxgenjs");

@Injectable()
export class PptGeneratorService {
  async generatePpt(slideData: string[]): Promise<Buffer> {
    const pptx = new PptxGenJS();

    if (slideData.length === 0) {
      slideData = ["No content generated"];
    }

    // Group slide content
    const groupedSlides: string[][] = [];
    let currentSlide: string[] = [];

    slideData.forEach((line) => {
      if (line.startsWith("Slide")) {
        if (currentSlide.length > 0) {
          groupedSlides.push(currentSlide);
        }
        currentSlide = [line];
      } else {
        currentSlide.push(line);
      }
    });

    if (currentSlide.length > 0) {
      groupedSlides.push(currentSlide);
    }

    // Create slides based on grouped data
    groupedSlides.forEach((slideContent) => {
      const slide = pptx.addSlide();

      // Add background
      slide.background = { color: "FFFFFF" };

      // Add title
      slide.addText(slideContent[0], {
        x: "5%",
        y: "5%",
        w: "90%",
        fontSize: 28,
        color: "0000FF",
        bold: true,
        align: "center",
      });

      // Add bullet points
      const bulletPoints = slideContent
        .slice(1)
        .map((point) => `${point}`)
        .join("\n");

      // Handle overflow and dynamic font size
      const fontSize = bulletPoints.length > 500 ? 20 : 24;
      const maxLength = 800;

      if (bulletPoints.length > maxLength) {
        const parts = bulletPoints.match(/(.|[\r\n]){1,800}/g) || [];
        parts.forEach((part, i) => {
          const subSlide = pptx.addSlide();

          subSlide.addText(`${slideContent[0]} (Part ${i + 1})`, {
            x: "5%",
            y: "5%",
            w: "90%",
            fontSize: 28,
            color: "0000FF",
            bold: true,
            align: "center",
          });

          subSlide.addText(part, {
            x: "5%",
            y: "20%",
            w: "90%",
            h: "65%",
            fontSize: fontSize - 2,
            color: "000000",
            align: "left",
            valign: "top",
          });
        });
      } else {
        slide.addText(bulletPoints, {
          x: "5%",
          y: "20%",
          w: "90%",
          h: "65%",
          fontSize,
          color: "000000",
          align: "left",
          valign: "top",
        });
      }
    });

    const data = (await pptx.write({ outputType: "uint8array" })) as Uint8Array;
    return Buffer.from(data);
  }
}

Explanation

Groups slide content into structured slides.
Creates slides using pptxgenjs.
Writes the presentation to a buffer and returns it.

Edit `ppt-generator.controller.ts`

Open ppt-generator.controller.ts and set up the endpoint:

import { Body, Controller, HttpStatus, Post, Res } from "@nestjs/common";
import { MistralService } from "src/mistral/mistral.service";
import { PptGeneratorService } from "./ppt-generator.service";

@Controller("ppt")
export class PptGeneratorController {
  constructor(
    private readonly mistralService: MistralService,
    private readonly pptGeneratorService: PptGeneratorService
  ) {}

  @Post("generate")
  async generatePpt(
    @Body() body: { topic: string; slideCount: number },
    @Res() res
  ) {
    try {
      const { topic, slideCount } = body;

      if (!topic || !slideCount || slideCount <= 0) {
        return res.status(HttpStatus.BAD_REQUEST).json({
          message:
            "Invalid input. Please provide a valid topic and slide count.",
        });
      }

      // Generate slide content using MistralAI
      const slideContent = await this.mistralService.generateSlideContent(
        topic,
        slideCount
      );

      // Split slides properly (trim to avoid empty strings)
      const slides = slideContent
        .map((slide) => slide.trim())
        .filter((slide) => slide.length > 0);

      if (slides.length === 0) {
        return res.status(HttpStatus.NO_CONTENT).json({
          message: "AI generated no valid content.",
        });
      }
      console.log(slides);
      // Generate PowerPoint file using updated pptx-genjs
      const pptBuffer = await this.pptGeneratorService.generatePpt(slides);

      // Send the file as a downloadable response
      res.set({
        "Content-Type":
          "application/vnd.openxmlformats-officedocument.presentationml.presentation",
        "Content-Disposition": `attachment; filename="generatedPPT.pptx"`,
      });

      return res.status(HttpStatus.OK).send(pptBuffer);
    } catch (error) {
      console.error("Error generating PowerPoint:", error);
      return res.status(HttpStatus.INTERNAL_SERVER_ERROR).json({
        message: "Failed to generate PowerPoint file.",
        error: error.message,
      });
    }
  }
}

Explanation

Accepts a POST request at /ppt/generate.
Calls generateSlideContent() to get AI-generated slides.
Passes content to PptGeneratorService to create a PPT file.
Sends the file as a response.

4. Connect Everything in `app.module.ts`

Open app.module.ts and register the modules:

import { Module } from "@nestjs/common";
import { ConfigModule } from "@nestjs/config";
import { PptGeneratorModule } from "./ppt-generator/ppt-generator.module";
import { MistralModule } from "./mistral/mistral.module";

@Module({
  imports: [
    ConfigModule.forRoot({ isGlobal: true, envFilePath: [".env"] }),
    PptGeneratorModule,
    MistralModule,
  ],
})
export class AppModule {}

Explanation

Loads environment variables globally.
Registers PptGeneratorModule and MistralModule.
Configures the app to connect all modules.

5. Running the Project

Start the project:

npm run start:dev

Test the Endpoint

Use a REST client like Postman to test the endpoint:

POST http://localhost:3000/ppt/generate
Body:

{
  "topic": "Artificial Intelligence",
  "slideCount": 5
}

6. Final Thoughts

Congratulations! You’ve built a fully functional AI-powered PPT generator using NestJS.

How It Works:

Mistral AI – Generates high-quality slide content using natural language processing.
PptxGenJS – Creates well-formatted PowerPoint presentations.
NestJS – Efficiently manages request flow and business logic.

Explore More

To explore the project further and deepen your understanding of the underlying technologies, check out these resources:

GitHub Repository: AI-PPT Generator – Complete source code and setup instructions.
Mistral AI Documentation: Mistral Completion Capabilities – Learn more about the API used for generating slide content.
PptxGenJS Documentation: PptxGenJS – Detailed documentation on the library used to create PowerPoint slides.
NestJS Documentation: NestJS – Official documentation to understand the framework’s core concepts and best practices.

Learn How to Create and Test a File Upload API using NestJS and Postman

Arun Kumar Dorepally — Thu, 15 Feb 2024 12:03:28 +0000

File Upload API Documentation using NestJS

Overview

This guide provides detailed instructions for implementing a file upload API using NestJS. The architecture consists of three key files:

file.module.ts: Manages module configuration and imports necessary dependencies.
file.controller.ts: Defines controller logic for processing file upload requests.
file.service.ts: Encapsulates core file upload business logic within the service layer.

Step-by-Step Implementation

1. Create file.module.ts:

// file.module.ts

import { Module } from '@nestjs/common';
import { MulterModule } from '@nestjs/platform-express';
import { FileController } from './file.controller';
import { FileService } from './file.service';

@Module({
  imports: [
    MulterModule.register({ dest: './uploads' }), // Configure file storage location
  ],
  controllers: [FileController],
  providers: [FileService],
  exports: [FileService], // Make FileService available to other modules
})
export class FileModule {}

Explanation:

This module imports MulterModule for file upload handling, configuring the storage destination (./uploads).
It registers the FileController and FileService, exporting the latter for wider access.

2. Create file.controller.ts:

// file.controller.ts

import { Post, UseInterceptors, UploadedFile, Controller } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { FileService } from './file.service';

@Controller('file') // Base route for file-related operations
export class FileController {
  constructor(private readonly fileService: FileService) {}

  @Post('upload') // Endpoint for uploading files
  @UseInterceptors(FileInterceptor('file')) // Intercept and handle file uploads
  async uploadFile(@UploadedFile() file: Express.Multer.File) {
    // Delegate file handling to the FileService
    return await this.fileService.uploadFile(file);
  }
}

Explanation:

This controller defines a POST endpoint (/file/upload) for file uploads.
The @UseInterceptors decorator employs FileInterceptor to intercept incoming files.
The @UploadedFile decorator injects the uploaded file data into the uploadFile method.
The uploadFile method calls the corresponding service method for further processing.

3. Create file.service.ts:

// file.service.ts

import { Injectable } from '@nestjs/common';
import { Express } from 'express';

@Injectable()
export class FileService {
  async uploadFile(file: Express.Multer.File) {
    // Add your specific file upload logic here, including:

    // 1. Validation (e.g., file size, type, MIME type)
    // ...

    // 2. Custom filename generation (optional)
    // ...

    // 3. Advanced storage logic (optional)
    // ...

    // 4. Return relevant information or perform further actions
    return {
      originalname: file.originalname,
      filename: file.filename,
      size: file.size,
      mimetype: file.mimetype,
    };
  }
}

Explanation:

This service contains the uploadFile method, responsible for core file upload logic.
You'll implement essential steps like:
- Validation: Enforce file size, type, MIME type restrictions.
- Custom filename generation: (Optional) Create unique filenames.
- Advanced storage logic: (Optional) Utilize diskStorage from Multer for more granular control.
- Returning information/performing actions: Return details about the uploaded file or execute further actions based on the upload.

Additional Notes:

Adjust import paths within files to match your project structure.
Implement robust error handling and validation for various upload scenarios.
Customize the file storage location and filename generation process.
Consider integration with cloud storage solutions for scalability and redundancy.
Thoroughly test your API with diverse file types, sizes, and edge cases.

Using the API:

Install NestJS and necessary dependencies (refer to your project's requirements).
Create the file.module.ts, file.controller.ts, and file.service.ts files with the provided code (adapted to your project).
Run your NestJS application.
Use tools like Postman or curl to test the API:
- Endpoint: POST http://localhost:3000/file/upload
- Body: Use form-data and include a file with the field name file.
- Expected Response: Details about the uploaded file or the result of additional actions.

Testing the API using Postman:

Install Postman:

If you don't have Postman installed, download and install it from Postman's official website.

Run Your NestJS Application:

Ensure that your NestJS application is up and running.

Open Postman:

Open the Postman application.

Create a New Request:

Click on the "New" button to create a new request.
Choose a request type (e.g., POST) and enter the API endpoint: http://localhost:3000/file/upload.

Configure the Request:

Select the Body tab.
Choose form-data as the body type.
Add a key-value pair with the key file and select a file to upload.

Send the Request:

Click the "Send" button to send the request.
Observe the response in the Postman console.

Verify the Response:

Check the response for details about the uploaded file or any additional actions performed by the API.

Automating Your Typescript Node.js Application Deployment To AWS Elastic Beanstalk With Bitbucket Pipelines

Arun Kumar Dorepally — Sat, 04 Nov 2023 15:45:40 +0000

Implementing Continuous Integration With Typescript Node.js Application Using Bitbucket Pipelines

Continuous Integration (CI) is an essential practice in modern software development. It allows teams to detect problems early, improve software quality, and streamline the build and deployment process. In this blog post, we will delve into a Bitbucket Pipelines configuration designed for a Node.js application. We'll cover the setup step by step, explaining each section of the configuration and how it contributes to an efficient CI pipeline.

Introduction to Bitbucket Pipelines

Bitbucket Pipelines is an integrated CI/CD service built into Bitbucket. It allows you to automatically build, test, and deploy your code based on a configuration file that you commit to your repository. In our example, we utilize a Docker image, cache dependencies for speed, and define multiple steps for building, testing, linting, and deployment.

Base Docker Image

image: node:lts

We start by specifying the Docker image to be used for the pipeline runs. Here, node:lts is the Docker image for the latest Long Term Support (LTS) version of Node.js. This image contains all the necessary tools and libraries to run a Node.js application.

Definitions Section

The definitions section allows us to create reusable snippets of configuration that can be referenced later in the pipeline.

Build Artifact Step

- step: &build-artifact
    name: Build Artifact
    caches:
      - node
    script:
      - apt-get update
      - apt-get install zip
      - npm install
      - npm run build
      - zip -r application.zip . -x node_modules/* src/* .git/*
    artifacts:
      - application.zip

The &build-artifact is an anchor that allows us to reference this step elsewhere in the configuration. This step performs the following actions:

Updates the package list using apt-get update.
Installs the zip utility, required to package the application.
Installs the project dependencies via npm install.
Builds the application with npm run build.
Creates a zipped archive of the built application, excluding unnecessary directories like node_modules, src, and .git.
Declares application.zip as an artifact, meaning it will be stored by Bitbucket Pipelines and can be used in subsequent steps.

Build, Lint, and Test Step

- step: &build-lint-test
    name: Build, Lint And Test
    caches:
      - node
    script:
      - npm install
      - npm run build
      - npm run lint
      - npm run test:cov

The &build-lint-test anchor defines a step for building the application, linting the code, and running tests with coverage. The caches directive tells Pipelines to cache the node_modules directory between runs to speed up the build process.

Pipelines Section

This section defines the actual pipeline that will run on certain triggers, such as a pull request or a push to a branch.

Pull Requests Pipeline

pull-requests:
  '**':
    - step: *build-lint-test

For pull requests targeting any branch (indicated by '**'), we use the build-lint-test step. This ensures that every pull request is built, linted, and tested before it can be merged.

Branches Pipeline

branches:
  develop:
    - step: *build-artifact
    - step:
        name: Deploy to DEVELOPMENT
        deployment: development
        script:
          - echo "Deploying to development environment"
          - pipe: atlassian/aws-elasticbeanstalk-deploy:1.3.0
            variables:
              AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
              AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
              AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
              APPLICATION_NAME: $AWS_APPLICATION_NAME
              ENVIRONMENT_NAME: $AWS_ENVIRONMENT_NAME
              ZIP_FILE: 'application.zip'
              S3_BUCKET: $S3_BUCKET

For the develop branch, we have two steps:

Build Artifact: We use the previously defined build-artifact step to create a deployable zip file of our application.
Deploy to DEVELOPMENT: This step uses an Atlassian-defined pipe, aws-elasticbeanstalk-deploy, to deploy the zipped application to AWS Elastic Beanstalk. It makes use of environment variables to handle credentials and deployment settings.

Environment Variables

In this configuration, you'll come across various environment variables, denoted by placeholders such as $AWS_ACCESS_KEY_ID and $DEVELOPMENT_APPLICATION_NAME. These environment variables are essential for securing sensitive information like AWS credentials and application names. By storing these values in environment variables, you ensure that they remain confidential and are not exposed in your configuration file.

Here's a breakdown of the key environment variables you'll be working with:

AWS_ACCESS_KEY_ID: Your AWS access key.
AWS_SECRET_ACCESS_KEY: Your AWS secret access key.
AWS_DEFAULT_REGION: The AWS region code (e.g., us-east-1, us-west-2) of the region containing the AWS resource(s).
AWS_APPLICATION_NAME: The name of the Elastic Beanstalk application.
AWS_ENVIRONMENT_NAME: Environment name.
ZIP_FILE: The application source bundle to deploy (zip, jar, war).
S3_BUCKET: Bucket name used by Elastic Beanstalk to store artifacts.

Make sure to securely configure these environment variables in your Bitbucket repository settings to ensure the integrity and security of your CI/CD process.

Conclusion

By leveraging Bitbucket Pipelines and its powerful features, you can establish a robust CI/CD pipeline for your Node.js application. This example configuration is a starting point that demonstrates building, linting, testing, packaging, and deploying an application automatically. With Pipelines, teams can ensure that their main branches are always in a deployable state, and that new code is always up to the quality standards set by the project.

Customize this configuration to match your project's requirements, and you'll have a CI/CD pipeline that saves time, increases productivity, and reduces the risk of human error.

References

For this implementation, I referred to the following documentation:

DEV Community: Arun Kumar Dorepally

Build an AI-Powered PPT Generator Using NestJS

1. Setting Up the Project

Step 1: Create a New NestJS Project

Step 2: Install Dependencies

Step 3: Set Up Environment Variables

2. Create the Mistral Module

Create the Mistral Service

Edit mistral.service.ts

Explanation

3. Create the PPT Generator Module

Create the PPT Generator Module & Service

Edit ppt-generator.service.ts

Explanation

Edit ppt-generator.controller.ts

Explanation

4. Connect Everything in app.module.ts

Explanation

5. Running the Project

Test the Endpoint

6. Final Thoughts

How It Works:

Explore More

Learn How to Create and Test a File Upload API using NestJS and Postman

File Upload API Documentation using NestJS

Testing the API using Postman:

Automating Your Typescript Node.js Application Deployment To AWS Elastic Beanstalk With Bitbucket Pipelines

Implementing Continuous Integration With Typescript Node.js Application Using Bitbucket Pipelines

Introduction to Bitbucket Pipelines

Base Docker Image

Definitions Section

Build Artifact Step

Build, Lint, and Test Step

Pipelines Section

Pull Requests Pipeline

Branches Pipeline

Environment Variables

Conclusion

References

Edit `mistral.service.ts`

Edit `ppt-generator.service.ts`

Edit `ppt-generator.controller.ts`

4. Connect Everything in `app.module.ts`