KI in der Webentwicklung: So integrierst du ChatGPT in dein Stack

19 Jun 2025

KI in der Webentwicklung: So integrierst du ChatGPT in dein Stack

In diesem Beitrag zeige ich dir, wie du ChatGPT in einen modernen Webentwicklungs-Stack integrierst. Egal ob du einen Chatbot, Content-Generator oder ein Dev-Tool baust – KI kann deine Anwendungen intelligenter und benutzerfreundlicher machen.

1. Warum ChatGPT integrieren?

Die Integration von ChatGPT ermöglicht es dir,

intelligente Chatbots für Support oder Beratung zu bauen
dynamisch Inhalte zu generieren (z. B. E-Mails, Textvorschläge)
Codevorschläge oder Übersetzungen anzubieten
Benutzereingaben in Echtzeit zu verbessern

2. Setup mit Node.js und React

Erstelle ein Fullstack-Projekt mit React-Frontend und Express-Backend:

npx create-react-app chatgpt-ui
mkdir chatgpt-server
cd chatgpt-server
npm init -y
npm install express openai cors dotenv

3. OpenAI API anbinden

Richte im Backend die OpenAI SDK ein:

// server/index.js
require('dotenv').config();
const express = require('express');
const cors = require('cors');
const { OpenAI } = require('openai');

const app = express();
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

app.use(cors());
app.use(express.json());

app.post('/chat', async (req, res) => {
  const { message } = req.body;
  try {
    const response = await openai.chat.completions.create({
      model: 'gpt-4',
      messages: [{ role: 'user', content: message }],
    });
    res.json({ reply: response.choices[0].message.content });
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.listen(3001, () => console.log('Server läuft auf Port 3001'));

4. React-Chat-Oberfläche bauen

Frontend mit einfacher Chat-Komponente:

// src/App.js
import { useState } from 'react';

function App() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);

  const sendMessage = async () => {
    const response = await fetch('http://localhost:3001/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: input }),
    });
    const data = await response.json();
    setMessages([...messages, { user: input, bot: data.reply }]);
    setInput('');
  };

  return (
    <div className="chat-container">
      <h2>ChatGPT Assistent</h2>
      <div className="chat-messages">
        {messages.map((msg, idx) => (
          <div key={idx}>
            <p><strong>Du:</strong> {msg.user}</p>
            <p><strong>Bot:</strong> {msg.bot}</p>
          </div>
        ))}
      </div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={sendMessage}>Senden</button>
    </div>
  );
}

export default App;

5. Umgebungsvariablen einrichten

Speichere deinen OpenAI-Schlüssel sicher in einer .env Datei:

// .env
OPENAI_API_KEY=dein-api-key

Nutze z. B. Vercel oder Railway zur sicheren Bereitstellung im Livebetrieb.

6. Optional: Eigene ChatGPT-Plugins erstellen

Für tiefergehende Integration mit dem ChatGPT-Interface kannst du ein OpenAI Plugin entwickeln und per OpenAPI-Schema registrieren:

// Beispiel Plugin-Manifest
{
  "schema_version": "v1",
  "name_for_model": "restaurant_menu_plugin",
  "description_for_model": "Zeigt das Tagesmenü eines Restaurants an",
  "auth": { "type": "none" },
  "api": {
    "type": "openapi",
    "url": "https://deine-domain.com/openapi.yaml"
  }
}

Fazit

Mit ChatGPT in deinem Webstack kannst du intelligente, konversationsbasierte Anwendungen bauen – ob als Assistent, Generator oder Interface-Erweiterung. In kommenden Beiträgen zeige ich, wie man Datenbanken einbindet und Plugins produktiv nutzt.

So integrierst du ChatGPT in dein Stack