PromptStream React SDK
A first-class React client for PromptStream. Works with Tailwind, Next.js, and any React app. Provides hooks, context, and components to run prompts and track outcomes.
Installation
npm install promptstream-sdk
# or
yarn add promptstream-sdk
Setup
import React from "react";
import ReactDOM from "react-dom";
import { PromptStreamProvider } from "promptstream-sdk";
ReactDOM.render(
<PromptStreamProvider
apiKey="YOUR_API_KEY"
userId="USER_ID"
experimentId="EXPERIMENT_ID"
>
<App />
</PromptStreamProvider>,
document.getElementById("root")
);
Core Concepts
| Concept | Description |
|---|---|
PromptStreamProvider | Wrap your app, provides context & client |
useRunPrompt | Hook to execute a prompt and get the response |
useTrackClick | Hook to track click events |
useTrackFeedback | Hook to capture thumbs up/down feedback |
| … | … |
Hooks
usePromptStreamContext()
const { client, apiKey, userId, experimentId } = usePromptStreamContext();
useRunPrompt(promptId, inputs, externalUserId?)
const { run, loading, error } = useRunPrompt("onboarding-assistant", {
name: "Alice",
});
Components
<TrackClick>
<TrackClick label="signup_button">
<button>Sign Up</button>
</TrackClick>
Complete Example
// src/App.tsx
import React, { useState } from "react";
import {
useRunPrompt,
useTrackClick,
useTrackConversion,
useTrackFeedback,
useTrackRating,
useTrackEngagement,
TrackClick,
TrackConversion,
PromptFeedback,
} from "promptstream-react-sdk";
export default function App() {
const promptId = "cccccccc-cccc-cccc-cccc-cccccccccccc";
// 1) Dynamic text input for the `text` placeholder
const [textInput, setTextInput] = useState("");
const { run, loading, error } = useRunPrompt(promptId, {
text: textInput,
});
const [output, setOutput] = useState<string>("");
const [promptRunId, setPromptRunId] = useState<string>();
const handleRun = async () => {
try {
const res = await run();
setOutput(JSON.stringify(res.output, null, 2));
setPromptRunId(res.run_id);
} catch {
// error shown below
}
};
// 2) Initialize trackers with labels or use components (seen below)
const trackClick = useTrackClick("buy_now_click");
const trackConversion = useTrackConversion("signup_conversion");
const trackFeedback = useTrackFeedback("post_prompt_feedback");
const trackRating = useTrackRating("star_rating");
const trackEngagement = useTrackEngagement("engagement_score");
return (
<div style={{ padding: 32, fontFamily: "sans-serif" }}>
<h1>PromptStream + Vite Demo</h1>
{/* ——— Text input & Send button ——— */}
<section style={{ marginBottom: 24 }}>
<input
type="text"
value={textInput}
onChange={(e) => setTextInput(e.target.value)}
placeholder="Type text for prompt..."
style={{ marginRight: 8 }}
/>
<button onClick={handleRun} disabled={loading}>
{loading ? "Running…" : "Send"}
</button>
{error && <div style={{ color: "red" }}>{error.message}</div>}
</section>
{/* ——— Prompt output ——— */}
{output && (
<pre
style={{
background: "#f0f0f0",
padding: 12,
borderRadius: 4,
maxHeight: 200,
overflow: "auto",
}}
>
{output}
</pre>
)}
{/* ——— Tracking buttons ——— */}
{!!promptRunId && (
<>
<section style={{ margin: "24px 0" }}>
<h2>Track Click</h2>
<button
onClick={() =>
trackClick({
prompt_run_id: promptRunId,
prompt_id: promptId,
source: "demo",
})
}
>
Buy Now
</button>
</section>
<section style={{ margin: "24px 0" }}>
<h2>Track Conversion</h2>
<button
onClick={() =>
trackConversion({
prompt_run_id: promptRunId,
prompt_id: promptId,
source: "demo",
})
}
>
Signup
</button>
</section>
<section style={{ margin: "24px 0" }}>
<h2>Prompt Feedback</h2>
<button
onClick={() =>
trackFeedback(true, {
prompt_run_id: promptRunId,
prompt_id: promptId,
source: "demo",
})
}
>
👍
</button>
<button
onClick={() =>
trackFeedback(false, {
prompt_run_id: promptRunId,
prompt_id: promptId,
source: "demo",
})
}
>
👎
</button>
</section>
<section style={{ margin: "24px 0" }}>
<h2>Rating</h2>
{[1, 2, 3, 4, 5].map((n) => (
<button
key={n}
onClick={() =>
trackRating(n, {
prompt_run_id: promptRunId,
prompt_id: promptId,
source: "survey",
})
}
>
{n} ★
</button>
))}
</section>
<section style={{ margin: "24px 0" }}>
<h2>Engagement</h2>
<button
onClick={() =>
trackEngagement(42, {
prompt_run_id: promptRunId,
prompt_id: promptId,
source: "interactive",
})
}
>
+42 Engagement
</button>
</section>
{/* ——— New “Components” Sub-section ——— */}
<h2>Components</h2>
<section style={{ margin: "16px 0" }}>
<h3>TrackClick Component</h3>
<TrackClick
promptRunId={promptRunId}
promptId={promptId}
label="component_click"
source="components"
>
<button>Component Click</button>
</TrackClick>
</section>
<section style={{ margin: "16px 0" }}>
<h3>TrackConversion Component</h3>
<TrackConversion
promptRunId={promptRunId}
promptId={promptId}
label="component_conversion"
source="components"
>
<button>Component Convert</button>
</TrackConversion>
</section>
<section style={{ margin: "16px 0" }}>
<h3>PromptFeedback Component</h3>
<PromptFeedback
promptRunId={promptRunId}
promptId={promptId}
feedbackLabel="component_feedback"
ratingLabel="component_rating"
source="components"
/>
</section>
</>
)}
</div>
);
}
Next Steps
- Explore advanced configuration in
<PromptStreamProvider> - Check out the Developer Docs for full API reference