Bygg en AI-Powered Chatbot

Feb 2, 2026
hvordan
An illustration showing an android with an electronic brain in front of a globe marked with symbols indicated technological advancement, such as binary code, molecules and communications relays.
[1. 3]

Artificial Intelligence (AI) gjør at vi kan skape nye måter å se på eksisterende problemer, fra å revurdere miljømessige strategier til hvordan vi lærer. Dine prosjekter - enten apper, nettsteder eller spill - kan utnytte AI for å gjøre dem mer engasjerende, enklere å bruke og ha mer verdifulle resultater. En slik metode innebærer å lage en naturpråklig chatbot for å hjelpe brukerne med å samhandle med nettstedet ditt.

Hvis du vil opprette din første chatbot, bruker vi Googles nye dialogflow-verktøysett. Det utnytter kraftig maskinlæring, samt tale-til-tekst. Det kan inkorporeres rett inn på nettstedet ditt som en widget eller tilpasset dine behov.

Hvis du er i ferd med å planlegge et nytt nettsted, trenger du råd om alt fra det ideelle Nettstedbygger til hvilken Web Hosting. Tjenesten å velge, så sjekk ut våre guider. Opprette et nytt designsystem? Lagre det sikkert i skylagring Så det er tilgjengelig for hele ditt lag. Nå på hvordan å lage en chatbot ...

01. Opprett en konto

Gå til dialogflow.com. og opprett din konto. Logg inn og godta tillatelsene for å aktivere dialogflyten for å få tilgang til kontoen din.

02. Lag en agent

Dialogflow bruker begrepet 'agent' for å representere forekomster av din AI. Tenk på agenten som den virtuelle intelligensen du skaper. Du kan ha mange agenter som jobber for deg, hver med sin egen personlighet og formål.

Klikk på knappen 'Opprett agent' og skriv inn et navn for din agent: 'Hal 9000'.

03. Opprett en hensikt

Først må du opprette en hensikt. Vi definerer "intensjonen" i brukerens innganger. Klikk på "Opprett hensikt" og navngi den "åpne dører". Trykk på 'Lagre'.

04. Tren AI for denne hensikten

An image showing the Google Dialogflow interface – in the box that's marked 'USER SAYS', it reads 'open the door hal' and in the box marked 'DEFAULT RESPONSE', it reads 'Sorry Dave. I can't do that now'.

Trene AI for en hensikt ved å gi setninger som en bruker kan bruke

Tren AI for denne hensikten ved å gi setninger som en bruker kan bruke. NLP AI vil bruke disse og avledede variasjoner for å trene agenten. Legg til følgende treningsfraser i vinduet "Treningsfraser" og legg til så mange av dine egne som du vil:

  • 'Åpne Pod Bay Doors, Hal.'
  • "Åpne dørene."
  • «La meg inn, Hal!»

05. Legg svar

Deretter må du legge til noen svar som agenten vil svare med. Du skriver inn disse i vinduet "Svars". Prøv noen som dette:

  • "Jeg er redd jeg kan ikke gjøre det, Dave."
  • "Jeg kan ikke gjøre det akkurat nå."

Trykk deretter på "Legg til svar" og "Lagre" opp på toppen igjen. Du vil se varsler om at agenten blir trent og så er den klar.

06. Test ut chatbot

På høyre side av skjermen er et testverktøy. Chatbot vil bruke Googles tale-til-tekst-tjeneste for å oversette stemmen din til tekst hvis du prøver det ut. Du bør se resultatene av forespørselen din og svaret som AI-agenten er valgt. Veldig kult!

07. Opprett og bruk en enhet

Enheter er konsepter som kan defineres og gjenbrukes i agentens svar som variabler. La oss trene AI til å forstå når en bruker uttrykker en følelse, og bruk det i svaret på brukeren.

På venstre meny klikker du på "Enheter". Skriv 'følelser' for navnet på din nye enhet. Hold 'Define Synonymer' sjekket. Klikk i tabellen under og skriv 'sint' som den første følelsen. Deretter klikker du til høyre for det og legg til synonymer som "Mad", "opprørt", og så videre. Deretter legger du til en annen oppføring for 'redd' og bruk synonymer 'redd' '' skremt ', etc., som du liker. Trykk på "Lagre" når du er ferdig.

Dette har nå trent agenten til å forstå at "sint" og "redd" er følelser en bruker kan kommunisere. Alle synonymer er variasjoner som kan oppstå. AI vil også generere noen.

08. Opprett en ny hensikt

Nå skal vi skape en ny hensikt å bruke "følelsesenhetens enhet vi har opprettet. Ring denne hensikten 'følelser' og klikk på "Lagre".

Neste legg til nye treningsfraser som "du skremmer meg", "du gjør meg gal", og "Jeg er veldig sint," ved hjelp av variasjoner av sint og skremte søkeord. Dette vil trene agenten for å forstå de ulike måtene som en bruker kan uttrykke denne følelsesmessige utsagnet.

Du vil legge merke til at systemet fremhever de skremte og sint ordene for deg. Det er allerede flagget disse som enheter. Det har også lagt til en oppføring i vinduet "Handlinger og parametere". Dette gjør at du kan bruke disse enhetene i dine svar også.

09. Legg til et svar med den nye "følelsesenhetens enhet

