Für Entwickler

Next.js-KI-Chatbot

Fügen Sie einer Next.js-Website einen KI-Chatbot mit einer einzigen Client-Komponente hinzu – App Router oder Pages Router, statisch oder serverseitig gerendert. Trainieren und gestalten Sie den Agenten im Elfsight-Editor.
Keine Kreditkarte erforderlich
Code ansehen ↓
Next.js-KI-Chatbot
Next.js
// npm install react-elfsight-widget
// components/AiChatbot.tsx
"use client";
import { ElfsightWidget } from "react-elfsight-widget";

export function AiChatbot({ id }: { id: string }) {
  return <ElfsightWidget widgetID={id} />;
}

// app/layout.tsx — once, for every page
// <AiChatbot id="YOUR-WIDGET-ID" />

Erstellen Sie Ihren KI-Agenten kostenlos

  1. 1. Website eingeben
  2. 2. Agenten gestalten
  3. 3. Zur Website hinzufügen
Selbst bauen oder einbetten

Einen KI-Chatbot in Next.js selbst bauen

Ein KI-Chatbot ist mehr als ein Chatfenster und ein Aufruf einer Modell-API. Das gehört dazu, ihn gut zu betreiben – und das können Sie sich sparen.

Was Sie bauen und am Laufen halten müssten

Ein Modell und seine Rechnung

Ein Modell auswählen, Rate Limits handhaben und zusehen, wie die Token-Kosten mit dem Traffic steigen.

Ihre Inhalte als Antworten

Die Website crawlen, aufteilen und einbetten und den Index synchron halten, wenn sich Seiten ändern.

Die Chat-Oberfläche

Sprechblasen, gestreamte Antworten, Tippanzeige, mobiles Layout und Barrierefreiheit auf jeder Seite.

Gesprächsgedächtnis

Den Verlauf jedes Besuchers speichern und den passenden Kontext im Rahmen des Token-Budgets zurückspielen.

Leitplanken

Antworten beim Thema halten, erfundene Fakten vermeiden und festlegen, was er niemals sagen darf.

Leads und Übergabe

Formulare im Chat, Einwilligung und die Weitergabe der richtigen Gespräche an eine Person.

Protokolle und Analysen

Chats speichern, per E-Mail an das Team senden und sehen, wonach Besucher fragen.

Wartung

Modell-Updates, Prompt-Feinschliff, Sicherheitsfixes – und jemand in Bereitschaft, wenn etwas ausfällt.

Mit Elfsight: eine Komponente

Erstellen und trainieren Sie den Agenten im Elfsight-Editor und rendern Sie dann eine Komponente. Antworten, Leads und Einstellungen liegen in Ihrem Dashboard – zum Ändern ist kein erneutes Deployment nötig.
Next.js
<AiChatbot id="YOUR-ID" />

  • Lernt automatisch von Ihrer Website

  • Lead-Formulare und Übergabe an Menschen inklusive

  • Chatverlauf, Protokolle und Analysen

  • Schwebend oder eingebettet, im Editor gestaltet

  • Kostenloser Tarif, keine Kreditkarte

Integration

Den KI-Chatbot zu Next.js hinzufügen

Die Komponente

Elfsight-Hilfecenter

  • Client-Komponente. Markieren Sie den Wrapper mit "use client" und rendern Sie ihn aus jeder Server Component.

  • Einmal im Root-Layout. Ein schwebender Chat in app/layout.tsx erscheint auf jeder Seite und übersteht die clientseitige Navigation.

  • Geeignet für statischen Export. Auf Ihrem Server läuft nichts; es funktioniert mit output: "export" und auf jedem Host.

Next.js
// npm install react-elfsight-widget
// components/AiChatbot.tsx
"use client";
import { ElfsightWidget } from "react-elfsight-widget";

export function AiChatbot({ id }: { id: string }) {
  return <ElfsightWidget widgetID={id} />;
}

// app/layout.tsx — once, for every page
// <AiChatbot id="YOUR-WIDGET-ID" />
Sofort einsatzbereit

Was der Agent ohne Ihren Code leistet

Baut sich aus Ihrer Website auf

Durchsucht Ihre Website, um Ihr Geschäft, Ihre Produkte, Leistungen und Inhalte zu verstehen, und macht daraus automatisch einen KI-Agenten.

Erstellt eine Wissensdatenbank

Verwandelt Ihre Website-Inhalte automatisch in präzise KI-Antworten.

Formt eine Persönlichkeit

Erstellt Namen, Icon, Rolle und Tonfall passend zu Ihrem Geschäft.

Bereitet den ersten Kontakt vor

Erzeugt Begrüßungsnachrichten und Schnellantworten, die auf Ihre Besucher und Geschäftsziele zugeschnitten sind.

Stattet ihn mit den richtigen Skills aus

Fügt automatisch Lead-Erfassung, Aktionsbuttons und weitere Fähigkeiten passend zu Ihrem Geschäft hinzu.

Lernt aus Gesprächen

Erkennt fehlendes Wissen und hilft, künftige Gespräche mit der Zeit zu verbessern.
Vergleich

Elfsight AI Chatbot oder Eigenbau auf einer Modell-API in Next.js

Funktion
Elfsight AI Chatbot
Ihr eigener Bau
Zeit bis zum Start
Minuten: eine Komponente
Wochen an Entwicklungsarbeit
Wissen
Automatisch aus Ihrer Website aufgebaut
Selbst crawlen, einbetten und synchron halten
Chat-Oberfläche
Fertig, im Editor gestaltet
Bauen, testen und pflegen
Leads und Übergabe
Lead-Formulare und Übergabe an Menschen inklusive
Formulare, Einwilligung und Routing selbst bauen
Protokolle und Analysen
Dashboard, E-Mail-Protokolle und Berichte
Speicherung und Berichte selbst bauen
Kosten
Ein Tarif, mit einem kostenlosen zum Start
Modell-Token, Hosting und die Zeit Ihres Teams
Wartung
Elfsight hält es am Laufen
Ihr Team

Zeit bis zum Start

AI Chatbot

Minuten: eine Komponente

Ihr eigener Bau

Wochen an Entwicklungsarbeit

Wissen

AI Chatbot

Automatisch aus Ihrer Website aufgebaut

Ihr eigener Bau

Selbst crawlen, einbetten und synchron halten

Chat-Oberfläche

AI Chatbot

Fertig, im Editor gestaltet

Ihr eigener Bau

Bauen, testen und pflegen

Leads und Übergabe

AI Chatbot

Lead-Formulare und Übergabe an Menschen inklusive

Ihr eigener Bau

Formulare, Einwilligung und Routing selbst bauen

Protokolle und Analysen

AI Chatbot

Dashboard, E-Mail-Protokolle und Berichte

Ihr eigener Bau

Speicherung und Berichte selbst bauen

Kosten

AI Chatbot

Ein Tarif, mit einem kostenlosen zum Start

Ihr eigener Bau

Modell-Token, Hosting und die Zeit Ihres Teams

Wartung

AI Chatbot

Elfsight hält es am Laufen

Ihr eigener Bau

Ihr Team

FAQ