# Build a a website chat widget AI Bot with Ollama

Source: https://langbot.app/docs/en/recipes/ollama/web-page

Step-by-step guide to running a Ollama-powered AI bot on a website chat widget with LangBot: model setup, bot credentials, networking, testing and troubleshooting.

This recipe puts a Ollama 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.

Run open models locally with Ollama and serve them through LangBot's built-in Agent, so conversations never leave your machines.

## What you need

- A running LangBot instance: [LangBot Cloud](https://space.langbot.app/cloud) (no server needed) or a [self-hosted deployment](https://langbot.app/docs/en/deploy/langbot/docker.md) with Docker or `uvx langbot`.
- A Ollama 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 Ollama model

1. Install Ollama and pull a model (for example `ollama pull` followed by the model name).
2. In LangBot, open **Models** and add an LLM model with the provider set to Ollama and the request URL pointing at your Ollama server (by default port `11434`).
3. If LangBot runs in Docker, `localhost` is the container itself: use the host's address (for example `host.docker.internal`) instead.

## 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

1. Create a bot with the **Web Page Bot** adapter and bind a pipeline.
2. Copy the embed code into your site and replace `localhost:5300` with 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

- Small local models may not support tool calling well; leave **Tool Use** off for models that do not support it.
- 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](https://langbot.app/docs/en/insight/platform-features.md) for what this platform supports. Replies are delivered once the AI back end has finished.

### Can the same Ollama 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](https://langbot.app/docs/en/usage/platforms/webpage.md)
- [Model configuration](https://langbot.app/docs/en/usage/models/readme.md)
- Other AI back ends on a website chat widget: [Dify](https://langbot.app/docs/en/recipes/dify/web-page.md) · [n8n](https://langbot.app/docs/en/recipes/n8n/web-page.md) · [Coze](https://langbot.app/docs/en/recipes/coze/web-page.md) · [Langflow](https://langbot.app/docs/en/recipes/langflow/web-page.md) · [DeepSeek](https://langbot.app/docs/en/recipes/deepseek/web-page.md)
- Ollama on other platforms: [Telegram](https://langbot.app/docs/en/recipes/ollama/telegram.md) · [Discord](https://langbot.app/docs/en/recipes/ollama/discord.md) · [Slack](https://langbot.app/docs/en/recipes/ollama/slack.md) · [Lark (Feishu)](https://langbot.app/docs/en/recipes/ollama/lark.md) · [DingTalk](https://langbot.app/docs/en/recipes/ollama/dingtalk.md) · [WeCom (internal app)](https://langbot.app/docs/en/recipes/ollama/wecom.md)