Vite + React

Vite React applications use @yak-io/react for the client-side widget. Server handlers depend on your backend framework.

Installation

npm install @yak-io/react @yak-io/javascript

pnpm add @yak-io/react @yak-io/javascript

yarn add @yak-io/react @yak-io/javascript

bun add @yak-io/react @yak-io/javascript

Client Setup

Add the provider and widget to your app:

// src/main.tsx
import { BrowserRouter, useNavigate, Routes, Route } from "react-router-dom";
import { YakProvider, YakWidget } from "@yak-io/react";

function AppWithProvider() {
  const navigate = useNavigate();
  
  return (
    <YakProvider
      appId={import.meta.env.VITE_YAK_APP_ID}
      getConfig={async () => {
        const res = await fetch("/api/yak");
        return res.json();
      }}
      onToolCall={async (name, args) => {
        const res = await fetch("/api/yak", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ name, args }),
        });
        const data = await res.json();
        if (!data.ok) throw new Error(data.error);
        return data.result;
      }}
      onRedirect={(path) => navigate(path)}
    >
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
      <YakWidget />
    </YakProvider>
  );
}

createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <AppWithProvider />
  </BrowserRouter>
);

Server Handler Options

Since Vite is a client-side bundler, you'll need a separate backend for the API handlers.

Express Backend

// server/index.ts
import express from "express";
import { createYakHandler } from "@yak-io/javascript/server";

const app = express();
app.use(express.json());

const { GET, POST } = createYakHandler({
  routes: [
    { path: "/", title: "Home" },
    { path: "/dashboard", title: "Dashboard" },
  ],
});

app.get("/api/yak", async (req, res) => {
  const url = `${req.protocol}://${req.get("host")}${req.originalUrl}`;
  const request = new Request(url);
  const response = await GET(request);
  res.json(await response.json());
});

app.post("/api/yak", async (req, res) => {
  const url = `${req.protocol}://${req.get("host")}${req.originalUrl}`;
  const request = new Request(url, {
    method: "POST",
    body: JSON.stringify(req.body),
    headers: { "Content-Type": "application/json" },
  });
  const response = await POST(request);
  res.json(await response.json());
});

app.listen(3001);

Hono Backend

// server/index.ts
import { Hono } from "hono";
import { serve } from "@hono/node-server";
import { createYakHandler } from "@yak-io/javascript/server";

const app = new Hono();

const { GET, POST } = createYakHandler({
  routes: [
    { path: "/", title: "Home" },
    { path: "/dashboard", title: "Dashboard" },
  ],
});

app.get("/api/yak", (c) => GET(c.req.raw));
app.post("/api/yak", (c) => POST(c.req.raw));

serve({ fetch: app.fetch, port: 3001 });

Vite Dev Proxy

Configure Vite to proxy API requests during development:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:3001",
        changeOrigin: true,
      },
    },
  },
});

Environment Variables

Add your app ID to .env:

VITE_YAK_APP_ID=yak_app_123

Vite requires the VITE_ prefix for environment variables exposed to the client.

Programmatic Control

Use the useYak hook in any component:

// src/components/HelpButton.tsx
import { useYak } from "@yak-io/react";

export function HelpButton() {
  const { openWithPrompt, isWidgetOpen } = useYak();

  return (
    <button 
      onClick={() => openWithPrompt("Help me with this page")}
      disabled={isWidgetOpen}
    >
      Get Help
    </button>
  );
}

TanStack Router

If using TanStack Router instead of React Router:

import { RouterProvider, createRouter } from "@tanstack/react-router";
import { YakProvider, YakWidget } from "@yak-io/react";

const router = createRouter({ routeTree });

function App() {
  return (
    <YakProvider
      appId={import.meta.env.VITE_YAK_APP_ID}
      getConfig={...}
      onToolCall={...}
      onRedirect={(path) => router.navigate({ to: path })}
    >
      <RouterProvider router={router} />
      <YakWidget />
    </YakProvider>
  );
}