Skip to content
prompd
GitHub

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.

Installation

Section titled “Installation”
Terminal window
npm install @prompd/react

Quick Start

Section titled “Quick Start”

1. Install the package

Section titled “1. Install the package”
Terminal window
npm install @prompd/react

2. Wrap your app with the provider

Section titled “2. Wrap your app with the provider”
import { PrompdProvider } from '@prompd/react'


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

3. Use the hook in any component

Section titled “3. Use the hook in any component”
import { usePrompd } from '@prompd/react'


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

Component API

Section titled “Component API”

Three building blocks for integrating prompts into React applications.

PrompdProvider

Section titled “PrompdProvider”

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

import { PrompdProvider } from '@prompd/react'


function App() {
  return (
    <PrompdProvider
      registry="https://registry.prompdhub.ai"
      auth={{ token: 'your-api-token' }}
    >
      <YourApp />
    </PrompdProvider>
  )
}

usePrompd

Section titled “usePrompd”

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

import { usePrompd } from '@prompd/react'


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


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

PrompdRenderer

Section titled “PrompdRenderer”

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

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


function PromptDisplay() {
  const { data } = usePrompd('@acme/summarizer')
  return <PrompdRenderer prompt={data} />
}

Hooks Reference

Section titled “Hooks Reference”

usePrompd

Section titled “usePrompd”

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

const { data, isLoading, error, refetch } = usePrompd('@scope/name', {
  parameters: { key: 'value' },
  enabled: true,
})

usePrompdCompile

Section titled “usePrompdCompile”

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

const { compiled, isCompiling } = usePrompdCompile(prmdSource, {
  parameters: { key: 'value' },
})

usePrompdSearch

Section titled “usePrompdSearch”

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

const { results, isLoading, hasMore, loadMore } = usePrompdSearch('summarizer')

usePrompdConfig

Section titled “usePrompdConfig”

Access the current provider configuration from the nearest PrompdProvider.

const { registry, auth } = usePrompdConfig()

Examples

Section titled “Examples”

Basic prompt rendering

Section titled “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

Section titled “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>
  )
}

Dynamic parameter form

Section titled “Dynamic parameter form”

Generate a form from prompt parameters and compile on submit.

import { useState } from 'react'
import { usePrompd } from '@prompd/react'


function PromptForm() {
  const [params, setParams] = useState({ topic: '' })
  const { data, refetch } = usePrompd('@acme/summarizer', {
    parameters: params,
    enabled: false,
  })


  return (
    <form onSubmit={() => refetch()}>
      <input onChange={e => setParams({ topic: e.target.value })} />
      <button type="submit">Compile</button>
    </form>
  )
}

Next Steps

Section titled “Next Steps”