Skip to content

Commit 355ac9c

Browse files
olliethedevolliethedev
authored
Merge pull request #85 from better-stack-ai/docs/ai-plugin-demo-update
docs: ai plugin demo update
2 parents a39aac8 + 0a2fdd5 commit 355ac9c

16 files changed

Lines changed: 321 additions & 108 deletions

File tree

‎demos/ai-chat/app/page.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,10 @@ export default async function Home() {
3030
})) ?? [];
3131

3232
const groups: RouteGroup[] = [
33-
{ heading: "Chat", routes: staticChatRoutes },
33+
{
34+
heading: "Chat",
35+
routes: [...staticChatRoutes, { label: "Chat Widget", path: "/widget" }],
36+
},
3437
{
3538
heading: "Docs",
3639
routes: [

‎demos/ai-chat/app/pages/layout.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,12 @@ export default function PagesLayout({
6666
>
6767
Chat
6868
</Link>
69+
<Link
70+
href="/widget"
71+
className="text-muted-foreground hover:text-foreground transition-colors"
72+
>
73+
Widget
74+
</Link>
6975
<a
7076
href="/api/data/reference"
7177
className="text-muted-foreground hover:text-foreground transition-colors"

‎demos/ai-chat/app/widget/page.tsx‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import Link from "next/link";
5+
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
6+
import { StackProvider } from "@btst/stack/context";
7+
import { ChatLayout } from "@btst/stack/plugins/ai-chat/client";
8+
import { PageAIContextProvider } from "@btst/stack/plugins/ai-chat/client/context";
9+
import type { AiChatPluginOverrides } from "@btst/stack/plugins/ai-chat/client";
10+
11+
type PluginOverrides = {
12+
"ai-chat": AiChatPluginOverrides;
13+
};
14+
15+
const hasApiKey =
16+
typeof process !== "undefined" && !!process.env.NEXT_PUBLIC_HAS_OPENAI_KEY;
17+
18+
const getBaseURL = () =>
19+
typeof window !== "undefined"
20+
? window.location.origin
21+
: "http://localhost:3000";
22+
23+
export default function WidgetPage() {
24+
const [queryClient] = useState(() => new QueryClient());
25+
const baseURL = getBaseURL();
26+
27+
return (
28+
<QueryClientProvider client={queryClient}>
29+
<PageAIContextProvider>
30+
<StackProvider<PluginOverrides>
31+
basePath=""
32+
overrides={{
33+
"ai-chat": {
34+
apiBaseURL: baseURL,
35+
apiBasePath: "/api/data",
36+
mode: "public",
37+
navigate: () => {},
38+
chatSuggestions: [
39+
"What plugins does BTST offer?",
40+
"How do I install @btst/stack?",
41+
"Tell me about the blog plugin",
42+
],
43+
},
44+
}}
45+
>
46+
<div className="min-h-screen flex flex-col bg-background">
47+
{/* Nav */}
48+
<nav className="border-b bg-background sticky top-0 z-50">
49+
<div className="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">
50+
<Link
51+
href="/"
52+
className="font-semibold text-lg hover:opacity-75 transition-opacity"
53+
>
54+
BTST AI Chat Demo
55+
</Link>
56+
<div className="flex items-center gap-4 text-sm">
57+
<Link
58+
href="/pages/chat"
59+
className="text-muted-foreground hover:text-foreground transition-colors"
60+
>
61+
Chat
62+
</Link>
63+
<Link
64+
href="/widget"
65+
className="text-foreground font-medium transition-colors"
66+
>
67+
Widget
68+
</Link>
69+
<a
70+
href="/api/data/reference"
71+
className="text-muted-foreground hover:text-foreground transition-colors"
72+
>
73+
API Docs
74+
</a>
75+
<Link
76+
href="/pages/route-docs"
77+
className="text-muted-foreground hover:text-foreground transition-colors"
78+
>
79+
Route Docs
80+
</Link>
81+
</div>
82+
</div>
83+
</nav>
84+
85+
{!hasApiKey && (
86+
<div className="bg-amber-50 border-b border-amber-200 px-4 py-2 text-center text-sm text-amber-800">
87+
Add <code className="font-mono">OPENAI_API_KEY</code> to{" "}
88+
<code className="font-mono">.env.local</code> to enable AI chat.
89+
</div>
90+
)}
91+
92+
{/* Page content */}
93+
<main className="flex-1 max-w-5xl mx-auto w-full px-4 py-12 space-y-12">
94+
<div className="space-y-2">
95+
<h1 className="text-3xl font-bold tracking-tight">
96+
Widget Mode
97+
</h1>
98+
<p className="text-muted-foreground max-w-xl">
99+
The AI Chat plugin can be embedded as a floating widget on any
100+
page. Click the button in the bottom-right corner to open it.
101+
</p>
102+
</div>
103+
104+
<div className="grid gap-6 sm:grid-cols-2">
105+
<div className="rounded-xl border p-6 space-y-2">
106+
<h2 className="font-semibold">Compact & embeddable</h2>
107+
<p className="text-sm text-muted-foreground">
108+
The widget renders as a fixed-position panel triggered by a
109+
floating button. It does not affect the surrounding page
110+
layout.
111+
</p>
112+
</div>
113+
<div className="rounded-xl border p-6 space-y-2">
114+
<h2 className="font-semibold">Configurable size</h2>
115+
<p className="text-sm text-muted-foreground">
116+
Pass <code className="font-mono text-xs">widgetHeight</code>{" "}
117+
and <code className="font-mono text-xs">widgetWidth</code>{" "}
118+
props to control the panel dimensions.
119+
</p>
120+
</div>
121+
<div className="rounded-xl border p-6 space-y-2">
122+
<h2 className="font-semibold">Page-aware context</h2>
123+
<p className="text-sm text-muted-foreground">
124+
Wrap your layout with{" "}
125+
<code className="font-mono text-xs">
126+
PageAIContextProvider
127+
</code>{" "}
128+
and call{" "}
129+
<code className="font-mono text-xs">
130+
useRegisterPageAIContext
131+
</code>{" "}
132+
on any page to give the AI awareness of the current view.
133+
</p>
134+
</div>
135+
<div className="rounded-xl border p-6 space-y-2">
136+
<h2 className="font-semibold">Stateless by default</h2>
137+
<p className="text-sm text-muted-foreground">
138+
In public mode the widget is stateless — no conversation
139+
history is persisted. Switch to{" "}
140+
<code className="font-mono text-xs">
141+
mode=&quot;authenticated&quot;
142+
</code>{" "}
143+
for persistent history.
144+
</p>
145+
</div>
146+
</div>
147+
148+
<div className="rounded-xl border bg-muted/40 p-6 space-y-3">
149+
<h2 className="font-semibold text-sm uppercase tracking-wider text-muted-foreground">
150+
Usage
151+
</h2>
152+
<pre className="text-sm overflow-x-auto bg-background rounded-lg border p-4">
153+
{`<ChatLayout
154+
apiBaseURL={baseURL}
155+
apiBasePath="/api/data"
156+
layout="widget"
157+
widgetHeight="520px"
158+
showSidebar={false}
159+
/>`}
160+
</pre>
161+
</div>
162+
</main>
163+
164+
{/* Floating widget */}
165+
<div className="fixed bottom-6 right-6 z-50">
166+
<ChatLayout
167+
apiBaseURL={baseURL}
168+
apiBasePath="/api/data"
169+
layout="widget"
170+
widgetHeight="520px"
171+
showSidebar={false}
172+
/>
173+
</div>
174+
</div>
175+
</StackProvider>
176+
</PageAIContextProvider>
177+
</QueryClientProvider>
178+
);
179+
}

‎demos/ai-chat/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"@ai-sdk/openai": "^2.0.68",
1212
"@ai-sdk/react": "^2.0.94",
1313
"@btst/adapter-memory": "^2.0.3",
14-
"@btst/stack": "^2.6.0",
14+
"@btst/stack": "^2.6.1",
1515
"@btst/yar": "^1.2.0",
1616
"@hookform/resolvers": "^5.2.2",
1717
"@radix-ui/react-dialog": "^1.1.15",

‎demos/ai-chat/pnpm-lock.yaml‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/blog/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"dependencies": {
1111
"@ai-sdk/react": "^3.0.118",
1212
"@btst/adapter-memory": "^2.0.3",
13-
"@btst/stack": "^2.6.0",
13+
"@btst/stack": "^2.6.1",
1414
"@btst/yar": "^1.2.0",
1515
"@hookform/resolvers": "^5.2.2",
1616
"@radix-ui/react-dialog": "^1.1.15",

‎demos/blog/pnpm-lock.yaml‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/cms/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"dependencies": {
1111
"@ai-sdk/react": "^3.0.118",
1212
"@btst/adapter-memory": "^2.0.3",
13-
"@btst/stack": "^2.6.0",
13+
"@btst/stack": "^2.6.1",
1414
"@btst/yar": "^1.2.0",
1515
"@dnd-kit/core": "^6.3.1",
1616
"@dnd-kit/sortable": "^10.0.0",

‎demos/cms/pnpm-lock.yaml‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/form-builder/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"dependencies": {
1111
"@ai-sdk/react": "^3.0.118",
1212
"@btst/adapter-memory": "^2.0.3",
13-
"@btst/stack": "^2.6.0",
13+
"@btst/stack": "^2.6.1",
1414
"@btst/yar": "^1.2.0",
1515
"@hookform/resolvers": "^5.2.2",
1616
"@radix-ui/react-checkbox": "^1.3.3",

0 commit comments

Comments
 (0)