Build with eve and TanStack Start to make a web chat

Vercel Labs released an open template for building a web chat on eve and TanStack Start in which the agent responds with generative UI such as tables, dashboards and result cards, deployed as a single Vercel Services project. The template ships three agent tools — render_ui, ask_question and approval_demo — and gates access behind the EVE_ACCESS_PASSWORD environment variable, which visitors enter on a sign-in page. Developers run it with Node.js 24 and pnpm via pnpm install, vercel link, vercel env pull .env.local and pnpm dev:app, then deploy with vercel deploy --prod.

Web chat built on eve https://eve.dev/docs/guides/frontend/tanstack and TanStack Start https://tanstack.com/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/ https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/agent , and the chat lives in apps/web/ https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/apps/web . They deploy together with Vercel Services https://vercel.com/docs/services in one project, and vercel.ts https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/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 https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/agent/tools/render ui.ts | Result cards, metrics, tables, and other components from a fixed catalog | | ask question | ask question.ts https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/agent/tools/ask question.ts | Options to choose from, or a field to type an answer | | approval demo | approval demo.ts https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/agent/tools/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 https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/CUSTOMIZATION.md change-who-can-use-the-chat in the customization guide. Use Node.js 24 and pnpm. Install the Vercel CLI https://vercel.com/docs/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 https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/agent/instructions.md | | Tools | agent/tools/ https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/agent/tools | | Components the agent can render | agent/lib/ui-catalog.ts https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/agent/lib/ui-catalog.ts and apps/web/app/ components/ui-registry.tsx https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/apps/web/app/ components/ui-registry.tsx | | Chat interface | apps/web/app/ components/ https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/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 https://github.com/vercel-labs/eve-data-analyst-template , see CUSTOMIZATION.md https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/CUSTOMIZATION.md .