@vercel/ai Support

Steamship Agents can stream responses directly to Vercel's AI SDK.

To do so, we translate Steamship's streaming media blocks into equivalent Markdown.

Guide: A Steamship Chatbot

Create a Next.js app

Create a Next.js application and install ai and @steamship/client.

pnpm dlx create-next-app my-ai-app
cd my-ai-app
pnpm install ai @steamship/client

Add your Steamship API Key to `.env`

Create a .env file in your project root and add your Replicate API Key:

.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 message 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/chat/route.ts

import { StreamingTextResponse } from 'ai'
import Steamship 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, context_id } = await req.json()
 
  const steamship = new Steamship({apiKey: process.env.STEAMSHIP_API_KEY})
 
  // See https://docs.steamship.com/javascript_client for information about:
  // - The BASE_URL where your running Agent lives
  // - The context_id which mediates your Agent's server-side chat history
  const response = await steamship.agent.respondAsync({
    url: BASE_URL
    input: {
        prompt,
        context_id
    },
  })
 
  // Adapt the Streamship Blockstream into a Markdown Stream
  const stream = await SteamshipStream(response, steamship)
 
  // 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>
  );
}

Javascript Client React