React Streaming

Steamship Agents support Vercel's AI SDK out of the box.

In this guide, we'll walk through how to use the utilities to create a text completion app.

Guide: Text Completion

1. Create a Next.js app

Create a Next.js application and install ai:

pnpm dlx create-next-app my-ai-app
cd my-ai-app
pnpm install ai

Add your Steamship API Key to `.env`

.env

STEAMSHIP_API_KEY=xxxxxxx

Create a Route Handler

Create a Next.js Route Handler that uses the Edge Runtime to generate a response to a series of messages via your Steamship Agent's API, and returns the response as a streaming text response.

For this example, we'll create a route handler at app/api/completion/route.ts that accepts a POST request with a prompt string:

app/api/completion/route.ts

import { StreamingTextResponse } from 'ai';
import { SteamshipStream } from '@steamship/client';
 
// IMPORTANT! Set the runtime to edge
export const runtime = 'edge';
 
export async function POST(req: Request) {
  // Extract the `prompt` from the body of the request
  const { prompt } = await req.json();
 
  const body = JSON.stringify({
    prompt,
    stream: true
  });
 
  // Important! Fill out these variables for your agent!
  const steamshipUsername = '';
  const agentWorkspace = '';
  const agentHandle = '';
 
  // This is your Agent's Generate URL
  const agentUrl = `https://${steamshipUsername}.steamship.run/${agentWorkspace}/${agentHandle}/generate`;
 
  const response = await fetch(agentUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.STEAMSHIP_API_KEY}`
    },
    body
  });
 
  // Check for errors
  if (!response.ok) {
    return new Response(await response.text(), {
      status: response.status
    });
  }
 
  // Extract the text response from the Cohere stream
  const stream = SteamshipStream(response);
 
  // Respond with a stream of Markdown
  return new StreamingTextResponse(stream);
}

Wire up the UI

Create a Client component with a form that we'll use to gather the prompt from the user and then stream back the completion from.

By default, the useCompletion hook will use the POST Route Handler we created above (it defaults to /api/completion). You can override this by passing a api prop to useCompletion({ api: '...'}).

app/page.tsx

'use client';
 
import { useCompletion } from 'ai/react';
 
export default function Completion() {
  const { completion, input, stop, isLoading, handleInputChange, handleSubmit } = useCompletion({
    api: '/api/completion'
  });
 
  return (
    <div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
      <form onSubmit={handleSubmit} className="flex items-center gap-3 mb-8">
        <label className="grow">
          <input
            className="w-full max-w-md bottom-0 border border-gray-300 rounded shadow-xl p-2"
            value={input}
            onChange={handleInputChange}
            placeholder="Ask anything..."
          />
        </label>
        <button type="button" onClick={stop}>
          Stop
        </button>
        <button disabled={isLoading} type="submit">
          Send
        </button>
      </form>
      <output>Completion result: {completion}</output>
    </div>
  );
}

Authors