Automating LinkedIn Replies with OpenAI: Guided Tour of Building with Angular 17 and Azure…

Darío Fernández Torre — Wed, 10 Jan 2024 17:04:20 GMT

Automating LinkedIn Replies with OpenAI: Guided Tour of Building with Angular 17 and Azure Functions

Automating Professional Networking

Explore the integration of an Angular application with Python Azure Functions to manage LinkedIn communications effectively. This guide provides a practical overview of building a robust automated response application, enhancing your professional networking with technology.

Embracing Angular 17 and Material for an Intuitive UI

Imagine entering a meticulously arranged office, where each tool and document is perfectly within reach, enhancing your workflow with seamless efficiency. This mirrors the user experience that Angular 17 and Material have enabled me to create for this LinkedIn response application. Angular 17’s modular components act as the flexible and customizable building blocks of the app, akin to the adaptable, multi-functional furniture in a dynamic office space. Material Design intertwines aesthetics with usability, ensuring that the application is not just highly functional but also visually appealing and engaging for the user.

Screenshot of the Automated LinkedIn Response Application

The user interface is divided into two primary sections, striking a balance between efficiency and control. On one side, an organized list of messages serves as your digital incoming mail tray. Each non-sponsored message from your LinkedIn inbox is clearly displayed, waiting for your attention, but not crowding your space. You can easily navigate through them, selecting one to focus on without losing sight of the others. Here’s this standalone component’s code:




      *ngFor="let message of messages"
    class="message-card"
    (click)="selectMessage(message)"
  >
    
      
        {{ message.senderName }}
      
      
        {{ message.message }}
      
      
                  mode="indeterminate"
          style="margin-top: 1rem"
        >

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { LinkedInService } from '../linked-in.service';
import { LinkedInMessage } from '../linked-in-message';
import { MatListModule } from '@angular/material/list';
import { MatCardModule } from '@angular/material/card';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';

import { CommonModule } from '@angular/common';
import { MessageUpdateService } from '../message-update.service';

@Component({
  selector: 'app-messages',
  standalone: true,
  imports: [
    CommonModule,
    MatListModule,
    MatCardModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
  ],
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.css'],
})
export class MessagesComponent implements OnInit {
  messages: LinkedInMessage[] = [];
  selectedMessage!: LinkedInMessage;
  isLoading = true;

  @Output() messageSelected = new EventEmitter();

  constructor(
    private linkedInService: LinkedInService,
    private messageUpdateService: MessageUpdateService
  ) {}

  ngOnInit(): void {
    this.linkedInService.getMessages().subscribe((data: any) => {
      console.log(data);
      this.isLoading = false;
      this.messages = this.linkedInService.processMessages(data);
    });

    this.messageUpdateService.currentMessageSent.subscribe((urn) => {
      if (urn) {
        this.onMessageSent(urn);
      }
    });
  }

  selectMessage(message: LinkedInMessage): void {
    this.selectedMessage = message;
    this.messageSelected.emit(this.selectedMessage);
  }

  onMessageSent(urn: string): void {
    this.messages = this.messages.filter(
      (message) => message.conversationUrn !== urn
    );
  }
}

On the other side of the screen, magic happens. After selecting a message a variety of response cues are offered. These are far from standard automated replies; they are identifiers for tailored prompts that get combined with the context of each message, like having a personal assistant who understands the nuances of tone and content. After generating a response, you can swiftly review it, add personal touches, and send it off, all within the same application. It’s about making the reply process quicker, not eliminating the personalized approach. Let’s take a look at the code:


  
    Response Type
          [(ngModel)]="selectedResponseOption"
      [disabled]="isGeneratingResponse || isSending"
    >
      Accept
      Reject
      Ask for More Details
      Custom
    
  

  
    Custom Response
    
  

  
    Response
          matInput
      [(ngModel)]="response"
      [disabled]="isGeneratingResponse || isSending"
      #responseTextarea
    >
  

  
          mat-raised-button
      color="accent"
      (click)="generateResponse()"
      [disabled]="isGeneratingResponse || isSending"
    >
      
      Generate Response
    

          mat-raised-button
      color="primary"
      (click)="sendMessage()"
      [disabled]="isGeneratingResponse || isSending"
      style="float: right"
    >
      
      Send

