@thred-apps/thred-react

React SDK for Thred - AI-powered responses and streaming capabilities.

Installation

npm install @thred-apps/thred-react @thred-apps/thred-js
# or
yarn add @thred-apps/thred-react @thred-apps/thred-js
# or
pnpm add @thred-apps/thred-react @thred-apps/thred-js

Quick Start

1. Wrap your app with ThredProvider

import { ThredProvider } from "@thred-apps/thred-react";

function App() {
  return (
    <ThredProvider apiKey={process.env.NEXT_PUBLIC_THRED_KEY}>
      {/* Your app content */}
    </ThredProvider>
  );
}

2. Use the hooks in your components

Using the Answer API

import { useAnswerAPI } from "@thred-apps/thred-react";

function MyComponent() {
  const { answer } = useAnswerAPI();

  const handleQuestion = async () => {
    const result = await answer("What is the weather today?", {
      instructions: "Be concise",
      previousMessages: [],
    });
    console.log(result.response);
  };

  return <button onClick={handleQuestion}>Ask Question</button>;
}

Using the Streaming API

import { useStreamingAPI } from "@thred-apps/thred-react";
import { useState } from "react";

function StreamingComponent() {
  const { stream } = useStreamingAPI();
  const [response, setResponse] = useState("");

  const handleStream = async () => {
    await stream(
      "Tell me a story",
      {
        instructions: "Be creative",
      },
      (chunk) => {
        setResponse((prev) => prev + chunk);
      }
    );
  };

  return (
    <div>
      <button onClick={handleStream}>Start Streaming</button>
      <p>{response}</p>
    </div>
  );
}

3. Use the ThredBox component

import { ThredBox } from "@thred-apps/thred-react";

function ResponseDisplay() {
  return (
    <ThredBox
      code="greeting"
      boxColor="#1C1C1C"
      text={{
        value: "Welcome to Thred!",
        color: "#FFFFFF",
      }}
      link={{
        value: "thred.app",
        display: "Visit our website",
        color: "green",
      }}
    />
  );
}

API Reference

ThredProvider

The context provider that initializes the Thred client.

Props:

• apiKey (string, required): Your Thred API key
• children (ReactNode, required): Your app components

useAnswerAPI

Hook for making non-streaming answer requests.

Returns:

• answer(message, options, targets): Async function to get an answer
  • message (string): The question or message
  • options (object): Optional configuration
    • instructions (string): Custom instructions
    • previousMessages (array): Message history
  • targets (Targets): Optional targeting configuration

useStreamingAPI

Hook for making streaming answer requests.

Returns:

• stream(message, options, onAnswer, targets): Async function to stream an answer
  • message (string): The question or message
  • options (object): Optional configuration
  • onAnswer (function): Callback for each chunk
  • targets (Targets): Optional targeting configuration

ThredBox

Component for displaying responses with links.

Props:

• code (string, required): Unique identifier for the response
• boxColor (string): Background color (default: "#1C1C1C")
• text (object, required):
  • value (string): The text content
  • color (string): Text color (default: "#000000")
• link (object): Optional link
  • value (string): The URL
  • display (string): Display text
  • color (string): Link color (default: "green")

TypeScript Support

This package includes TypeScript definitions out of the box.

License

MIT