# Build with eve and TanStack Start to make a web chat

> Source: <https://github.com/vercel-labs/eve-tanstack-start-template>
> Published: 2026-10-12 06:00:09+00:00

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).