How to Add an AI Chatbot to React
React powers millions of web apps. Tuqlas lets you drop an AI chatbot into any React project using a simple useEffect hook — no backend setup, no API keys to manage.
- Under 60 seconds
- Zero dependencies
- No build step
01
Create a chatbot on Tuqlas
Sign up at tuqlas.com, create a chatbot, and grab your embed key from the dashboard.
02
Add a useEffect in your root component
Use useEffect to dynamically create and append the Tuqlas script tag. It loads once and cleans up on unmount.
03
Ship it
That's it. The chat bubble appears in the bottom-right corner of your app.
src/App.tsx
import { useEffect } from "react"
export default function App() {
useEffect(() => {
const script = document.createElement("script")
script.src = "https://tuqlas.com/chatbot.js"
script.setAttribute("data-key", "tq_live_xxxxxxxxxxxx")
script.defer = true
document.body.appendChild(script)
return () => script.remove()
}, [])
return <div>{/* your app */}</div>
}💡 Tip
This works with Create React App, Vite, and any other React setup. The script is framework-agnostic.