ChatGPT integreren in SPFx-oplossingen

Chat GPT (Generative Pre-trained Transformer) is de laatste tijd erg populair en overal aanwezig. En ik moet toegeven, het kan geweldige dingen! Het geeft je het gevoel dat het volledig begrijpt en gepast reageert. Dus hoe doen we dat in SPFx-oplossingen? Laten we doorgaan naar het leuke gedeelte!

De broncode voor dit web part is te vinden in de PnP Samples

De API-sleutel

Om te beginnen heb je een API-sleutel nodig. Met deze API-sleutel kun je aangeven dat jij het bent tegenover Open AI en kun je je daarmee authenticeren. Je kunt een sleutel aanmaken en ophalen door naar https://platform.openai.com/ te gaan. Klik op je account rechtsboven, waarna een menu verschijnt. Hier klik je op “View API keys”.

Je kunt vervolgens een API-sleutel aanmaken. Sla deze ergens op, want daarna wordt deze om veiligheidsredenen niet meer getoond. Een API-sleutel is persoonlijk, deel hem dus nooit of gebruik hem niet openbaar, omdat hij anders onderschept kan worden (zie verderop in dit artikel).

De code

Zodra we de API-sleutel hebben, kunnen we beginnen met het schrijven van de logica om Open AI te gebruiken in onze SPFx-oplossing. Het is eigenlijk vrij eenvoudig omdat er een bibliotheek beschikbaar is die je kunt gebruiken. Meer informatie over deze bibliotheek is te vinden hier.

Eerst beginnen we met het installeren van de openai-bibliotheek. Dit kun je doen met het volgende commando:

   npm install openai

Vervolgens kunnen we de code schrijven. Eerst beginnen we met het aanmaken van een configuratieobject dat de sleutel bevat.

   import { Configuration, OpenAIApi } from 'openai';

   export default class Chatgpt extends React.Component<IChatgptProps, IChatgptState> {
     private static openai: OpenAIApi;

     public componentDidMount(): void {
       const key = new Configuration({
          apiKey: this.props.apiKey,
       });
       Chatgpt.openai = new OpenAIApi(key);
     }
   }

Met dit configuratieobject kunnen we vervolgens openai aanroepen. We doen dit door de createCompletion-functie aan te roepen met een CreateCompletionRequest-object. In dit object nemen we het volgende op:

   const response = await Chatgpt.openai.createCompletion({
     model: "text-davinci-003",
     prompt: this.state.question,
     max_tokens: 2048
   });

• Een model: op het moment van schrijven gebruiken we text-davinci-003. Meer informatie over de modellen is te vinden hier.
• Met de prompt geven we de eigenlijke vraag mee.
• Tot slot geven we de max tokens op. Dit is standaard geen verplichte optie, maar als gevolg krijgen we anders slechts een antwoord van 28 tekens lang.

In het object dat we terugkrijgen kunnen we het uiteindelijke antwoord ophalen via het volgende pad:

   response.data.choices[0].text

Hoe werkt het?

Als je de openai-bibliotheek niet wilt gebruiken, kun je de API rechtstreeks gebruiken door het onderstaande POST-verzoek uit te voeren. Het bijzondere aan dat verzoek is dat je je persoonlijke sleutel als Bearer in de Authorization-header moet meegeven. Dit betekent dat je API-sleutel zichtbaar is voor degenen die dit verzoek uitvoeren en dus kan worden onderschept.

   POST https://api.openai.com/v1/completions
   Authorization: Bearer [YOUR KEY]

   {
     model: "text-davinci-003",
     prompt: "Your question",
     max_tokens: 2048
   }