@prompd/react

React components and hooks for embedding composable AI prompts directly in your applications. Load, compile, and render prompts with a few lines of code.

npm install @prompd/react

Quick Start

1. Install the package

npm install @prompd/react

2. Wrap your app with the provider

import { PrompdProvider } from '@prompd/react'

<PrompdProvider registry="https://prompdhub.ai">
  <App />
</PrompdProvider>

3. Use the hook in any component

import { usePrompd } from '@prompd/react'

const { data, isLoading } = usePrompd('@acme/summarizer', {
  parameters: { topic: 'React hooks' },
})

Component API

Three building blocks for integrating prompts into React applications.

PrompdProvider

Context provider that configures the registry endpoint, authentication, and default compilation options for all child components.

usePrompd

Hook that loads, compiles, and caches a prompt by name. Returns the compiled output, loading state, and error state.

PrompdRenderer

Renders a compiled prompt as structured UI. Supports markdown output, parameter forms, and custom rendering slots.

Hooks Reference

Hooks for loading prompts, managing compilation state, and interacting with the registry.

usePrompd

Load and compile a prompt by name. Handles caching, loading state, and error boundaries.

usePrompdCompile

Compile a local .prmd string without fetching from the registry. Useful for editors and previews.

usePrompdSearch

Search the registry from a React component. Returns paginated results with loading state.

usePrompdConfig

Access the current provider configuration from the nearest PrompdProvider.

Examples

Common integration patterns for React applications.

Basic prompt rendering

Load a prompt from the registry and render the compiled output.

import { usePrompd, PrompdRenderer } from '@prompd/react'

function Summary({ topic }) {
  const { data, isLoading } = usePrompd('@acme/summarizer', {
    parameters: { topic },
  })

  if (isLoading) return <p>Loading...</p>
  return <PrompdRenderer prompt={data} />
}

Search integration

Build a package search UI powered by the registry API.

import { usePrompdSearch } from '@prompd/react'

function PackageBrowser() {
  const { results, isLoading } = usePrompdSearch('summarizer')

  return (
    <ul>
      {results.map(pkg => (
        <li key={pkg.name}>{pkg.name} - {pkg.description}</li>
      ))}
    </ul>
  )
}

Full Documentation View on npm View on GitHub