Hono Middleware

Add the Asyntai AI chat assistant to your Hono app on Node.js, Bun, Deno or Cloudflare Workers

Overview

Hono is a small, fast web framework that runs on Node.js, Bun, Deno, Cloudflare Workers, Vercel and Netlify. The Asyntai middleware is an npm package. Add one line to your app, and the chat bubble is on every HTML page.

The assistant answers your visitors from your own content, in more than 80 languages, day and night.

Requirements

Hono 3 or Hono 4
Any runtime that Hono supports: Node.js 18 or later, Bun, Deno, Cloudflare Workers, Vercel or Netlify
An app that returns HTML pages, for example with c.html(), hono/jsx or static files
An Asyntai account. The Free plan is enough to try the widget

Installation

Follow these steps to add Asyntai to your Hono app:

Get Your Widget ID

Sign in to Asyntai and open the Install page. The widget ID is the value of data-asyntai-id in the snippet shown there. It starts with asyntai_.

Add the Package

Run this command in your project folder:

npm install hono-ai-chatbot

With Bun, use bun add hono-ai-chatbot. With Deno, import it as npm:hono-ai-chatbot.

Add the Middleware

import { Hono } from 'hono'
import { aiChatbot } from 'hono-ai-chatbot'

const app = new Hono()

app.use('*', aiChatbot({ widgetId: 'asyntai_1a2b3c4d5e6f' }))

app.get('/', (c) => c.html('<html><body><h1>Welcome</h1></body></html>'))

export default app

Use the '*' path. On Hono 3, app.use() without a path covers only some routes.

Deploy

Start or deploy your app as usual. Open a page and the chat bubble is in the corner.

Options

Option	Type	Default	What it does
`widgetId`	string	required	Your Asyntai widget ID
`skip`	`(c) => boolean`	none	Return `true` to keep the widget off a page, for example admin pages
`scriptUrl`	string	the Asyntai CDN	Advanced. Load the widget from another URL

A missing or malformed widgetId stops the app at start-up with a message that says how to fix it.

To keep the widget off your admin pages:

app.use('*', aiChatbot({
  widgetId: 'asyntai_1a2b3c4d5e6f',
  skip: (c) => c.req.path.startsWith('/admin'),
}))

To show it on one part of the site only, use a narrower path, for example app.use('/shop/*', aiChatbot({ ... })).

Placing the Tag by Hand

If you prefer to put the tag in your own layout, use chatbotScript() and print it with raw(). The middleware then sees the tag and does not add a second one.

import { raw } from 'hono/html'
import { chatbotScript } from 'hono-ai-chatbot'

const tag = chatbotScript({ widgetId: 'asyntai_1a2b3c4d5e6f' })

const Layout = (props) => (
  <html>
    <body>
      {props.children}
      {raw(tag)}
    </body>
  </html>
)

How It Works

The middleware adds the Asyntai loader to every full HTML page, just before </body>. It changes only successful GET responses of the type text/html. JSON, images, redirects and error pages pass through untouched, and so do HTML fragments without a <body> tag, such as htmx partials.

The loader waits for the page's load event, so your page always renders first. Your status code, cookies and headers stay as they are.

Tip: If you use compress(), register it first and aiChatbot() after it. Then every page gets the widget and is still compressed.

Answering From Your Content

Asyntai reads your published pages. Add your site URL in the dashboard, and the assistant answers from the same pages the widget sits on. You can also add documents, and question and answer pairs.

Removing It

Delete the aiChatbot(...) line and deploy again. The chat bubble is gone.

Plans & Pricing

The package is free. View pricing.

Need Help?

If you have any questions or run into issues, contact us at [email protected].

Documentation