import {
  Component,
  ElementRef,
  Input,
  SimpleChanges,
  ViewChild,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { LinkedInService } from '../linked-in.service';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSelectModule } from '@angular/material/select';
import { OpenAIService } from '../open-ai.service';
import { MessageUpdateService } from '../message-update.service';

@Component({
  selector: 'app-response-editor',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatProgressSpinnerModule,
    MatSnackBarModule,
    MatSelectModule,
  ],
  templateUrl: './response-editor.component.html',
  styleUrl: './response-editor.component.css',
})
export class ResponseEditorComponent {
  @Input() selectedMessage: any;
  @ViewChild('responseTextarea') responseTextarea!: ElementRef;
  response: string = '';
  isSending: boolean = false;
  isGeneratingResponse: boolean = false;
  public customResponse: string = '';

  selectedResponseOption: string = 'askMore';

  constructor(
    private linkedInService: LinkedInService,
    private messageUpdateService: MessageUpdateService,
    private openAIService: OpenAIService,
    private snackBar: MatSnackBar
  ) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (
      changes['selectedMessage'] &&
      !changes['selectedMessage'].isFirstChange()
    ) {
      this.response = '';
    }
  }

  private getPersonalizedPrompt(): string {
    switch (this.selectedResponseOption) {
      case 'accept':
        return `Generate an accepting response for ${this.selectedMessage.senderName}, demostrating interest in the following offer:\n\n${this.selectedMessage.message}\n\n`;
      case 'reject':
        return `Generate a rejection response for ${this.selectedMessage.senderName}, being not interested in the following offer:\n\n${this.selectedMessage.message}\n\n`;
      case 'askMore':
        return `Generate a response for ${this.selectedMessage.senderName}, asking to know more about the following offer:\n\n${this.selectedMessage.message}\n\n`;
      case 'custom':
        return this.customResponse;
      default:
        return '';
    }
  }

  adjustTextareaHeight(): void {
    const textarea: HTMLTextAreaElement = this.responseTextarea.nativeElement;
    textarea.style.height = 'auto';
    textarea.style.height = `${textarea.scrollHeight}px`;
  }

  sendMessage(): void {
    if (this.response.length > 0 && this.selectedMessage.conversationUrn) {
      this.isSending = true;
      const urnParts = this.selectedMessage.conversationUrn.split(':');
      const conversationUrnId = urnParts[urnParts.length - 1];

      this.linkedInService
        .sendMessage(this.response, conversationUrnId)
        .subscribe({
          next: (response) => {
            console.log('Response on success:', response);
            this.isSending = false;
            this.showMessage('Message sent successfully', 'Success');
            this.messageUpdateService.messageSent(
              this.selectedMessage.conversationUrn
            );
            this.selectedMessage = null;
          },
          error: (err) => {
            console.log('Error response:', err);
            this.isSending = false;
            const errorMessage = err.error
              ? err.error
              : 'Failed to send message';
            this.showMessage(errorMessage, 'Error');
          },
        });
    } else {
      console.log('No response or URN.');
    }
  }

  showMessage(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 3000,
    });
  }

  generateResponse(): void {
    this.isGeneratingResponse = true;

    const systemPrompt =
      "You are a helpful assistant. You're in charge of replying the LinkedIn messages received for Darío, always answer as him, never mention being an assistant. Be polite and brief. Darío is a senior graduate software engineer. Always answer in the offer's language (if spanish, use Argentinian spanish)";
    const personalizedPrompt = this.getPersonalizedPrompt();
    const message = `${personalizedPrompt}\n\n${this.selectedMessage.message}\n\n`;

    this.openAIService
      .generateResponse(systemPrompt, message)
      .subscribe((response) => {
        setTimeout(() => this.adjustTextareaHeight(), 0);
        this.isGeneratingResponse = false;
        this.response = response.content;
      });
  }
}

