Astro

Add cited search to an Astro site with one component. It registers a framework-free custom element, needs no React island, and works on static and server-rendered pages.

Platform componentDeveloper preview@docslurp/sdk/astro@docslurp/contrib-astroAll integrations

On this page

1Install

SDK subpathDedicated package

Terminal

# Needs @docslurp/sdk 0.2.0 or newer.
npm install @docslurp/sdk@^0.3.0

Terminal

# The same component as a dedicated package.
npm install @docslurp/contrib-astro

# Then import:
# import DocSlurpSearch from '@docslurp/contrib-astro';

2Create a browser key

On API keys, create a browser key with the search scope and add your site to its allowed websites. Only expose a workspace whose content is meant to be public.

.envEnv

# .env — PUBLIC_ values ship to the browser. Use a browser key (dslp_pub_), never a server key.
PUBLIC_DOCSLURP_CLIENT_KEY=dslp_pub_…

3Add the component

src/pages/search.astroAstro

---
import DocSlurpSearch from '@docslurp/sdk/astro';
---
<DocSlurpSearch
  clientKey={import.meta.env.PUBLIC_DOCSLURP_CLIENT_KEY}
  workspaceId="product-docs"
  placeholder="Search the documentation…"
/>

Props

Prop	Type	Default	Description
`clientKey`	`string`	`Required`	Browser key with the search scope, limited to your allowed websites.
`workspaceId`	`string`	`"default"`	Workspace slug, UUID or default.
`apiUrl`	`string`	`"https://docslurp.io"`	DocSlurp origin, for self-hosted deployments.
`placeholder`	`string`	`"Search documents…"`	Input placeholder text.

Styling

The element renders in a shadow root, so your site’s CSS won’t leak in. Theme it with two custom properties.

src/styles/global.cssCSS

docslurp-search-box {
  --docslurp-text: #e2e8f0;
  --docslurp-background: #0b1220;
}

Behavior

Debounced search, Enter to submit
Stale requests cancelled
Accessible live status
Source citations with page numbers
Recoverable error state
Reduced-motion waiting state
No-JavaScript fallback text
Results rendered as text, never HTML

Need a different look or your own result markup? Use one of the search adapters with your own component instead.

Hand off to an agent

Working in a real codebase? Copy a prompt that tells a coding agent exactly what to change for Astro: which entry point to use, the supported contract, and what to validate before shipping. It contains no keys or secrets.

Review agent instructions

Integrate DocSlurp search into this project's Astro surface.

Read https://docslurp.io/docs/search-integrations/astro and inspect the project's current search calls, framework version and source routing. Preserve its UI, accessibility and keyboard behavior.

Use the DocSlurpSearch Astro component from @docslurp/sdk/astro (or the @docslurp/contrib-astro workspace package). Pass apiUrl, workspaceId and a PUBLIC_ domain-restricted search-only clientKey. No React island is required. Preserve site styling with --docslurp-text and --docslurp-background.

Package availability: the SDK subpaths and dedicated compatibility/Astro packages require version 0.2.0 or newer (see https://docslurp.io/docs/packages); verify installed version/exports before using them. Never install a nonexistent package based on this prompt.

Required configuration (use placeholders/secret configuration, never include secret values in this prompt): DocSlurp API origin, workspace ID, appropriate search-only key, public source URL map. Ingest the corpus with native SDK upload/URL ingestion and wait for completion. Do not invent an ingestion or post-sync feature.

Search adapters replace documented read-side calls only. Meilisearch/Typesense/Pagefind counts represent a bounded 100-passage window, not exact corpus totals. Empty queries return no results. Reject unsupported options; do not silently drop filters, facets or sorting. Escape result text/HTML and verify source links. Private corpora require authenticated access checks.

Validate normal/Unicode queries, no matches, empty query, errors, cancellation, pagination limits, mobile layout, key-domain/workspace restrictions and the actual build. Report files changed, tests run, supported contracts and remaining migration gaps. Do not publish credentials or deploy without the project's authorization.

Before switching traffic, run through the go-live checklist. Stuck? See troubleshooting.