⚛️ React Guide

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.

Create a chatbot on Tuqlas

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.

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.

Ready to add a chatbot to React?

Create your chatbot and get your embed key in under a minute.

Get Started →View All Frameworks