<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ChatKit Agent</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
margin: 0;
font-family: system-ui, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f5f5f5;
}
#chatkit {
width: 360px;
height: 600px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
background: white;
}
</style>
</head>
<body>
<div id="chatkit"></div>
<!-- Load ChatKit -->
<script src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"></script>
<script>
async function getClientSecret(existingSecret) {
const res = await fetch(
"https://YOUR-WORKER-NAME.YOUR-ACCOUNT.workers.dev",
{ method: "POST" }
);
const { client_secret } = await res.json();
return client_secret;
}
function init() {
if (!window.ChatKit) {
setTimeout(init, 50);
return;
}
ChatKit.init({
container: "#chatkit",
api: {
getClientSecret,
},
theme: "light",
welcomeMessage: "Hi! How can I help you today?",
});
}
init();
</script>
</body>
</html>