1
"use client";
2
3
import { ChatMessage } from "humanloop/api";
4
import * as React from "react";
5
6
const { useState } = React;
7
8
export default function Home() {
9
  const [messages, setMessages] = useState<ChatMessage[]>([]);
10
  const [userInputValue, setUserInputValue] = useState("");
11
12
  const onSend = async () => {
13
    const userMessage: ChatMessage = {
14
      role: "user",
15
      content: userInputValue,
16
    };
17
18
    setUserInputValue("");
19
20
    const newMessages = [...messages, userMessage];
21
22
    setMessages(newMessages);
23
24
    // REPLACE ME LATER
25
    const res = "I'm not a language model. I'm just a string. 😞";
26
    // END REPLACE ME
27
28
    const assistantMessage: ChatMessage = {
29
      role: "assistant",
30
      content: res,
31
    };
32
33
    setMessages([...newMessages, assistantMessage]);
34
  };
35
36
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
37
    if (e.key === "Enter") {
38
      onSend();
39
    }
40
  };
41
42
  return (
43
    <main className="flex flex-col items-center min-h-screen p-8 md:p-24">
44
      <h1 className="text-2xl font-bold leading-7 text-gray-900 dark:text-gray-200 sm:truncate sm:text-3xl sm:tracking-tight">
45
        Customer Support Chat
46
      </h1>
47
48
      <div className="flex-col w-full mt-8">
49
        {messages.map((msg, idx) => (
50
          <MessageRow key={idx} msg={msg}></MessageRow>
51
        ))}
52
53
        <div className="flex w-full">
54
          <div className="min-w-[70px] uppercase text-xs text-gray-500 dark:text-gray-300 pt-2">
55
            User
56
          </div>
57
          <input
58
            className="w-full px-4 py-1 mr-3 leading-tight text-gray-700 break-words bg-transparent border-none appearance-none dark:text-gray-200 flex-grow-1 focus:outline-none"
59
            type="text"
60
            placeholder="Type your message here..."
61
            aria-label="Prompt"
62
            value={userInputValue}
63
            onChange={(e) => setUserInputValue(e.target.value)}
64
            onKeyDown={(e) => handleKeyDown(e)}
65
          ></input>
66
          <button
67
            className="px-3 font-medium text-gray-500 uppercase border border-gray-300 rounded dark:border-gray-100 dark:text-gray-200 hover:border-blue-500 hover:text-blue-500"
68
            onClick={() => onSend()}
69
          >
70
            Send
71
          </button>
72
        </div>
73
      </div>
74
    </main>
75
  );
76
}
77
78
interface MessageRowProps {
79
  msg: ChatMessage;
80
}
81
82
const MessageRow: React.FC<MessageRowProps> = ({ msg }) => {
83
  return (
84
    <div className="flex pb-4 mb-4 border-b border-gray-300">
85
      <div className="min-w-[80px] uppercase text-xs text-gray-500 leading-tight pt-1">
86
        {msg.role}
87
      </div>
88
      <div className="pl-4 whitespace-pre-line">{msg.content as string}</div>
89
    </div>
90
  );
91
};

1
import { HumanloopClient } from "humanloop";
2
3
if (!process.env.HUMANLOOP_API_KEY) {
4
  throw Error(
5
    "no Humanloop API key provided; add one to your .env.local file with: `HUMANLOOP_API_KEY=..."
6
  );
7
}
8
9
const humanloop = new HumanloopClient({
10
  environment: "https://api.humanloop.com/v5",
11
  apiKey: process.env.HUMANLOOP_API_KEY,
12
});
13
14
export async function POST(req: Request): Promise<Response> {
15
  const messages = await req.json();
16
17
  const response = await humanloop.prompts.call({
18
    path: "customer-support-agent",
19
    messages,
20
    // This is the name of your company. You can change it to any string you like.
21
    // It matches the companyName input defined in the Prompt Version template.
22
    inputs: {
23
      companyName: "Acme Co.",
24
    },
25
    providerApiKeys: {
26
      openai: process.env.OPENAI_API_KEY,
27
    },
28
  });
29
30
  return new Response(JSON.stringify(response.logs[0].output));
31
}

