{"slug": "build-with-eve-and-tanstack-start-to-make-a-web-chat", "title": "Build with eve and TanStack Start to make a web chat", "summary": "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.", "body_md": "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.\n\nVercel'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:\n\n| Environment variable | What to enter | \n|---|---|\n| `EVE_ACCESS_PASSWORD` | The password visitors enter before they can chat. Share it with the people who should have access. | \n\nWhen 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\".\n\n| Layer | Technology | \n|---|---|\n| Agent framework | eve | \n| Generative UI | json-render | \n| Sandbox | Vercel Sandbox | \n| Deployment | Vercel Services | \n| Frontend framework | TanStack Start | \n| Data tables | TanStack Table | \n| Keyboard shortcuts | TanStack Hotkeys | \n\nThe 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`.\n\nAsk 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.\n\n| Tool | File | What the chat shows | \n|---|---|---|\n| `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 | \n| `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 | \n| `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 | \n\nVisitors 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.\n\nUntil 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.\n\nUse Node.js 24 and pnpm. Install the [Vercel CLI](https://vercel.com/docs/cli), then clone your repository and run:\n\n```\npnpm install\nvercel link\nvercel env pull .env.local\npnpm dev:app\n```\n\nChoose your deployed project when `vercel link` prompts you. `vercel env pull .env.local` saves your project's development environment variables to `.env.local`.\n\n`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`.\n\nBefore deploying, check your changes and confirm the agent and the web app build:\n\n```\npnpm validate\npnpm build\n```\n\nUse `pnpm fix` to apply automatic formatting and lint fixes. When the checks pass, deploy with:\n\n```\nvercel deploy --prod\n```\n\n| Customize | Where | \n|---|---|\n| Persona and response style | [agent/instructions.md](https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/agent/instructions.md) | \n| Tools | [agent/tools/](https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/agent/tools) | \n| 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) | \n| Chat interface | [apps/web/app/_components/](https://github.com/vercel-labs/eve-tanstack-start-template/blob/main/apps/web/app/_components) | \n\nFor 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).", "url": "https://wpnews.pro/news/build-with-eve-and-tanstack-start-to-make-a-web-chat", "canonical_source": "https://github.com/vercel-labs/eve-tanstack-start-template", "published_at": "2026-10-12 06:00:09+00:00", "updated_at": "2026-10-12 06:38:58.727806+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools", "generative-ai"], "entities": ["Vercel", "Vercel Labs", "eve", "TanStack Start", "TanStack Table", "json-render", "Vercel Sandbox", "Vercel Services"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/build-with-eve-and-tanstack-start-to-make-a-web-chat", "markdown": "https://wpnews.pro/news/build-with-eve-and-tanstack-start-to-make-a-web-chat.md", "text": "https://wpnews.pro/news/build-with-eve-and-tanstack-start-to-make-a-web-chat.txt", "jsonld": "https://wpnews.pro/news/build-with-eve-and-tanstack-start-to-make-a-web-chat.jsonld"}}