Angular Material lends these components a refined and professional aesthetic. Buttons, dropdowns, and animations are smooth and intuitive, transforming the experience from simply efficient to actively enjoyable. It’s crucial to understand that this setup is a basic, initial approach, tailored for rapid testing of the system’s capabilities in a minimal viable setup. This configuration is not intended for production but is specifically designed for this example, to quickly evaluate and demonstrate the potential and user-friendliness of the application without delving into more advanced development.

Finally, within the application’s architecture, the Angular services play a vital yet understated role. They are efficiently designed to interact with our Azure Functions endpoints, handling the necessary data processing and communications. This aspect of the system ensures that while the components handle the user interaction gracefully, the services robustly manage the communication with the backend and deal with minor logic stuff, maintaining the application’s overall performance and reliability. Code snippets in this case won’t improve the understanding of the app as the services implementation consist of pretty vanilla REST API calls and model handling.

Innovating with Azure Functions and Python

Initially, I sought to leverage LinkedIn’s official API for creating a seamless automated response system. However, I quickly encountered its restrictive nature, especially for individual developers. It became evident that LinkedIn’s policies are stringently designed to deter automation in many aspects, particularly concerning user interactions and message access. This revelation was akin to preparing a gourmet dinner only to realize the limitations of the kitchen tools at hand. Despite automation’s pervasive nature in many sectors, including recruiting, LinkedIn’s stance on preserving user privacy and preventing unsolicited communications remains steadfast and restrictive.

While the official API provides certain functionalities, access to crucial features like reading and responding to messages or accessing detailed user data is heavily guarded or entirely off-limits for most individual developers. This is likely a measure to protect users from spam and preserve the platform’s integrity but poses significant challenges for those looking to innovate or streamline their networking processes. Consequently, any endeavor to automate interactions or access more in-depth data requires creative thinking and a cautious approach to adhere to LinkedIn’s terms of service and ethical guidelines.

Navigating the Quirks of LinkedIn’s API

Given these constraints, I turned my attention to exploring other avenues as a purely experimental endeavor. While an unofficial API offered a glimpse into what might be possible, it’s important to note that such alternatives are not sanctioned by LinkedIn and often conflict with their Terms of Service. Therefore, I conducted my explorations on non-professional test accounts, ensuring that this foray into automation was harmless and purely for educational purposes. The journey, albeit filled with challenges, shed light on the intricacies of navigating API restrictions and the broader implications of automation in professional networking.

Being versed in both C# and Python made the transition smooth for this project. Although I typically work with C# due to its .NET compatibility, the need for a Python-based unofficial API library wasn’t a hurdle. Thanks to Azure Functions’ support for multiple languages, I could easily leverage my Python skills to implement the necessary features, effectively instructing the app on managing and automating LinkedIn responses. This versatility in skills and tools ensured the project’s success with minimal friction.

Unleashing some potential of Azure Functions

Within Azure Functions, I orchestrated a trio of scripts specifically tailored to automate the LinkedIn communication process. One function is responsible for communicating with the OpenAI service, crafting intelligent and context-aware responses. The other two functions are dedicated to LinkedIn interactions: one for retrieving incoming messages and another for dispatching crafted replies. Together, these functions form a streamlined process, each playing a crucial role in the automated system.

I’m presenting the code for these functions here for educational purposes of course, allowing you to understand and perhaps replicate or extend this functionality in your own projects. The first function is a direct line to OpenAI’s powerful models, while the other two manage the intricacies of LinkedIn’s messaging. This setup demonstrates a practical application of Azure Functions and Python scripting, showing how they can be combined to tackle real-world challenges in professional networking. By sharing this, I hope to inspire and inform your own explorations into the world of automation, all while emphasizing the importance of ethical and cautious experimentation within the boundaries of service terms and personal integrity.

