assistant-ui

Echo Assistant UI Template

A full-featured chat application using @assistant-ui/react with AI SDK v5 and Echo integration.

Quick Start

Use the Echo CLI to create a new project with this template:

npx echo-start@latest --template assistant-ui

You'll be prompted for your Echo App ID. Don't have one? Get it at echo.merit.systems/new.

---

This example demonstrates how to use @assistant-ui/react-ai-sdk with the Vercel AI SDK v5.

Echo is an OAuth-enabled AI provider router that gives your users a universal balance and gives you billing, auth, and usage metering out of the box. Replace direct provider SDKs with Echo to monetize in minutes without handling API keys.

Getting Started

1. Install dependencies:

npm install

2. Set up your environment variables:

cp .env.example .env.local

Configure your Echo App ID in .env.local:

NEXT_PUBLIC_ECHO_APP_ID=your-echo-app-id

3. Run the development server:

npm run dev

Open http://localhost:3000 to see the result.

Key Features

• Uses the new AI SDK v5 with @ai-sdk/react and Echo as the model provider
• Integrates with @assistant-ui/react using the new useChatRuntime hook
• No RSC support (client-side only)
• Simplified integration with the useChatRuntime hook that wraps AI SDK v5's useChat
• Automatically uses AssistantChatTransport to pass system messages and frontend tools to the backend

Custom Transport Configuration

By default, useChatRuntime uses AssistantChatTransport which automatically forwards system messages and frontend tools to the backend.

Custom API URL with Forwarding

When customizing the API URL, you must explicitly use AssistantChatTransport to keep system/tools forwarding:

import { AssistantChatTransport } from '@assistant-ui/react-ai-sdk';

const runtime = useChatRuntime({
  transport: new AssistantChatTransport({
    api: '/my-custom-api/chat', // Custom URL with system/tools forwarding
  }),
});

Disable System/Tools Forwarding

To use the standard AI SDK transport without forwarding:

import { DefaultChatTransport } from 'ai';

const runtime = useChatRuntime({
  transport: new DefaultChatTransport(), // No system/tools forwarding
});

API Route

The API route at /api/chat uses the new streamText function from AI SDK v5 to handle chat completions.