Add Openai Integration

[DM1122]

I would like to add a feature that generates feedback for a selected requirement.

Scope:

• Add UI component that has an entry for the user's openai token and a button to generate feedback for the currently selected requirement node
• feedback is generated by calling gpt-4 through the openai api
• feedback is posted as a Notion comment on the corresponding requirement page

How can this be accomplished @dosu-bot?

[dosubot]

🤖

Hello @DM1122! It's great to see you again and I appreciate your continued contributions to our project. I'm currently looking into your issue and will get back to you with a comprehensive response shortly.

[dosubot]

🤖

To add the OpenAI integration feature to the tree-visualizer, you'll need to follow these steps:

1. Add UI Component: You'll need to create a new Angular component that includes an input field for the OpenAI token and a button to generate feedback. This can be done using Angular's CLI with the command ng generate component OpenAIIntegration. This will create a new folder under src/app with the necessary TypeScript, HTML, and CSS files.

2. Connect to OpenAI API: In the TypeScript file of the new component, you'll need to create a function that makes a POST request to the OpenAI API. You can use the HttpClient module provided by Angular for this. The function should take the user's OpenAI token and the selected requirement node as parameters. The OpenAI token can be retrieved from the input field, and the selected requirement node can be passed in from the parent component.

3. Post Feedback to Notion: The response from the OpenAI API will be the feedback for the selected requirement node. You'll need to post this feedback as a comment on the corresponding Notion page. This can be done by making a POST request to the Notion API. You'll need to create another function in the TypeScript file of the new component for this.

Here's a rough example of what the TypeScript file might look like:

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-openai-integration',
  templateUrl: './openai-integration.component.html',
  styleUrls: ['./openai-integration.component.css']
})
export class OpenAIIntegrationComponent {
  constructor(private http: HttpClient) {}

  generateFeedback(token: string, node: any) {
    this.http.post('https://api.openai.com/v4/engines/davinci-codex/completions', {
      prompt: `Generate feedback for requirement: ${node}`,
      max_tokens: 60
    }, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    }).subscribe(response => {
      this.postFeedbackToNotion(node, response['choices'][0]['text']);
    });
  }

  postFeedbackToNotion(node: any, feedback: string) {
    // Code to post feedback to Notion goes here
  }
}

Please note that this is a simplified example and doesn't include error handling or the code to post feedback to Notion. You'll need to replace 'https://api.openai.com/v4/engines/davinci-codex/completions' with the correct URL for GPT-4 when it becomes available.

You'll also need to add the new component to the parent component's HTML file where you want it to be displayed. This can be done by adding <app-openai-integration></app-openai-integration> to the HTML file.

I hope this helps! Let me know if you have any questions.

Sources

• package.json
• .storybook/main.js
• angular.json
• src/app/app.component.html
• src/app/app.component.ts

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.