Template for getting started with eve and TanStack Start.
See the code
Web chat built on eve and TanStack Start, where the agent can respond with generative UI like tables and dashboards. Ask "Find me the latest Vercel blog posts" and the agent searches the web, then returns a row of result cards with a preview image and summary for each post.
Vercel's project setup flow will create a repository in your Git account and a Vercel project. You'll then be prompted to add the following environment variable:
| Environment variable | What to enter |
|---|---|
EVE_ACCESS_PASSWORD | The password visitors enter before they can chat. Share it with the people who should have access. |
When the deploy finishes, open the deployment URL and enter the password. Then ask the agent something that needs a web search, such as "Find me the latest Vercel blog posts".
| Layer | Technology |
|---|---|
| Agent framework | eve |
| Generative UI | json-render |
| Sandbox | Vercel Sandbox |
| Deployment | Vercel Services |
| Frontend framework | TanStack Start |
| Data tables | TanStack Table |
| Keyboard shortcuts | TanStack Hotkeys |
The agent lives in agent/, and the chat lives in apps/web/. They deploy together with Vercel Services in one project, and vercel.ts wraps the chat's service in withEve.
Ask the agent to find the latest Vercel blog posts and it searches the web before showing them as cards. When it needs your input it asks with a short form. You can reload the page to return to the conversation later, or share its link with anyone who has the password.
| Tool | File | What the chat shows |
|---|---|---|
render_ui | render_ui.ts | Result cards, metrics, tables, and other components from a fixed catalog |
ask_question | ask_question.ts | Options to choose from, or a field to type an answer |
approval_demo | approval_demo.ts | Asks for your approval before it runs |
Visitors who haven't signed in are sent to a sign-in page to enter the password set in the EVE_ACCESS_PASSWORD environment variable. Choose a long random password, such as the output of openssl rand -base64 32. Everyone with the password is trusted equally, so share it only with people who may see each other's chats.
Until you set EVE_ACCESS_PASSWORD, the sign-in page asks you to set it. To replace the password with Clerk, Better Auth, or another auth provider, see Change who can use the chat in the customization guide.
Use Node.js 24 and pnpm. Install the Vercel CLI, then clone your repository and run:
pnpm install
vercel link
vercel env pull .env.local
pnpm dev:app
Choose your deployed project when vercel link prompts you. vercel env pull .env.local saves your project's development environment variables to .env.local.
pnpm dev:app starts the chat and the agent together with vercel dev, and routes /eve/v1/* requests to the agent the same way a deployment does. Open the URL it prints and send a message. When EVE_ACCESS_PASSWORD is unset, the chat opens without a password. To chat with the agent in your terminal instead, run pnpm dev:agent.
Before deploying, check your changes and confirm the agent and the web app build:
pnpm validate
pnpm build
Use pnpm fix to apply automatic formatting and lint fixes. When the checks pass, deploy with:
vercel deploy --prod
| Customize | Where |
|---|---|
| Persona and response style | agent/instructions.md |
| Tools | agent/tools/ |
| Components the agent can render | agent/lib/ui-catalog.ts and apps/web/app/_components/ui-registry.tsx |
| Chat interface | apps/web/app/_components/ |
For more ways to customize the agent, including adding components, using your own authentication provider, and connecting another eve agent such as the eve Data Analyst Template, see CUSTOMIZATION.md.
Template for getting started with eve and TanStack Start.
See the code
Web chat built on eve and TanStack Start, where the agent can respond with generative UI like tables and dashboards. Ask "Find me the latest Vercel blog posts" and the agent searches the web, then returns a row of result cards with a preview image and summary for each post.
Vercel's project setup flow will create a repository in your Git account and a Vercel project. You'll then be prompted to add the following environment variable:
| Environment variable | What to enter |
|---|---|
EVE_ACCESS_PASSWORD | The password visitors enter before they can chat. Share it with the people who should have access. |
When the deploy finishes, open the deployment URL and enter the password. Then ask the agent something that needs a web search, such as "Find me the latest Vercel blog posts".
| Layer | Technology |
|---|---|
| Agent framework | eve |
| Generative UI | json-render |
| Sandbox | Vercel Sandbox |
| Deployment | Vercel Services |
| Frontend framework | TanStack Start |
| Data tables | TanStack Table |
| Keyboard shortcuts | TanStack Hotkeys |
The agent lives in agent/, and the chat lives in apps/web/. They deploy together with Vercel Services in one project, and vercel.ts wraps the chat's service in withEve.
Ask the agent to find the latest Vercel blog posts and it searches the web before showing them as cards. When it needs your input it asks with a short form. You can reload the page to return to the conversation later, or share its link with anyone who has the password.
| Tool | File | What the chat shows |
|---|---|---|
render_ui | render_ui.ts | Result cards, metrics, tables, and other components from a fixed catalog |
ask_question | ask_question.ts | Options to choose from, or a field to type an answer |
approval_demo | approval_demo.ts | Asks for your approval before it runs |
Visitors who haven't signed in are sent to a sign-in page to enter the password set in the EVE_ACCESS_PASSWORD environment variable. Choose a long random password, such as the output of openssl rand -base64 32. Everyone with the password is trusted equally, so share it only with people who may see each other's chats.
Until you set EVE_ACCESS_PASSWORD, the sign-in page asks you to set it. To replace the password with Clerk, Better Auth, or another auth provider, see Change who can use the chat in the customization guide.
Use Node.js 24 and pnpm. Install the Vercel CLI, then clone your repository and run:
pnpm install
vercel link
vercel env pull .env.local
pnpm dev:app
Choose your deployed project when vercel link prompts you. vercel env pull .env.local saves your project's development environment variables to .env.local.
pnpm dev:app starts the chat and the agent together with vercel dev, and routes /eve/v1/* requests to the agent the same way a deployment does. Open the URL it prints and send a message. When EVE_ACCESS_PASSWORD is unset, the chat opens without a password. To chat with the agent in your terminal instead, run pnpm dev:agent.
Before deploying, check your changes and confirm the agent and the web app build:
pnpm validate
pnpm build
Use pnpm fix to apply automatic formatting and lint fixes. When the checks pass, deploy with:
vercel deploy --prod
| Customize | Where |
|---|---|
| Persona and response style | agent/instructions.md |
| Tools | agent/tools/ |
| Components the agent can render | agent/lib/ui-catalog.ts and apps/web/app/_components/ui-registry.tsx |
| Chat interface | apps/web/app/_components/ |
For more ways to customize the agent, including adding components, using your own authentication provider, and connecting another eve agent such as the eve Data Analyst Template, see CUSTOMIZATION.md.