I Svarsvinduet legger du til nye svar som bruker denne nye enheten. Legg merke til "$" for å betegne "$ følelsesenhetens enhet. Prøv å legge til disse svarene:

  • "Jeg beklager at du føler deg $ følelser, Dave."
  • "Følelse av $ følelser er et menneskelig svar, Dave."

Klikk på "Legg til svar" og trykk på "Lagre" -knappen øverst på skjermen for å lagre hele hensikten.

10. Test din chatbot på nytt

Prøv å si eller skrive følgende setninger i testverktøyet.

  • "Du gjør meg veldig sint Hal."
  • "Du er freaking meg ut."

Legg merke til hvordan det reagerte med å bruke "redd" med den andre? Det brukte vårt synonym, "freaked out" å vite at vi mente redd. Veldig kult.

Du er velkommen til å leke med dette, så vel som å legge til noen flere hensikter og svar som du liker, og så legger vi til dette på en nettside.

11. Aktiver webintegrasjon

An image showing Google Dialogflow's pop-up featuring a direct link and embeddable HTML snippet for a created chatbot.

Hvis du klikker på Web Demo, vil du vise en kodeutklippet du kan bruke til å slippe widgeten til ditt eget nettsted

Hvis du vil legge den til på nettsiden din, klikker du på "Integrations" på venstre meny. Deretter klikker du på "web demo" -boksen for å slå det alternativet på.

En popup vises som viser deg en direkte kobling, slik at du kan bruke til å teste integrasjonen ut med en gang. Det vil også vise en kodeutklipp som du kan bruke til å slippe widgeten til ditt eget nettsted. Kopier den kastet til utklippstavlen, slik at du kan lime den inn i nettstedet ditt.

12. Opprett en grunnleggende nettside og legg til stikketten

Opprett en grunnleggende HMTL-side og ta med den kodestrømmen neste. Prøv følgende kode og last den opp til serveren din eller kjør den på din lokale server. Bytt ut snippeten nedenfor med den du kopierte fra dialogflaten din: 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; net - ai chatbot & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; iframe
    tillate = "mikrofonen;" bredde = "350" høyde = "430" src = "https://console.dialogflow.com/api-client/demo/embedded/bbd27d04-5546-4b62-85a5-c373575a33aa" & gt;
& lt; / iframe & gt;
& lt; / body & gt;
& lt; / html & gt;

Denne artikkelen ble opprinnelig publisert i utgave 312 i Net, verdens bestselgende magasin for webdesignere og utviklere. Kjøp utgave 312. eller Abonner på netto .

Keen for å lære mer om hvordan du kan ta med AI til dine nettsteder og apper?

An image promoting generate New York 2019 from April 24th -25th and speaker Josh Clark's keynote 'AI is your new design material'.

Generer, den prisbelønte konferansen for webdesignere, returnerer til NYC den 24-25 april! For å bestille billetter, besøk www.generateconf.com

Ivrige etter å lære mer om hvordan du kan ta med AI i designene dine? Josh Clark, grunnlegger av stort medium, vil gi sin keynote 'AI er ditt nye designmateriale' på generere New York 25. april, der han vil lære deg å bruke maskingenerert innhold, innsikt og samhandling som et designmateriale i ditt daglige arbeid.

Generer New York Runs fra april 24-25 - Få dine billetter nå !

Relaterte artikler:

  • En guide til Googles skyvisjon
  • 7 store teknologiske trender i 2019 som designere trenger å vite
  • Vil designere bli erstattet av roboter?

hvordan - Mest populære artikler

Hvordan rangere i Google

hvordan Feb 2, 2026

[1. 3] (Bildekreditt: Buzzfeed) Så, du vil vite hvordan du skal rangere i Google. Den gode nyheten er at du ikke tren..

Slik lager du en fil for utskrift

hvordan Feb 2, 2026

[1. 3] Som en kunstverk på Wieden + Kennedy London, I. Design for PRINT. jevnlig. Det er visse krav..

Kom i gang med monotypeutskrift

hvordan Feb 2, 2026

[1. 3] Noen ganger må du riste ting opp med din blyant tegninger , og slipp av impulsen til å gjøre for mye. En ..

Lag en realistisk fantasy ridder

hvordan Feb 2, 2026

[1. 3] I dette verkstedet viser vi deg hvordan du maler en ridder Photoshop. , samt maleri med tradisjonelle medier..

Forbedre penselstrøkene i oljer

hvordan Feb 2, 2026

Oljemaling gir det ideelle mediet for å oppnå sterkt og interessant børstearbeid. En kunstners stil av penselstrøk er det som definerer sitt arbeid og gir den personlighet. Det spiller og..

Bygg et tilpasset Maya-grensesnitt

hvordan Feb 2, 2026

Moderne programvare kan være enormt kraftig og altomfattende. Maya er ikke annerledes, og tilbyr et forvirrende array til verktøy, kommandoer og alternativer for å hjelpe deg med å nå di..

Fremskynde din tekstur arbeidsflyt

hvordan Feb 2, 2026

[1. 3] Krigeren er et personlig prosjekt som jeg hadde glede av å konseptet og designe. Jeg ønsket å skape et tegn som legemlig..

Hvordan mestre hudskygging i 3D

hvordan Feb 2, 2026

[1. 3] I lang tid nå har jeg blitt sittende fast i en rut med min 3D Art. . Ikke med å lage modellene eller scene..

Kategorier