Einen KI-gestützten Blogbeitrag-Editor mit AI21 Labs und ReactJS erstellen

Einführung in AI21 Labs

AI21 Labs ist ein innovatives KI-Labor, das sich der Transformation unserer Interaktion mit Technologie widmet, insbesondere in den Bereichen Schreiben und Verstehen. Mit dem Ziel, maschinelle Hilfstechnologie neu zu definieren, strebt AI21 Labs an, Maschinen zu echten Denkpartnern zu machen. Dieser Fokus auf Natural Language Processing (NLP) ermöglicht ein nahtloses Verständnis und die Erzeugung menschlicher Sprache und führt zu leistungsstarken Lösungen wie KI-gesteuerten Schreibassistenten und Zusammenfassungstools.

Zu den Angeboten gehört das vielseitige AI21 Studio, das eine Reihe von Large Language Model APIs umfasst, die leicht an spezifische Anwendungsbedürfnisse angepasst werden können. Durch die Nutzung von AI21 Labs können Unternehmen die Benutzererfahrung durch dynamische KI-gesteuerte Funktionen verbessern.

Einführung in ReactJS

ReactJS, oft abgekürzt als React, ist eine weitverbreitete JavaScript-Bibliothek, die für den Aufbau von Benutzeroberflächen bekannt ist, insbesondere für Single-Page-Anwendungen. Es verwaltet effektiv die Darstellungs-Schicht in Web- und mobilen Anwendungen und ermöglicht es Entwicklern, interaktive UIs mit Leichtigkeit zu erstellen.

Durch die Ermöglichung von Änderungen an Daten, ohne die Seite neu laden zu müssen, sorgt React für schnellere, skalierbare und einfachere Webanwendungen. Sein Entwurfsprinzip konzentriert sich ausschließlich auf Benutzeroberflächen, was es mit anderen Programmierbibliotheken oder -frameworks kompatibel macht.

In diesem Tutorial werden wir untersuchen, wie man ein Website-Frontend mit ReactJS und den KI-Funktionen von AI21 Labs erstellt, und bieten einen umfassenden Leitfaden, der sowohl für erfahrene als auch für unerfahrene Entwickler geeignet ist.

Voraussetzungen

• Grundkenntnisse in Typescript und/oder React
• Zugang zur AI21 Labs API

Gliederung

1. Projekt initialisieren
2. Projektdateien schreiben
3. Die AI-gesteuerte Blog-Post-Editor-App testen
4. Diskussion

Projekt initialisieren

Create React App installieren

Um eine neue React.js-Anwendung effizient zu erstellen, nutzen wir Create React App (CRA), indem wir es global über npm installieren:

npm install -g create-react-app

Eine neue React-Projekt mit Typescript erstellen

Führen Sie den folgenden Befehl aus, um ein neues Projekt namens ai21-blog-editor mit CRA und einer Typescript-Vorlage einzurichten:

npx create-react-app ai21-blog-editor --template typescript

Dies initialisiert ein neues Verzeichnis namens ai21-blog-editor mit einer voll funktionsfähigen React-Anwendung, die Typescript unterstützt.

TailwindCSS integrieren

TailwindCSS installieren

Gemäß der offiziellen Tailwind CSS-Dokumentation beginnen wir mit der Installation von TailwindCSS und der Initialisierung der Bibliothek:

npm install -D tailwindcss postcss autoprefixer

Nach der Installation können wir Tailwind mit dem Befehl initialisieren:

npx tailwindcss init -p

Template-Pfade konfigurieren

Dann fügen wir unsere Template-Pfade in der tailwind.config.js-Datei hinzu. Suchen Sie die Datei und fügen Sie die entsprechenden Zeilen hinzu:

content: ["./src/**/*.{js,jsx,ts,tsx}"]

Tailwind-Direktiven hinzufügen

Als nächstes fügen wir die Tailwind-Direktiven in unsere ./src/index.css-Datei ein:

@tailwind base;
@tailwind components;
@tailwind utilities;

Jetzt integriert sich Tailwind CSS nahtlos in unser Projekt!

Benötigte Bibliotheken installieren

Bevor wir fortfahren, lassen Sie uns die Vorbereitung abschließen, indem wir Bibliotheken wie dotenv für das Management von Umgebungsvariablen installieren:

npm install dotenv

Projektdateien schreiben

App.tsx

Beginnen wir mit der Aktualisierung der App.tsx-Datei, um die grundlegende App-Struktur festzulegen und nicht verwendete Importe zu entfernen:

import React from 'react';
import './App.css';

function App() {
  return (
Blog Post Editor App
);
}

export default App;

BlogEditor.tsx

Erstellen Sie nun eine neue Datei mit dem Namen BlogEditor.tsx im src-Ordner mit der folgenden grundlegenden Struktur:

import React, { useState } from 'react';

const BlogEditor = () => {
const [text, setText] = useState('');
const [link, setLink] = useState('');
const [loading, setLoading] = useState(false);

const API_KEY = process.env.REACT_APP_AI21_API_KEY;

return (
   

     
   
);
};

export default BlogEditor;

Zustandsvariablen und Konstanten

Wir werden die folgenden Zustandsvariablen beibehalten:

• text: Aktueller Text des Blogbeitrags.
• link: URL zur Zusammenfassung (optional).
• loading: Kennzeichnet den Status der API-Anfrage.
• API_KEY: Wird für den AI21 API-Schlüssel verwendet.

Ereignisbearbeiter

• handleChangeText: Funktion zum Aktualisieren der text-Zustandsvariablen.
• handleChangeLink: Funktion zum Aktualisieren der link-Zustandsvariablen.

API-Hilfsfunktionen

• handleGenerateCompletion: Ruft die AI21 API für die Textvervollständigung auf.
• handleFixGrammar: Sendet eine Anfrage zur Korrektur grammatikalischer Fehler.
• handleParaphrase: Fordert die Paraphrasierung des eingegebenen Textes an.
• handleImproveText: Schlägt Verbesserungen für den aktuellen Text vor.
• handleSummarizeLink: Extrahiert eine Zusammenfassung aus einem bereitgestellten Link.

.env

Diese Datei ist notwendig für die Speicherung von Umgebungsvariablen, die API-Schlüssel und andere vertrauliche Daten umfasst:

REACT_APP_AI21_API_KEY=your_api_key_here

index.css

Fügen Sie bei Bedarf in dieser Datei Stile für den Ladeindikator und andere UI-Elemente hinzu.

index.html

Passen Sie die index.html-Datei an, um den Titel Ihrer App zu personalisieren:

<title>Blog Editor App</title>

Die AI-gesteuerte Blog-Post-Editor-App testen

Sie können die App mit folgendem Befehl ausführen:

npm start

Die Anwendung sollte über localhost:3000 zugänglich sein. Testen Sie die Funktionen wie das Generieren von Textvervollständigungen, das Beheben von Grammatikfehlern, das Paraphrasieren, das Verbessern von Texten und das Zusammenfassen von Links, um zu sehen, wie gut sie funktionieren.

Fazit

Zusammenfassend haben wir die vielfältigen Funktionen, die AI21 Labs bietet, erkundet und wie man diese in einer Blog-Post-Editor-App mit ReactJS nutzt. Durch die Integration fortschrittlicher KI-Funktionen wie Textvervollständigung, Grammatikprüfung, Paraphrasierung, Verbesserungsvorschläge und Link-Zusammenfassungen ermöglichen wir es den Benutzern, ihr Schreiberlebnis erheblich zu verbessern. Beginnen Sie noch heute mit dem Bau Ihrer KI-gesteuerten Anwendungen!