Docs · SDK · Astro

Install Brevwick in Astro.

Copy-paste the snippets below. Replace pk_test_demo with the public key from your project — find it under Project settings → Keys.

1. Install

Install the adapter alongside the core SDK.

npm install @tatlacas/brevwick-react @tatlacas/brevwick-sdk modern-screenshot @astrojs/react

2. Configure env vars

Wire the project key through your framework’s env convention so it gets inlined into the client bundle at build time.

# Public project key. `PUBLIC_*` Astro env vars are exposed to client islands via import.meta.env.
PUBLIC_BREVWICK_PROJECT_KEY=pk_test_demo

3. Wire the SDK

src/components/BrevwickIsland.tsxTSX

import { BrevwickProvider, FeedbackButton } from '@tatlacas/brevwick-react';

const config = {
  projectKey:
    import.meta.env.PUBLIC_BREVWICK_PROJECT_KEY ?? 'pk_test_demo',
};

export function BrevwickIsland() {
  return (
    <BrevwickProvider config={config}>
      <FeedbackButton position="bottom-right" />
    </BrevwickProvider>
  );
}

src/layouts/Layout.astroHTML

---
import { BrevwickIsland } from '../components/BrevwickIsland';
---
<html lang="en">
  <body>
    <slot />
    <BrevwickIsland client:load />
  </body>
</html>

Verify

  • Run `astro dev` and open http://localhost:4321.
  • Click the floating feedback button.
  • Submit a test issue.
  • Confirm the issue lands in /app/issues.

Full guide: /docs/sdk/astro

Published packages

Browse the registry for version history, source, and download counts.