import json
import os
import logging
import requests
import azure.functions as func
from linkedin_api import Linkedin

app = func.FunctionApp(http_auth_level=func.AuthLevel.ANONYMOUS)

@app.route(route="generateresponse")
def generateresponse(req: func.HttpRequest) -> func.HttpResponse:
    logging.info('Python HTTP trigger function processed a request.')

    try:
        # Parse the request body
        req_body = req.get_json()

        # OpenAI Chat API endpoint and key
        openai_endpoint = os.environ.get('OPENAI_ENDPOINT')
        openai_api_key = os.environ.get('OPENAI_API_KEY')

        headers = {
            'Content-Type': 'application/json',
            'api-key': f'{openai_api_key}'
        }

        # Sending post request to OpenAI Chat API
        response = requests.post(openai_endpoint, headers=headers, json=req_body)
        response_json = response.json()

        # Extracting the message content
        if 'choices' in response_json and len(response_json['choices']) > 0:
            message_content = response_json['choices'][0]['message']['content']
        else:
            message_content = "No response generated."

        # Returning only the message content
        return func.HttpResponse(
            body=json.dumps({"content": message_content}),
            status_code=200,
            mimetype='application/json'
        )
    except Exception as e:
        logging.error(f'Error: {str(e)}')
        return func.HttpResponse(
            body=json.dumps({'error': str(e)}),
            status_code=500,
            mimetype='application/json'
        )

@app.route(route="retreivemessages")
def retreivemessages(req: func.HttpRequest) -> func.HttpResponse:
    linkedin_username = os.environ.get('LINKEDIN_USERNAME')
    linkedin_password = os.environ.get('LINKEDIN_PASSWORD')

    if not linkedin_username or not linkedin_password:
        return func.HttpResponse(
            "LinkedIn credentials are not set",
            status_code=400
        )

    linkedin = Linkedin(linkedin_username, linkedin_password)
    
    conversations = linkedin.get_conversations()  # Fetch list of conversations

    return func.HttpResponse(json.dumps(conversations), mimetype="application/json")

@app.route(route="replymessage")
def replymessage(req: func.HttpRequest) -> func.HttpResponse:
    linkedin_username = os.environ.get('LINKEDIN_USERNAME')
    linkedin_password = os.environ.get('LINKEDIN_PASSWORD')

    if not linkedin_username or not linkedin_password:
        return func.HttpResponse(
            json.dumps({"message": "LinkedIn credentials are not set"}),
            status_code=400,
            mimetype="application/json"
        )

    linkedin = Linkedin(linkedin_username, linkedin_password)

    try:
        # Parse request body
        req_body = req.get_json()
        message_body = req_body.get('message_body')
        conversation_urn_id = req_body.get('conversation_urn_id')
        recipients = req_body.get('recipients')

        if not message_body or not (conversation_urn_id or recipients):
            return func.HttpResponse(
                json.dumps({"message": "Invalid request"}),
                status_code=400,
                mimetype="application/json"
            )

        # Mark conversation as seen
        error_state_seen = linkedin.mark_conversation_as_seen(conversation_urn_id)
        if error_state_seen:
            return func.HttpResponse(
                json.dumps({"message": "Failed to mark conversation as seen"}),
                status_code=500,
                mimetype="application/json"
            )

        # Send message
        error_state_message = linkedin.send_message(message_body, conversation_urn_id, recipients)
        if error_state_message:
            return func.HttpResponse(
                json.dumps({"message": "Failed to send message"}),
                status_code=500,
                mimetype="application/json"
            )

        return func.HttpResponse(
            json.dumps({"message": "Message processed successfully"}),
            status_code=200,
            mimetype="application/json"
        )

    except ValueError:
        return func.HttpResponse(
            json.dumps({"message": "Invalid payload"}),
            status_code=400,
            mimetype="application/json"
        )
    except Exception as e:
        return func.HttpResponse(
            json.dumps({"message": f"An error occurred: {str(e)}"}),
            status_code=500,
            mimetype="application/json"
        )