HUMANLOOP_API_KEY=...

1
// REPLACE ME LATER <-- Remove these now
2
const response = await fetch("/api/chat", {
3
  method: "POST",
4
  headers: {
5
    "Content-Type": "application/json",
6
  },
7
  body: JSON.stringify(newMessages),
8
});
9
10
const res = await response.json();
11
// END REPLACE ME <-- Remove these now

1
import { HumanloopClient } from "humanloop";
2
import { readableStreamAsyncIterable } from "humanloop/core/streaming-fetcher/Stream";
3
4
if (!process.env.HUMANLOOP_API_KEY) {
5
  throw Error(
6
    "no Humanloop API key provided; add one to your .env.local file with: `HUMANLOOP_API_KEY=..."
7
  );
8
}
9
10
const humanloop = new HumanloopClient({
11
  environment: "https://api.humanloop.com/v5",
12
  apiKey: process.env.HUMANLOOP_API_KEY,
13
});
14
15
export async function POST(req: Request): Promise<Response> {
16
  const messages = await req.json();
17
18
  const response = await humanloop.prompts.callStream({
19
    path: "customer-support-agent",
20
    messages,
21
    // This is the name of your company. You can change it to any string you like.
22
    // It matches the companyName input defined in the Prompt Version template.
23
    inputs: {
24
      companyName: "Acme Co.",
25
    },
26
    providerApiKeys: {
27
      openai: process.env.OPENAI_API_KEY,
28
    },
29
  });
30
31
  const stream = readableStreamAsyncIterable(response);
32
33
  // Create a ReadableStream from the async iterable
34
  const readableStream = new ReadableStream({
35
    async start(controller) {
36
      try {
37
        for await (const chunk of stream) {
38
          // Serialize the chunk to a string
39
          const serializedChunk = JSON.stringify(chunk);
40
          // Enqueue the serialized chunk as a Uint8Array
41
          controller.enqueue(new TextEncoder().encode(serializedChunk));
42
        }
43
        controller.close();
44
      } catch (error) {
45
        controller.error(error);
46
      }
47
    },
48
  });
49
50
  return new Response(readableStream, {
51
    headers: { "Content-Type": "application/json" },
52
  });
53
}

1
const onSend = async () => {
2
  const userMessage: ChatMessage = {
3
    role: "user",
4
    content: userInputValue,
5
  };
6
7
  setUserInputValue("");
8
9
  const newMessages = [
10
    ...messages,
11
    userMessage,
12
    { role: ChatRole.Assistant, content: "" },
13
  ];
14
15
  setMessages(newMessages);
16
17
  const response = await fetch("/api/chat", {
18
    method: "POST",
19
    headers: {
20
      "Content-Type": "application/json",
21
    },
22
    body: JSON.stringify(newMessages),
23
  });
24
25
  const decoder = new TextDecoder();
26
  const reader = response?.body?.getReader();
27
  let done = false;
28
  while (!done && reader) {
29
    const chunk = await reader.read();
30
    const value = chunk.value;
31
    done = chunk.done;
32
    const val = decoder.decode(value);
33
    const jsonChunks = val
34
      .split("}{")
35
      .map(
36
        (s) => (s.startsWith("{") ? "" : "{") + s + (s.endsWith("}") ? "" : "}")
37
      );
38
    const tokens = jsonChunks.map((s) => JSON.parse(s).output).join("");
39
    setMessages((messages) => {
40
      const updatedLastMessage = messages.slice(-1)[0];
41
      return [
42
        ...messages.slice(0, -1),
43
        {
44
          ...updatedLastMessage,
45
          content: (updatedLastMessage.content as string) + tokens,
46
        },
47
      ];
48
    });
49
  }
50
};