Build a a website chat widget AI Bot with OpenAI (ChatGPT models)
Step-by-step guide to running a OpenAI (ChatGPT models)-powered AI bot on a website chat widget with LangBot: model setup, bot credentials, networking, testing and troubleshooting.
This recipe puts a OpenAI (ChatGPT models) model behind a a website chat widget bot. LangBot receives messages from a website chat widget, runs them through a pipeline, and sends the answer back, so you do not write any platform code.
Use OpenAI's GPT models with LangBot's built-in Agent, with optional knowledge bases, MCP tools, Skills and a code sandbox.
What you need
- A running LangBot instance: LangBot Cloud (no server needed) or a self-hosted deployment with Docker or
uvx langbot. - A OpenAI (ChatGPT models) account or server you can call from LangBot.
- Nothing from a third party. Optionally a Cloudflare Turnstile site key and secret key for anti-abuse.
Networking
Visitors' browsers talk to LangBot directly, so LangBot must be reachable at a public HTTPS address. LangBot Cloud includes one.
1. Add the OpenAI (ChatGPT models) model
- Create an API key in the OpenAI console.
- In LangBot, open Models, add an LLM model with the provider set to OpenAI and request URL
https://api.openai.com/v1, then paste the API key and the model ID. - Enable Tool Use if the model supports function calling; MCP tools, Skills and the sandbox need it.
- Use a current model ID from OpenAI's model list. Any OpenAI-compatible endpoint works the same way with its own request URL.
2. Create a pipeline
Open Pipelines in the LangBot WebUI, create a pipeline (or edit the default one) and set AI as follows.
| Field | Value |
|---|---|
| Runner | Local Agent (built-in Agent) |
| Model | The model you just added. You can add fallback models. |
| Prompt | Instructions: who the bot is, tone, what it must not do. |
| Knowledge Bases | Optional. Attach a knowledge base so answers come from your documents. |
3. Create the a website chat widget bot
- Create a bot with the Web Page Bot adapter and bind a pipeline.
- Copy the embed code into your site and replace
localhost:5300with LangBot's public address.
4. Bind and test
Open the bot, select the pipeline you created, save and make sure the bot is enabled.
Open the page with the widget and start a conversation.
Troubleshooting
- Region or network errors: LangBot must be able to reach the request URL. Behind a restricted network, use a compatible gateway you can reach.
- The widget does not load: the embed code still points at
localhost, or the LangBot address is not served over HTTPS. - Check Monitoring in the WebUI: every message, pipeline run and error is recorded there.
FAQ
Do I need a server with a public IP for a website chat widget?
Yes, or use LangBot Cloud. Visitors' browsers talk to LangBot directly, so LangBot must be reachable at a public HTTPS address. LangBot Cloud includes one.
Does the a website chat widget bot support streaming replies?
Check the platform feature matrix for what this platform supports. Replies are delivered once the AI back end has finished.
Can the same OpenAI (ChatGPT models) setup serve other platforms too?
Yes. A pipeline can be bound to many bots, so one configuration can answer on several platforms at once.
Related guides
- Full a website chat widget setup guide
- Model configuration
- Other AI back ends on a website chat widget: Dify · n8n · Coze · Langflow · DeepSeek
- OpenAI (ChatGPT models) on other platforms: Telegram · Discord · Slack · Lark (Feishu) · DingTalk · WeCom (internal app)
Build a Mattermost AI Bot with OpenAI (ChatGPT models)
Step-by-step guide to running a OpenAI (ChatGPT models)-powered AI bot on Mattermost with LangBot: model setup, bot credentials, networking, testing and troubleshooting.
Build a Telegram AI Bot with Claude
Step-by-step guide to running a Claude-powered AI bot on Telegram with LangBot: model setup, bot credentials, networking, testing and troubleshooting.