Web apps

How to add an AI chatbot to your web app

September 15, 2026
How to add an AI chatbot to your web app

In TeleportHQ, you add an AI chatbot for your visitors with the AI assistant chat feature. In the editor's left sidebar, open Plugins, click AI assistant chat and switch it on. Then pick a database, add your OpenAI API key, choose a model and choose what the chatbot should know (your pages, products, blog posts or your own documents). Visitors chat with it on your published web app.

Before you start

  • The chatbot needs a web app. It answers from a server. In a website, switching it on opens the Enable Web App features? window first. See How to turn a website into a web app.
  • A PostgreSQL-type database. The chatbot stores its knowledge and conversations there. You can use the built-in TeleportHQ database, Supabase, PostgreSQL or CockroachDB. Databases other than TeleportHQ's need the pgvector extension.
  • An OpenAI API key. Visitor conversations use your own OpenAI account. You can find a key at https://platform.openai.com/api-keys. If your project already has an OpenAI key under AI Providers, the chatbot reuses it.
  • AI tokens. Training the chatbot on your content uses TeleportHQ AI tokens. See What uses AI tokens, and how much?

Steps

1. Switch on the AI assistant chat

  1. In the left sidebar, click Plugins (the four-squares icon above Growth).
  2. Click the AI assistant chat row. It shows Off. Its settings open in a drawer beside the list.
The TeleportHQ Plugins panel with the AI assistant chat row, marked Off, highlighted
  1. Under Feature, click the switch next to AI assistant chat enabled. In a website, the Enable Web App features? window opens first: click Enable Web App features to continue.
The AI assistant chat settings drawer in TeleportHQ with the AI assistant chat enabled switch highlighted
  1. The Activate AI Assistant Chat window opens. Read what will be set up ("You're about to activate the AI Assistant Chat for your project. This will enable:"), then click Continue.
The TeleportHQ Activate AI Assistant Chat window on its Confirm step, with the Continue button highlighted

2. Choose the database

  1. Under Select Database Type, keep TeleportHQ database ("Managed by TeleportHQ") to use the built-in database, or choose one of your own PostgreSQL-type data sources. To connect a new one, click Create New Data Source.
  2. Click Continue.

If your project already has a database for features like sign-in or a store, TeleportHQ reuses it and skips this step. If you choose your own PostgreSQL database, the step shows pgvector Extension Required: run CREATE EXTENSION IF NOT EXISTS vector; in your database first.

3. Add your OpenAI key and choose a model

  1. Paste your OpenAI API key. TeleportHQ saves it as a project secret.
  2. Under Model, pick the OpenAI model that answers your visitors. GPT-4o mini is marked Recommended ("Fast and affordable"). The list goes from GPT-5.5, GPT-5.6 Sol, GPT-5.6 Terra, GPT-5.1, GPT-5 and GPT-5 mini to o3, GPT-4.1, GPT-4.1 mini, GPT-4o and GPT-4o mini.
  3. Click Continue.
The OpenAI step of the TeleportHQ Activate AI Assistant Chat window, with the model cards and the selected GPT-4o mini, marked Recommended, highlighted

To add the key later, click Skip for now. TeleportHQ warns "No OpenAI API key provided"; click Continue without key to go on. The chatbot won't answer until you add a key.

4. Choose what the chatbot knows

  1. Choose the knowledge sources:
    • All project text content: the text on your pages.
    • Live product answers: answers from your store's products (only if you have a store).
    • Live blog answers: answers from your blog posts (only if you have a blog).
  2. Click Activate AI Assistant. With nothing selected, TeleportHQ warns you first, and the button becomes Activate without knowledge.
  3. When you see AI Assistant Chat is Ready!, click Show Me for a short tour, or Maybe Later.

Customize the TeleportHQ chatbot

After activation, the AI assistant chat row in Plugins shows On, and an AI assistant chat button appears in the left sidebar. Click that button to open the AI Assistant Chat panel. You can also open the panel from the row's drawer: under Panel, next to AI assistant chat panel, click Open. In the panel you can:

  • Read the Conversations your visitors had.
  • Add your own knowledge under Custom Knowledge Sources → Add Knowledge Source: Plain Text, Upload Document (PDF, Word, Excel, CSV, HTML or TXT, up to 50 MB) or Google Docs (a public Google Docs or Google Sheets link).
  • Click AI Assistant Settings (the gear at the top of the panel) to change the Chat Name, the welcome and fallback messages, the Bubble Position, the assistant's actions (such as adding products to the cart), and your OpenAI key and Model. Save key and model changes with Save Provider Settings, then publish again.

