your ai
any website
a browser-side companion that points, clicks, talks, runs tours, and previews design changes on real pages. one script tag, any model.
press ⌘/ to chat, ctrlV to talk, or ask buddy to restyle the page.
one click. buddy takes over.
hit the button above and buddy walks through the page, previews a design change, and ends in the live customization playground.
contextual
live tours
hand buddy an array of selectors + copy. it spotlights each element in order — no heavy SaaS required.
spatial
context chat
the chat reads the page around the cursor and answers in context — it knows what the user is looking at.
voice
agent
talk to buddy with your voice. real-time streaming, natural interrupts, and it can act on what you say.
design
previews
ask for a calmer dashboard or a sharper checkout. buddy previews scoped css locally, then applies only when the user accepts.
your ai, your rules.
plug in Claude, GPT, Gemini, Grok, or any streaming endpoint. keys stay server-side. buddy just renders.
restyle the page on demand.
buddy can preview css changes inside the browser, track the active style, and persist accepted changes locally. no extension required.
dense cards, harsh alerts, heavy shadows
softer surfaces, clearer charts, readable risk states
agent-generated css, user-approved.
a server-side agent can propose the look, but buddy owns the DOM preview. the user sees the change first, then accepts, clears, or keeps iterating.
drop it in.
copy the tiny html snippet, or paste the setup prompt into your coding agent and let it wire buddy into the app for you.
one script tag, one endpoint.
add the web component, point it at your server-side chat route, then register flows and page actions in your app code.
- add getbuddy with a script tag or package manager
- serve /api/chat from your backend
- register flows for tours, actions, and design previews
<!-- drop this anywhere -->
<script type="module" src="https://unpkg.com/getbuddy"></script>
<hey-buddy
endpoint="/api/chat"
accent="#ff6a3d"
greeting="hey — need a hand?"
></hey-buddy># install
bun add getbuddy
# in your app
import "getbuddy";
const buddy = document.querySelector("hey-buddy");
buddy.configure({
endpoint: "/api/chat",
tour: [
{ selector: "#pricing", body: "here's what it costs" },
]
});// works with react 19 custom elements
import "getbuddy";
export function Layout() {
return (
<hey-buddy
endpoint="/api/chat"
greeting="hey — need a hand?"
/>
);
}let your coding agent install buddy properly.
the prompt asks your agent to inspect the app first, choose native colors, add the component, create the chat route, register useful flows, and test the result.
plug in any AI
buddy needs one streaming endpoint. here's a one-file route — swap the model line for any provider.
import { anthropic } from "@ai-sdk/anthropic";
import { streamText } from "ai";
export async function POST(req: Request) {
const { messages, context } = await req.json();
const result = streamText({
model: anthropic("claude-sonnet-4-6"),
system: `you're the friendly guide for ${context?.page}.`,
messages,
});
return result.toDataStreamResponse();
}
key stays server-side — buddy just POSTs to /api/chat.
make buddy yours. live.
tweak these controls — buddy in the corner reacts instantly. copy the snippet, paste into your html, done.
#ff6a3d
#ffffff
#ff6a3d