# Node Claude streaming chat

A Claude chat page streams answers from `claude-sonnet-4-6`, preserves context for follow up questions, and renders model Markdown safely. Tokay runs the Node.js app as one Web Service with your Anthropic key stored as a Secret.

Use this project to follow Anthropic's Messages API from a browser conversation through the SDK stream and back. The interface stays useful while the private credential never reaches client code.

## Facts

- Runtime: Node.js
- Framework: Express
- Service types: Web Service
- Resources: None
- Required secrets: `ANTHROPIC_API_KEY`

## What it does

The composer begins with a trip planning question that you can send as written or replace.

Claude's text appears while it is generated, then remains in the thread for your next question. Markdown lists, tables, links, and code become safe page content.

The response footer records elapsed time and token use. Press **New chat** to clear the conversation and begin without earlier context.

## Deploy it

Bring this folder to Tokay any way you like. Paste or upload it in the dashboard, push it with git, or hand it to your AI agent along with [our agent instructions](https://app.tokay.io/llms.txt). Tokay figures out the rest.

Working in Claude, ChatGPT, VS Code, or another MCP client? Connect the [Tokay MCP server](https://tokay.io/docs/platform-mcp) and ask your agent to deploy this example. It signs in through your browser, so there is no token to paste.

New to Tokay? The [getting started guide](https://tokay.io/getting-started) walks you through your first deploy.

## Add your Anthropic API key

Create a key in the [Anthropic Console](https://console.anthropic.com/settings/keys). On the Service page, open **Environment** and find `ANTHROPIC_API_KEY` under **From your code**. Choose **Set shared value**, leave it marked **Secret**, and save the Anthropic key.

After the Anthropic key reaches **Good to go**, complete the deployment tracker. Use **Go Live** if shown, then open Claude from the Service URL.

## Try it

1. Send the provided question and watch Claude answer before the request finishes.
2. Refer to one place from the response and ask for a different recommendation.
3. Clear the chat and repeat that request. Claude now asks for the context it no longer has.

## How it works

You can continue the thread because the browser sends its messages again on each turn. The server streams Claude's text deltas over SSE, then reads the SDK's final accumulated message for the authoritative usage and stop reason.

The demo reserves output space and lets Anthropic enforce Claude's context limit. If the model reaches that boundary, the page tells you to begin a new chat.

Marked handles the Markdown syntax and DOMPurify removes unsafe HTML. Neither the key nor the conversation is stored as application data.

## Secrets

| Name | Visibility | Required | Purpose |
| --- | --- | --- | --- |
| `ANTHROPIC_API_KEY` | Secret | Yes | Authenticates requests to Anthropic. |

## Grow from here

Try the [AI research queue](/examples/python-fastapi-postgres-ai-research-queue) when Claude should synthesize evidence outside a browser request.

## Source files

- [package.json](https://tokay.io/examples/src/node-claude-streaming-tool-chat/package.json)
- [src/server.ts](https://tokay.io/examples/src/node-claude-streaming-tool-chat/src/server.ts)
- [tsconfig.json](https://tokay.io/examples/src/node-claude-streaming-tool-chat/tsconfig.json)

## Download and source

- [Download the complete project](https://tokay.io/examples/downloads/node-claude-streaming-tool-chat.zip)
- Last updated: 2026-07-31
- Example revision: `52c7b7f`
- [View this revision on GitHub](https://github.com/tokayio/tokay-examples/tree/52c7b7ffd52e157375b08f1f11ff4fbe6c498642/node-claude-streaming-tool-chat)