React

@steamship/react

Using steamship in a react context is often as simple as making an API request to your agent. To interact with your agent you'll need a few environment variables that must be securely stored server side. As such, if you're working with React you'll likely be working in one of the more popular frameworks like Next.js or Remix.

As it stands, we have a few Next.js specific utilites that make getting started with steamship as easy as possible. We'll be adding support for other frameworks in the future.

This package also ships with a few React components and hooks that make it easy to get started with steamship in a React context, regardless of framework.

Installation

  npm i @steamship/react

Usage

Next.js

@steamship/react integrates directly with vercels ai package.

Setup Env Vars

STEAMSHIP_API_KEY=...
STEAMSHIP_AGENT_URL=...

Your STEAMSHIP_API_KEY can be found at https://www.steamship.com/account/api (opens in a new tab).

Your STEAMSHIP_AGENT_URL can be found by navigating to Dashboard > Your Agent > API > POST /prompt > cURL. This should look something like https://some-random-string.steamship.run/{workspace-id}/{package-instance-id}/prompt

Setup api endpoints

Handle chat requests by creating a file: app/api/steamship/chat/route/ts

import { StreamingTextResponse } from "ai";
 
export const POST = async (req: Request) => {
  const { messages, id } = (await req.json()) as {
    messages: { role: "user" | "assistent"; content: string }[];
    id: string;
  };
 
  const mostRecentUserMessage = messages
    .reverse()
    .find((message) => message.role === "user");
 
  const steamshipResponse = await fetch(
    process.env.STEAMSHIP_AGENT_URL,
    {
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.STEAMSHIP_API_KEY}`,
      },
      method: "POST",
      body: JSON.stringify({
        question: mostRecentUserMessage?.content,
        chat_session_id: id,
      }),
    }
  );
  return new StreamingTextResponse(
    steamshipResponse.body as ReadableStream<any>
  );
};

Handle resolving requests by creating a file: app/api/steamship/chat/block/[blockid]/route.ts

import { NextResponse } from "next/server";
 
const GET = (req: Request, context: { params: any }) => {
  const blockId = context.params.blockId;
  return fetch(`https://api.steamship.com/api/v1/block/${blockId}/raw`, {
    headers: {
      Authorization: `Bearer ${process.env.STEAMSHIP_API_KEY}`,
    },
    method: "GET",
  }) as Promise<NextResponse>;
};
 
export { GET };

Use in components

You can refer directly to the useChat docs for the easiest way to interact with your steamship api endpoints. You'll need to set the api endpoint to match the endpoints we previous setup. In the example below we also create a dummy chat ID.

'use client';
 
import { useChat } from 'ai/react';
import { SteamshipMessage } from '@steamship/react';
 
export default function Chat() {
  const chatUUID = useMemo(() => uuidv4(), []);
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    id: chatUUID,
    body: { id: chatUUID },
    api: '/api/steamship/chat'
  });
 
  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          {m.role === 'user' ? 'User: ' : 'AI: '}
          <SteamshipMessage message={m.content} />
        </div>
      ))}
 
      <form onSubmit={handleSubmit}>
        <label>
          Say something...
          <input value={input} onChange={handleInputChange} />
        </label>
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

Steamship agents often offer multi-modal support. To provide out of the box support for multi-modal responses, you can use a few utility methods.

SteamshipMessage will take a message from useChat and support text, markdown, syntax highlighting, audio streams, and images.

useBlockUrl will take a blockId returned from steamship and fetch the raw data associated with it. This is used for fetching audio and image data, for example.

As an example, you can import or look at the SteamshipChatPrompt component. (opens in a new tab)

@vercel/aiLicense