Add Truplexy chat to any website

npm i @truplexy/server

import { createHandler } from "@truplexy/server";

// Reads TRUPLEXY_CHAT_KEY from the environment (.env.local, or your host's settings).
export const POST = createHandler();
export const maxDuration = 60; // replies can take up to 45 seconds

npm i @truplexy/server

import { createHandler } from "@truplexy/server";

const truplexy = createHandler({ chatKey: process.env.TRUPLEXY_CHAT_KEY });

export default defineEventHandler((event) => truplexy(toWebRequest(event)));

npm i @truplexy/server

import { createHandler } from "@truplexy/server";
import { TRUPLEXY_CHAT_KEY } from "$env/static/private";
import type { RequestHandler } from "./$types";

const truplexy = createHandler({ chatKey: TRUPLEXY_CHAT_KEY });

export const POST: RequestHandler = ({ request }) => truplexy(request);

npm i @truplexy/server

import { createHandler } from "@truplexy/server";

const truplexy = createHandler();

export const action = ({ request }: { request: Request }) => truplexy(request);

npm i @truplexy/server

import type { APIRoute } from "astro";
import { createHandler } from "@truplexy/server";

export const prerender = false; // needs a server adapter (Vercel, Netlify, Node…)

const truplexy = createHandler({ chatKey: import.meta.env.TRUPLEXY_CHAT_KEY });

export const POST: APIRoute = ({ request }) => truplexy(request);

npm i @truplexy/server

import express from "express";
import { createNodeHandler } from "@truplexy/server/node";

const app = express();

// Reads TRUPLEXY_CHAT_KEY from the environment.
app.post("/api/truplexy", createNodeHandler());

app.listen(3000);

npm i @truplexy/server

import { Hono } from "hono";
import { env } from "hono/adapter";
import { createHandler } from "@truplexy/server";

const app = new Hono();

app.post("/api/truplexy", (c) => createHandler({ chatKey: env<{ TRUPLEXY_CHAT_KEY: string }>(c).TRUPLEXY_CHAT_KEY })(c.req.raw));

export default app;

npm i @truplexy/server && npx wrangler secret put TRUPLEXY_CHAT_KEY

import { createHandler } from "@truplexy/server";

export default {
  fetch(request: Request, env: { TRUPLEXY_CHAT_KEY: string }) {
    if (new URL(request.url).pathname !== "/api/truplexy") return new Response("Not found", { status: 404 });
    return createHandler({
      chatKey: env.TRUPLEXY_CHAT_KEY,
      // The site the widget is on, when it isn't served by this Worker.
      allowedOrigins: ["https://www.example.com"],
    })(request);
  },
};

npm i @truplexy/server

import { createHandler } from "@truplexy/server";

// For a site with no server of its own (static HTML, Webflow, Wix, Squarespace…):
// deploy this one file to Vercel and point the widget's endpoint at it.
export const POST = createHandler({ allowedOrigins: ["https://www.example.com"] });
export const OPTIONS = POST;
export const maxDuration = 60;

<!-- Before </body>. data-endpoint is your route from step 2. -->
<script
  src="https://cdn.jsdelivr.net/npm/@truplexy/web@0/dist/truplexy.min.js"
  data-endpoint="/api/truplexy"
  defer
></script>

npm i @truplexy/react

import { TruplexyChat } from "@truplexy/react";

export default function App() {
  return (
    <>
      {/* …your app… */}
      <TruplexyChat endpoint="/api/truplexy" />
    </>
  );
}

npm i @truplexy/react

import { TruplexyChat } from "@truplexy/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <TruplexyChat endpoint="/api/truplexy" />
      </body>
    </html>
  );
}

npm i @truplexy/react

import { TruplexyChat } from "@truplexy/react";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>{/* Meta, Links… */}</head>
      <body>
        {children}
        <TruplexyChat endpoint="/api/truplexy" />
        {/* ScrollRestoration, Scripts… */}
      </body>
    </html>
  );
}

npm i @truplexy/vue

<script setup lang="ts">
import { TruplexyChat } from "@truplexy/vue";
</script>

<template>
  <RouterView />
  <TruplexyChat endpoint="/api/truplexy" />
</template>

npm i @truplexy/vue

<script setup lang="ts">
import { TruplexyChat } from "@truplexy/vue";
</script>

<template>
  <NuxtPage />
  <ClientOnly>
    <TruplexyChat endpoint="/api/truplexy" />
  </ClientOnly>
</template>

npm i @truplexy/web

<script>
  import { onMount } from "svelte";
  let { children } = $props();
  onMount(() => import("@truplexy/web"));
</script>

{@render children()}
<truplexy-chat endpoint="/api/truplexy"></truplexy-chat>

npm i @truplexy/web

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import "@truplexy/web";

@Component({
  selector: "app-root",
  imports: [RouterOutlet],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <router-outlet />
    <truplexy-chat endpoint="/api/truplexy"></truplexy-chat>
  `,
})
export class AppComponent {}

npm i @truplexy/web

<slot />
<truplexy-chat endpoint="/api/truplexy"></truplexy-chat>

<script>
  import "@truplexy/web";
</script>

npm i @truplexy/web

import "@truplexy/web";
import type { TruplexyChatAttributes } from "@truplexy/web";

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "truplexy-chat": TruplexyChatAttributes & JSX.HTMLAttributes<HTMLElement>;
    }
  }
}

export default function App() {
  return (
    <>
      {/* …your app… */}
      <truplexy-chat endpoint="/api/truplexy" />
    </>
  );
}