Automating Responses with Azure OpenAI

In professional communication, the essence of timing and tone is paramount. Azure OpenAI is akin to enlisting a highly skilled communicator, capable of crafting responses that are both contextually relevant and tonally appropriate. Understanding the Task, Choosing the Right Base Prompt, Crafting the Reply, and Review and Send — this methodological approach not only saves time but also enhances the quality and professionalism of your interactions.

The process unfolds as follows:

Understanding the Task: Each LinkedIn message carries its unique essence — be it a job offer, an invitation to connect, or a query. The app first allows you to check the type of the message, and decide whether it’s something to accept, reject, or warrant more information.
Choosing the Right Base Prompt: Depending on the message’s intent, a base prompt is selected. These serve as our foundational templates — one for accepting offers, one for declining, another for seeking more details, and a custom one for those messages that require a personal touch or with more complexity overall.
Crafting the Reply: This is where Azure OpenAI comes into its element. The base prompt plus the relevant message elements are sent to the API, which then generates a tailored reply. The language can be adapted to suit the response type — enthusiastic and professional for acceptances, polite and constructive for rejections, inquisitive and clear for inquiries. For special cases, the custom prompt allows for a more personalized engagement, much like a nuanced conversation.
Review and Send: Before any message is dispatched, it allows a review process through edition or re-generation, ensuring that every word and sentiment accurately reflects your personal brand and intention.

By leveraging Azure OpenAI, we’re not just automating replies; we’re elevating the art of communication, ensuring that every message you send is a step forward in your professional journey.

Trying Your Personal Assistant

Testing the application was akin to teaching a new assistant, starting with simple, controlled examples before letting them handle more complex scenarios. After some adjustments and debugging, the app not only replied accurately but did so with the professional polish we aimed for.

The generated response is directly sent to the recruiter’s LinkedIn messages

Deploying Locally — Keeping It In-House:

When it came to deploying our application, the decision to do so locally was driven by the need for a controlled testing environment and the nature of the unofficial API used. Local deployment allowed for a more secure and manageable setting, fitting for a project that was more an exploration of technological capabilities and a personal challenge in rapid development with AI assistance. This approach was not about preparing the application for a wide release, but rather about deeply understanding and demonstrating what’s possible with current tools and technologies in a safe, controlled manner.

The application, therefore, remains an illustrative example of what can be achieved with Angular, Azure Functions, and Python scripting when combined creatively. It stands as a testament to the speed and efficiency possible in modern development, particularly when augmented by AI assistance. While this project may not be destined for a broader audience due to the constraints and ethical considerations of using unofficial APIs, it serves as a valuable learning tool and a snapshot of rapid innovation in the field of automated communication.

Conclusion

By focusing on intuitive design and efficient processes, this basic application transforms the chore of responding to messages into a quick, simple task, giving you more time to focus on what truly matters in your professional life. With this setup, you’re not automating the personal touch out of your communications; you’re enhancing and accelerating it, ensuring that every reply, while quick, is still uniquely yours.

As we conclude this guide, it’s evident that AI-assisted communication is not a futuristic concept but a current reality. This exploration was more than a technical exercise; it was an insight into the potential future of professional communication. As AI evolves, so too must our strategies for engaging with it, ensuring that we harness its potential while upholding values of integrity, authenticity, and personal touch. The journey into the future of communication is just beginning, and it is up to all of us to shape it into a landscape where technology enhances, not replaces, the human connection.

Stories by Darío Fernández Torre on Medium

Automating LinkedIn Replies with OpenAI: Guided Tour of Building with Angular 17 and Azure…