Templates
Get started quickly with Echo using pre-built templates
The easiest way to get started with Echo is to use one of our pre-built templates.
React
The React template is a simple application that uses Vite and echo-react-sdk
. Uniquely Echo does not require
a server to make API calls because it handles Oauth directly in the browser.
Create an Echo App
Go to echo.merit.systems/new to get an app_id
.
Create a React app using Vite
Run the following commands to create a new React app using Vite.
npx echo-start@latest --template vite --app-id YOUR_ECHO_APP_ID
yarn dlx echo-start@latest --template vite --app-id YOUR_ECHO_APP_ID
pnpx echo-start@latest --template vite --app-id YOUR_ECHO_APP_ID
bunx echo-start@latest --template vite --app-id YOUR_ECHO_APP_ID
Next.js
The Next.js template is a full-stack application that uses the Next.js framework with the echo-next-sdk
.
Create an Echo app
Go to echo.merit.systems/new to get an app_id
.
Create a Next.js app
Run the following commands to create a new Next.js app.
npx echo-start@latest --template next --app-id YOUR_ECHO_APP_ID
yarn dlx echo-start@latest --template next --app-id YOUR_ECHO_APP_ID
pnpx echo-start@latest --template next --app-id YOUR_ECHO_APP_ID
bunx echo-start@latest --template next --app-id YOUR_ECHO_APP_ID
Assistant UI
A full-featured chat UI powered by @assistant-ui/react
integrated with Echo and the Vercel AI SDK v5.
Create an Echo App
Go to echo.merit.systems/new to get an app_id
.
Create an Assistant UI app
Run the following commands to create a new app.
npx echo-start@latest --template assistant-ui --app-id YOUR_ECHO_APP_ID
yarn dlx echo-start@latest --template assistant-ui --app-id YOUR_ECHO_APP_ID
pnpx echo-start@latest --template assistant-ui --app-id YOUR_ECHO_APP_ID
bunx echo-start@latest --template assistant-ui --app-id YOUR_ECHO_APP_ID
Next.js Chat
A complete chat application with beautiful UI components, real-time balance display, and streaming AI responses.
Create an Echo App
Go to echo.merit.systems/new to get an app_id
.
Create a Next.js Chat app
Run the following commands to create a new chat app.
npx echo-start@latest --template next-chat --app-id YOUR_ECHO_APP_ID
yarn dlx echo-start@latest --template next-chat --app-id YOUR_ECHO_APP_ID
pnpx echo-start@latest --template next-chat --app-id YOUR_ECHO_APP_ID
bunx echo-start@latest --template next-chat --app-id YOUR_ECHO_APP_ID
Next.js Image Generation
AI-powered image generation application with gallery view, download capabilities, and automatic cost tracking.
Create an Echo App
Go to echo.merit.systems/new to get an app_id
.
Create a Next.js Image app
Run the following commands to create a new image generation app.
npx echo-start@latest --template next-image --app-id YOUR_ECHO_APP_ID
yarn dlx echo-start@latest --template next-image --app-id YOUR_ECHO_APP_ID
pnpx echo-start@latest --template next-image --app-id YOUR_ECHO_APP_ID
bunx echo-start@latest --template next-image --app-id YOUR_ECHO_APP_ID
Next.js Video Generation
AI-powered video generation application with video preview, playback, and Echo billing integration.
Create an Echo App
Go to echo.merit.systems/new to get an app_id
.
Create a Next.js Video app
Run the following commands to create a new video generation app.
npx echo-start@latest --template next-video-template --app-id YOUR_ECHO_APP_ID
yarn dlx echo-start@latest --template next-video-template --app-id YOUR_ECHO_APP_ID
pnpx echo-start@latest --template next-video-template --app-id YOUR_ECHO_APP_ID
bunx echo-start@latest --template next-video-template --app-id YOUR_ECHO_APP_ID
Next.js API Key Template
Server-side API key management with PostgreSQL database, Prisma ORM, and Docker setup for local development.
Create an Echo App
Go to echo.merit.systems/new to get an app_id
.
Create a Next.js API Key app
Run the following commands to create a new API key management app.
npx echo-start@latest --template nextjs-api-key-template --app-id YOUR_ECHO_APP_ID
yarn dlx echo-start@latest --template nextjs-api-key-template --app-id YOUR_ECHO_APP_ID
pnpx echo-start@latest --template nextjs-api-key-template --app-id YOUR_ECHO_APP_ID
bunx echo-start@latest --template nextjs-api-key-template --app-id YOUR_ECHO_APP_ID
React Chat
Chat interface built for React applications with Vite, Tailwind CSS, and Echo OAuth integration.
Create an Echo App
Go to echo.merit.systems/new to get an app_id
.
Create a React Chat app
Run the following commands to create a new React chat app.
npx echo-start@latest --template react-chat --app-id YOUR_ECHO_APP_ID
yarn dlx echo-start@latest --template react-chat --app-id YOUR_ECHO_APP_ID
pnpx echo-start@latest --template react-chat --app-id YOUR_ECHO_APP_ID
bunx echo-start@latest --template react-chat --app-id YOUR_ECHO_APP_ID
React Image Generation
Client-side image generation for React applications with Echo billing and image gallery.
Create an Echo App
Go to echo.merit.systems/new to get an app_id
.
Create a React Image app
Run the following commands to create a new React image generation app.
npx echo-start@latest --template react-image --app-id YOUR_ECHO_APP_ID
yarn dlx echo-start@latest --template react-image --app-id YOUR_ECHO_APP_ID
pnpx echo-start@latest --template react-image --app-id YOUR_ECHO_APP_ID
bunx echo-start@latest --template react-image --app-id YOUR_ECHO_APP_ID