Claude’s API Now Supports CORS Requests

Anthropic enables CORS support for Claude API: Anthropic has introduced CORS support for their JSON APIs, allowing developers to make direct calls to Claude language models from client-side applications.

• The new feature was quietly introduced through a pull request in the Anthropic TypeScript SDK, enabling browser-based usage of the API.
• Developers can now add the HTTP request header “anthropic-dangerous-direct-browser-access: true” to enable CORS support for the Anthropic API.

Significance and potential use cases: This update opens up new possibilities for browser-based applications while also presenting potential security considerations.

• The feature is particularly useful for internal tools exposed to trusted users or applications implementing a “bring your own API key” pattern.
• It eliminates the need for server-side proxies, simplifying the architecture of some web applications.
• However, Anthropic had previously been cautious about implementing this feature due to the risk of API key exposure in client-side code.

Practical application example: One developer demonstrated the new functionality through a personal project that leverages the CORS support.

• The developer’s “Haiku” web application, which uses Claude to generate haikus from webcam photos, has been updated to use the new direct API access.
• Previously, the app required a custom proxy to add CORS support, but it can now communicate directly with Anthropic’s API.

AI assistance in implementation: Interestingly, the developer used Claude itself to modify the application code for the new API access.

• Initially, Claude advised against making direct API calls from a browser due to security concerns.
• After the developer explained the new recommendation from Anthropic, Claude proceeded to make the necessary code modifications.

Code snippet for implementation: A simplified JavaScript example illustrates how to use the new CORS support in browser-based applications.

• The code demonstrates how to make a POST request to the Anthropic API using the new header.
• It includes setting the appropriate headers, structuring the request body, and handling the response to display the generated haiku.

Broader implications: This update reflects the evolving landscape of AI API accessibility and integration in web development.

• The move towards allowing direct browser access to AI APIs could lead to more interactive and responsive AI-powered web applications.
• However, it also underscores the ongoing balance between convenience and security in API design, highlighting the need for developers to carefully consider the implications of client-side API access in their applications.