forked from langchain-ai/langchain-nextjs-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
page.tsx
80 lines (79 loc) · 2.45 KB
/
page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import { ChatWindow } from "@/components/ChatWindow";
export default function Home() {
const InfoCard = (
<div className="p-4 md:p-8 rounded bg-[#25252d] w-full max-h-[85%] overflow-hidden">
<h1 className="text-3xl md:text-4xl mb-4">
▲ Next.js + LangChain.js 🦜🔗
</h1>
<ul>
<li className="text-l">
🤝
<span className="ml-2">
This template showcases a simple chatbot using{" "}
<a href="https://js.langchain.com/" target="_blank">
LangChain.js
</a>{" "}
and the Vercel{" "}
<a href="https://sdk.vercel.ai/docs" target="_blank">
AI SDK
</a>{" "}
in a{" "}
<a href="https://nextjs.org/" target="_blank">
Next.js
</a>{" "}
project.
</span>
</li>
<li className="hidden text-l md:block">
💻
<span className="ml-2">
You can find the prompt and model logic for this use-case in{" "}
<code>app/api/chat/route.ts</code>.
</span>
</li>
<li>
🏴☠️
<span className="ml-2">
By default, the bot is pretending to be a pirate, but you can change
the prompt to whatever you want!
</span>
</li>
<li className="hidden text-l md:block">
🎨
<span className="ml-2">
The main frontend logic is found in <code>app/page.tsx</code>.
</span>
</li>
<li className="text-l">
🐙
<span className="ml-2">
This template is open source - you can see the source code and
deploy your own version{" "}
<a
href="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/langchain-ai/langchain-nextjs-template"
target="_blank"
>
from the GitHub repo
</a>
!
</span>
</li>
<li className="text-l">
👇
<span className="ml-2">
Try asking e.g. <code>What is it like to be a pirate?</code> below!
</span>
</li>
</ul>
</div>
);
return (
<ChatWindow
endpoint="api/chat"
emoji="🏴☠️"
titleText="Patchy the Chatty Pirate"
placeholder="I'm an LLM pretending to be a pirate! Ask me about the pirate life!"
emptyStateComponent={InfoCard}
></ChatWindow>
);
}