Haiku 5.5 JavaScript integration

A Haiku 5.5 JavaScript integration for a website belongs behind your application's server boundary. The browser sends a user request to your server; the server checks access, constructs the provider call and returns an allowed result. Shipping a provider key with the page gives visitors the credential, even if the interface never displays it.

The example below uses the official Anthropic package in Node. It illustrates request handling, not a deployed API service, and has not been run against a paid account for this article. To connect through a gateway, follow that gateway's protocol and identifiers rather than changing only the key in a native client.

Establish the Haiku 5.5 JavaScript boundary

Separate a browser form from a server module at the import level. A function that appears to run only after a button click can still be bundled into the browser if it lives in a client dependency graph. Use your framework's server-only convention and inspect a production bundle when establishing this boundary.

Install the documented package in the application that owns the server process. Preserve the dependency lockfile, and check the current TypeScript SDK requirements against your deployment runtime. A local Node program and an edge runtime can have different platform constraints even when they accept similar JavaScript syntax.

npm install @anthropic-ai/sdk

Read the key from server configuration without a public environment-variable prefix. Your browser-facing endpoint should accept the task data it needs, not an arbitrary upstream URL or provider credential. Otherwise a request field intended for convenience can become a way to redirect your authenticated outbound traffic.

Write a small Haiku 5.5 JavaScript adapter

The adapter below accepts an injected client so parsing can be tested independently. Its invented task extracts one issue category from a short message. The explicit stop check is intentionally conservative: an incomplete response should not quietly become an accepted label.

import Anthropic from '@anthropic-ai/sdk';

export async function classifyRequest(client, text, signal) {
  if (typeof text !== 'string' || !text.trim() || text.length > 10000) {
    throw new TypeError('Expected a nonempty message under 10,000 characters');
  }
  const message = await client.messages.create(
    {
      model: 'claude-haiku-5-5',
      max_tokens: 2048,
      system: 'Return billing or technical for the supplied request.',
      messages: [{ role: 'user', content: text }],
    },
    { signal }
  );
  const answer = message.content
    .filter((block) => block.type === 'text')
    .map((block) => block.text)
    .join('\n')
    .trim()
    .toLowerCase();
  if (message.stop_reason !== 'end_turn' || !['billing', 'technical'].includes(answer)) {
    throw new Error('No complete accepted label');
  }
  return { label: answer, usage: message.usage };
}

export function createServerClient() {
  return new Anthropic({
    apiKey: process.env.ANTHROPIC_API_KEY,
    timeout: 45000,
    maxRetries: 0,
  });
}

The character check is an application input constraint, not a token estimate. The timeout and output budget are also example choices, not service guarantees. Your production limits should follow measured task sizes, upstream restrictions and the duration your hosting platform permits a request to remain active.

Do not instantiate this client in a React component. A server route can reuse a properly scoped client while validating each user separately. Client reuse does not mean sharing conversation history, permissions or customer data across requests; those remain explicit inputs to the operation.

Own the request before awaiting the provider

Before starting a Haiku 5.5 JavaScript request, authenticate the caller and assign an application operation ID. Validate the input and allowed model on the server, even when the form already restricts both. Browser validation improves feedback; it cannot prevent somebody from constructing a different HTTP request.

Persist enough state to distinguish accepted, running, completed and interrupted work when your application promises recovery. A serverless process may disappear after the browser disconnects or the hosting timeout expires. A local variable holding the pending result will disappear with it. Do not promise resumability unless a durable record can support that promise.

Repeated clicks should resolve to the same application operation when they represent the same submission intent. A disabled button helps, but a second tab, network retry or impatient refresh can bypass it. Deduplicate server-side business operations independently of any provider request identifier. Provider request IDs are useful evidence, not a substitute for your own ownership rules.

Cancel Haiku 5.5 JavaScript work deliberately

The SDK accepts an AbortSignal in request options. Your server can connect that signal to an application deadline or an explicit cancellation policy. Decide whether closing the browser should cancel generation or merely stop displaying it; those choices serve different products and require different persistence behavior.

Aborting the local wait does not prove that the provider performed no work. Report cancellation as a lifecycle state and settle any usage according to authoritative evidence. A product that immediately refunds every disconnected request without reconciling upstream usage can misstate both the customer's balance and its own costs.

For a Haiku 5.5 JavaScript UI, keep partial text visually distinct from a completed answer. Never enable an irreversible follow-up action solely because a stream has emitted a plausible sentence. A final validation step should decide whether the answer is complete and eligible for the next operation.

Render returned text without granting it authority

Treat generated output as untrusted content. Plain text rendering is a straightforward default. If you add Markdown, use an established renderer and review its HTML and link policy. Generated markup should not become executable page code merely because it arrived from a model that usually produces helpful answers.

An answer that contains a URL is not proof that the destination is suitable for server-side fetching. Likewise, an apparent tool instruction inside prose does not authorize an external operation. Keep display, link navigation and executable actions separate. The application, not the response text, decides which operations a user has permission to perform.

This becomes especially important when Haiku 5.5 JavaScript output is embedded in an admin screen. Staff may reasonably trust the surrounding interface more than an ordinary chat message. Preserve the distinction through clear result status and explicit confirmation for consequential actions, rather than making generated text look like a system instruction.

Test the Haiku 5.5 JavaScript adapter locally

A fake client can test content-block parsing without credentials. Return a response containing one non-text block before the answer, then assert that the adapter still selects the label correctly. Add fixtures for whitespace, an unfamiliar category, a missing text block and an output-limit stop reason.

Test request cancellation with a fake that observes the supplied signal. Test duplicate submissions at the server boundary, where deduplication actually belongs. Neither a unit test of the React button nor a successful manual click demonstrates that concurrent HTTP requests cannot create two paid operations.

For Haiku 5.5 JavaScript integration tests, intercept the provider transport or inject a fixture client. A test environment should not quietly fall back to a developer's real key when a mock is missing. Make that absence fail loudly. Reserve live tests for an explicitly configured account with a spending policy and synthetic inputs.

Diagnose browser and server failures separately

If the browser reports a failed request, first establish whether your own endpoint accepted it. A cross-origin restriction, expired session or malformed form payload can stop the request before Anthropic is contacted. Log a safe application ID that lets support trace that boundary without exposing the prompt.

If the provider call fails, retain its status and request identifier where available. Translate that failure into a useful application state without returning raw credentials, headers or full upstream request dumps. A generic browser error and a sanitized server record can coexist; the user needs a next step, while the operator needs diagnostic detail.

A Haiku 5.5 JavaScript timeout should also be compared with the hosting platform's limit. Increasing the SDK timeout beyond the platform's maximum cannot keep the process alive. For long tasks, design a durable job flow or a supported streaming response instead of repeatedly enlarging a number in the client constructor.

Once the short adapter behaves correctly, add streaming or structured output as separate changes. Keep the initial fixtures throughout those changes. They provide a quick warning when a richer response format breaks the simple accepted-label path your application already depends on.