SHIPPED/TOOLS
Independent developer field guide
Edition 0012026
Stack recipe · AI app

AI chatbot with Vite, Netlify Functions and OpenAI

For developers who need a browser chatbot with streaming replies, a serverless proxy that keeps API keys private, and error monitoring.

This recipe is assembled from official documentation and was not built end to end for this page.

The parts

Role Tool Why
Frontend Vite Vite provides a fast development server over native ES modules and a build command that outputs optimized static assets for production.
Hosting Netlify Netlify hosts static frontend assets and provides serverless functions to securely proxy requests without exposing secret API credentials.
AI OpenAI API OpenAI API gives programmatic access to language models, with streaming responses covered in its Streaming guide.
Monitoring Sentry Sentry provides error monitoring for web applications, with a JavaScript SDK for browser code.

Why this stack fits

An AI chatbot frontend needs a responsive UI, low-latency streaming, and careful credential handling. Pairing Vite and React with Netlify Functions, the OpenAI API, and Sentry gives you an architecture that keeps credentials on the server and tracks errors in the app.

Vite powers the React frontend application. As documented on the Vite official website and the Vite guide, Vite provides a local development server over native ES modules and a build command that outputs optimized static assets for production. This lets developers build chat components, manage message state, and render Markdown or code snippets.

Netlify provides static asset hosting alongside serverless compute. As detailed on the Netlify official website, the Netlify documentation, and the Netlify Functions overview, Netlify deploys static assets across a global content delivery network while compiling serverless backend endpoints from the same Git repository. This backend function acts as the secure intermediary between browser clients and AI model providers.

The OpenAI API provides inference from foundation language models. According to the OpenAI Developers portal and the OpenAI API documentation, developers can send conversational messages to models and stream back completions chunk by chunk.

Sentry provides error monitoring for web and full-stack applications. As shown on the Sentry official website and the Sentry documentation, Sentry helps teams find exceptions in the browser application, so a failed chat request or a crash in the interface can be traced to its source.

Why API keys must stay server-side

Secret API keys must never be embedded in client-side code.

In client-side frameworks like React bundled with Vite, code executes entirely within the end user's web browser. If an OpenAI API key were embedded in client source files or injected via client-accessible environment variables, it would be bundled directly into downloaded JavaScript files. Any visitor or automated scraping bot can inspect browser network calls, review minified JavaScript files in developer tools, or extract the key directly. Exposed keys can be abused by third parties to execute unconstrained inference requests at the owner's expense.

The official OpenAI production best practices guide explicitly warns developers regarding credential safety:

Avoid exposing the API keys in your code or in public repositories; instead, store them in a secure location like an environment variable or a secret management service.

Netlify addresses this requirement directly. In the Netlify environment variables overview, Netlify allows developers to assign environment variables specifically to the Functions scope. This ensures that the secret key is accessible only to server-side execution environments during incoming requests and is never exposed in client bundles or public build outputs.

How the components connect

Requests go through a serverless function:

  1. User input: The user types a prompt into the React chat interface and submits the form.
  2. Serverless proxy: The browser sends a POST request to /api/chat, which runs the Netlify function, passing only the user message payload.
  3. Upstream authorization: The Netlify serverless function retrieves the OPENAI_API_KEY from its server-side environment variables and calls the OpenAI chat completion endpoint.
  4. Streaming response: The serverless function pipes the incoming token stream from OpenAI directly back to the browser client, where React updates the message bubble in real time.
  5. Observability: If an exception occurs in the browser, such as a failed request that the chat interface cannot handle, the Sentry SDK reports it with diagnostic context for the engineering team.

What it costs to run

The components use these pricing models:

  • Vite: Fully open source under the MIT license with zero platform fees (Vite License).
  • Netlify: Operates on a freemium pricing model, with a free plan that includes monthly usage credits covering static hosting and Functions (Netlify Pricing).
  • OpenAI API: Operates on usage-based pricing, with usage measured in tokens across model inputs and outputs (OpenAI Developers).
  • Sentry: Operates on a freemium pricing model, offering a free Developer plan, with additional events available beyond the included allowance on paid usage (Sentry Pricing).

When to pick something else

Consider alternate providers based on feature needs:

  • Vercel: If your project is built with Next.js or makes heavy use of the Vercel AI SDK, Vercel offers an alternative deployment platform with Vercel Functions and AI SDK streaming and tool calling (Vercel Pricing).
  • Claude API: If your application needs Anthropic models or prompts above 100K tokens, explore the Claude API platform and Claude documentation, which list token-based pricing tiers (Claude API Pricing).

Setup steps

  1. Scaffold a React application using Vite with npm create vite@latest.
  2. Build the chat interface components including message bubble lists, an input bar, and streaming indicators.
  3. Create a serverless function in netlify/functions/chat.mts that exports a config with path "/api/chat" and forwards user prompts to the OpenAI API.
  4. Configure the OpenAI API key as a Netlify environment variable with its scope set to Functions, so it stays out of public browser bundles.
  5. Install the Sentry browser SDK in the React client to capture exceptions from the chat interface.
  6. Deploy the project to Netlify, linking the repository branch for automated continuous integration.

Tradeoffs

  • Serverless function execution limits can disrupt long-running conversational streaming if response generation exceeds default timeout thresholds.
  • Third-party AI model APIs charge on a usage-based token consumption model that can escalate unexpectedly during traffic surges without billing limits.
  • Error tracking requires configuring the client-side Sentry SDK with appropriate data scrubbing to prevent leaking user prompts.

Swap options

Hosting: Vercel. Swap to Vercel for Vercel Functions and the Vercel AI SDK, which provides streaming and tool calling for chat applications.

AI: Claude API. Swap to Claude API when the application needs Anthropic models or prompts above 100K tokens.