The AI assistant chat drawer in Plugins also holds the quick settings: where the chat bubble sits, the Chat name and the Welcome message. To hide the chat's button from the left sidebar, turn off Show in the left sidebar in the same drawer. The chat stays on your site.

Check that it worked

Publish your web app, open the live site and click the chat bubble. Ask a question about your content, for example "What are your opening hours?". In the editor the chat is a preview only ("Preview only — The chat answers live questions after you publish the project.").

Troubleshooting

The chatbot says "Something went wrong while answering — please try again." Check that your OpenAI key is saved and still valid. Open AI Assistant Settings in the AI Assistant Chat panel, or Project settings → Credentials → AI Providers. See How to use your own AI provider keys in your web app.

The AI assistant chat row in Plugins shows an orange warning icon The chat is on but has no API key. Click the row: its drawer lists The chat has no AI provider key under Needs attention. Click Open settings to open the chat's settings, add your OpenAI key and click Save Provider Settings.

The editor shows a yellow issues chip about the AI Assistant Chat The chat is on but has no API key. Click the chip at the top left of the editor (for example 1 issue). In the Issues window, under AI Assistant Chat, paste your OpenAI key and click Save OpenAI.

Training stopped or asks me to buy tokens Training knowledge sources uses TeleportHQ AI tokens. Buy more, or wait for your monthly allowance. See What happens when I run out of AI tokens?

Good to know

  • Only OpenAI. The chatbot answers with OpenAI models only, because your knowledge is indexed with OpenAI. The Anthropic, Google and other providers under AI Providers are for AI steps in workflows.
  • Turning it off. In AI Assistant Settings, under Disable AI Assistant Chat, type disable ai assistant and click Disable AI Assistant Chat. You can also turn off AI assistant chat enabled in the chat's Plugins drawer and confirm with Disable AI assistant chat. Either way, this removes the chat and deletes what it learned. Publish again for the change to reach your live site.
  • Who pays for answers. Your visitors' questions are answered with your OpenAI key, so OpenAI bills you for that usage.
Share

Related Articles

How to use your own AI provider keys in your web app

In TeleportHQ, you add your own OpenAI, Anthropic, Google, Cohere, Mistral AI, Meta (a Together AI key) or Perplexity API key under Project settings → Credentials → AI Providers; the AI steps in your web app's workflows (and, for OpenAI, the AI chatbot) then run on your key, and the provider bills you directly.

What is a web app in TeleportHQ?

In TeleportHQ, a web app is a project that uses server features (workflows, user sign-in, a store, bookings, a blog or help center, an admin panel, an AI chatbot); it publishes from TeleportHQ, can't be downloaded as code, and needs a Web App slot to keep running after 7 days, while show/hide, pop-ups and browser widgets work in websites too.

What uses AI tokens, and how much?

In TeleportHQ, every AI feature uses AI tokens for the AI work it really does, so costs vary; as a guide, an AI website page is about 3,000 tokens, a web app page about 15,000, a new section at least 1,500 and a 4-second AI video about 9,000, while stock images cost nothing, a run that fails before the AI works costs nothing, and AI 3D models aren't available yet.

How to set up the built-in TeleportHQ database

To add the built-in TeleportHQ database, open Data Sources in the editor's left sidebar, click + (Add Data Source), choose TeleportHQ database and click Setup TeleportHQ Database; TeleportHQ creates a hosted database for the project that you then fill with tables.

How to publish a web app

You publish a TeleportHQ web app like a website, with Publish → Publish to Production; a web app not covered by a Web App slot can publish with a TeleportHQ watermark for 7 days, after which it needs a slot to stay online.

What can the TeleportHQ AI Assistant do?

The TeleportHQ AI Assistant is a chat in the editor that changes your pages, builds animations, scroll stories and page transitions, generates pages, images and scroll videos, manages your database, online store, bookings and blog settings, sets up SEO and project settings, builds workflows in web apps, publishes, and answers how-to questions from the help center.