Braintrust

Webflow handles layout, content management, and hosting well. What it does not do is tell you whether your AI chatbot gave a correct answer, flag when your LLM-generated content drifts in quality, or surface hallucination rates before users notice. Traditional error monitoring catches crashes.

When you connect Braintrust and Webflow, your Webflow site gains an observability layer for AI. Evaluation results flow into Webflow CMS collections for public dashboards, webhook-triggered alerts update site content when quality drops, and form submissions feed directly into evaluation datasets for continuous testing.

This integration is most relevant to engineering teams shipping AI features on Webflow-hosted sites, agencies building AI-powered client projects, and product teams that need to track LLM quality alongside their marketing or product sites.

How to integrate Braintrust with Webflow

What is Braintrust? Braintrust is an AI observability and evaluation platform for engineering and product teams shipping LLM-powered features. It provides production trace logging, side-by-side prompt comparison, automated and human scoring, and CI/CD integration for regression detection with SDKs available in Python, TypeScript, Go, Ruby, C#, Java, and Kotlin.

Engineering teams use Braintrust and Webflow together when they need more than uptime monitoring, specifically when they want to log every AI interaction, score outputs against quality criteria, and detect regressions before users notice.

The Braintrust–Webflow integration supports four approaches:

• Custom code lets you link to Braintrust objects, embed public playgrounds, and call the AI Proxy from Code Embed elements or site-level custom code.  
• Automation platforms (Zapier, Make, or viaSocket) sync Braintrust events to Webflow CMS items without writing backend code.  
• The Webflow and Braintrust APIs give you full control over data sync, evaluation triggers, and automated publishing workflows, but require server-side development.  
• Webflow Cloud lets you deploy Next.js or Astro applications with the Braintrust SDK mounted directly on your Webflow domain for server-side instrumentation.

Most production setups combine two or more of these approaches — automation platforms for event routing, and API integration for complex workflows like quality gates that block site publishes until evaluations pass.

Add Braintrust links and embeds with custom code

Braintrust generates permanent shareable URLs for experiments and datasets that you can link directly on any Webflow page. The permalink format is:

https://www.braintrust.dev/app/braintrustdata.com/object?object_type=experiment&object_id=YOUR_ID

Only experiment and dataset are supported as object_type values. Individual traces can also be shared from the log viewer, and playgrounds may be shared in read-only mode — verify current availability of these options in your Braintrust account before building around them. Add any of these URLs as link destinations on buttons, text, or images in Webflow with no custom code needed.

To embed Braintrust content inline on a page, add a Code Embed element with an iframe pointing to a public Braintrust URL. Code Embed elements require a paid site plan, support up to 50,000 characters per embed, and only render on the published or previewed site — not in the Webflow canvas. Before building an iframe embed, check whether Braintrust's X-Frame-Options or Content-Security-Policy: frame-ancestors headers permit it by inspecting response headers in browser DevTools.

For dynamic content, place a Code Embed inside a Collection List and use Webflow's dynamic embed to inject CMS field values per item. Create a CMS collection called "AI Experiments" with an "Experiment ID" text field, and the Code Embed generates a unique Braintrust permalink URL for each CMS item without manual updates.

Use a Webflow page as a Braintrust span iframe

Braintrust supports an inverted embed pattern where your Webflow page displays inside the Braintrust evaluation UI. The Span iframes feature in Braintrust project settings (Settings > Project > Span iframes) loads any public URL inside the trace viewer. Build a custom visualization page in Webflow — using a Code Embed that listens for postMessage events — publish it, and enter the live URL in Braintrust's project settings. Annotators then see your Webflow-designed display surface directly inside Braintrust when reviewing spans.

Notion has documented using a similar pattern for data labeling and trace review. This approach requires no API integration and uses Webflow's design tools to build annotation-friendly interfaces that render inside Braintrust.

Call the Braintrust AI Proxy from client-side code

Braintrust's AI Proxy provides an OpenAI-compatible endpoint at /v1/proxy that routes requests across LLM providers with automatic caching, tracing, and scoring. You can call the AI Proxy from client-side JavaScript in a Code Embed element or in custom code added to the head or body of your site. The proxy endpoint accepts standard OpenAI-format requests and automatically logs each call to Braintrust for observability.

Never embed a permanent BRAINTRUST_API_KEY in client-side Webflow code — it is visible to anyone inspecting the page source. The AI Proxy requires Braintrust's temporary credentials system, where a backend issues short-lived tokens to the frontend. For sites without a backend, pair this method with a serverless function that issues temporary credentials on demand.

Connect with Zapier, Make, or viaSocket

Three automation platforms support Braintrust-to-Webflow connections for event-driven sync without writing backend code. Zapier has a dedicated Webflow + Braintrust integration page and offers Braintrust triggers paired with Webflow actions, including Create Live Item, Update Item, and Update Live Item. Make has a Braintrust connector that supports project tracking and dataset management workflows. viaSocket provides a Braintrust + Webflow integration page with Braintrust trigger support.

All three platforms hold your Braintrust API key server-side, so credentials never appear in your Webflow frontend. Common automation workflows include:

• When a Braintrust evaluation runs, update a Webflow CMS item to flag AI-generated content as reviewed or write a quality score to a CMS field  
• When a new Braintrust project is created, create a corresponding CMS entry for a public-facing AI roadmap or status page  
• Route Webflow form submissions through Make into Braintrust datasets, turning user feedback about AI responses into evaluation test cases  
• Pipe CMS content through Make into Braintrust for prompt evaluation and quality scoring before publishing

For non-developers who need CMS syncing or event routing, automation platforms are the fastest path to a working integration. Zapier also supports combining Braintrust triggers with conditional logic and multi-step workflows for more complex routing.

Build with Webflow and Braintrust APIs

Direct integration using the Webflow API and Braintrust's REST API (https://api.braintrust.dev) lets you build bidirectional data sync, evaluation-gated publishing, and custom workflows that go beyond what automation platforms cover. This approach requires server-side development, but gives you full control over how the two platforms exchange data.

A serverless function — AWS Lambda, Cloudflare Workers, Vercel, or Netlify — acts as the middleware layer, holding both API keys as environment variables and coordinating calls between the two platforms. Both APIs are well-documented and actively maintained, so the integration surface is stable.

The patterns below use these endpoints:

• Braintrust: POST /v1/project_logs/{project_id}/insert for logging traces, POST /btql for querying data, POST /v1/function for invoking production-pinned prompts, POST /v1/eval for launching evaluations  
• Webflow: PATCH /v2/collections/{collection_id}/items/{item_id}/live for live-item updates, POST /v2/collections/{collection_id}/items/bulk for batch creation (up to 100 items per request), POST /v2/sites/{site_id}/webhooks for registering webhook listeners

All calls require Authorization: Bearer tokens. Braintrust uses API keys created in Settings > API Keys; Webflow uses site tokens or OAuth tokens, depending on the endpoint.

Sync Braintrust evaluation data to Webflow CMS

Writing evaluation results to Webflow CMS collections creates public-facing dashboards, audit logs, or AI quality trackers. Query Braintrust traces using the BTQL endpoint, transform the response into Webflow's fieldData format, and create or update CMS items via the Webflow API.

This BTQL query retrieves recent high-scoring traces:

POST /btql
{
 "query": "SELECT id, input, output, scores FROM project_logs('your-project-id', shape => 'traces') WHERE scores.accuracy > 0.8 LIMIT 100",
 "fmt": "json"
}



CMS plan sites support 2,000 items; Business plan sites support up to 10,000 items. Plan your collection size accordingly if you intend to retain a public history of evaluations rather than only the latest summaries.

Trigger Braintrust evaluations from Webflow events

Register a Webflow webhook for form_submission or collection_item_created events using POST /v2/sites/{site_id}/webhooks. When the event fires, your serverless function receives the payload, fetches the full item data if needed, and calls POST /v1/eval to start a Braintrust evaluation. After the evaluation completes, retrieve the scores and compare them against your quality threshold. If the content passes, publish it via POST /v2/collections/{collection_id}/items/publish. If it fails, leave it in draft or write the score to a metadata field for review.

Webflow webhook payloads include x-webflow-timestamp and x-webflow-signature headers for authenticity verification. Verify these signatures server-side before processing any event, especially when the webhook can trigger publishing actions.

Receive Braintrust webhooks and update Webflow content

Braintrust's alerts system fires webhooks to your server when log events match specific conditions or when prompt environments change. Configure alerts at Settings > Project > Alerts. Two event types are available:

• The logs event fires when log entries match a BTQL/SQL filter within a configurable window (5 minutes to 24 hours)  
• The environment_update event fires immediately when a prompt environment is assigned or removed — relevant for teams that pin production prompts and want Webflow content to reflect version changes

This SQL filter example triggers when production factuality scores drop below a threshold:

scores.factuality < 0.8 AND metadata.environment = 'production'



Braintrust webhook payloads contain an aggregate count and a details.related_logs_url pointing back to the matching logs — individual log records are not included. To retrieve actual data for writing to Webflow CMS, your server must follow up with a POST /btql query. Use Braintrust webhooks as triggers, with your backend handling data retrieval and the Webflow CMS update.

Build on Webflow Cloud with the Braintrust SDK

Webflow Cloud lets you deploy Next.js or Astro applications mounted at a path on your Webflow domain, giving you server-side execution on the same origin. Add the Braintrust TypeScript SDK to your server-side code and instrument AI calls directly from API routes — keeping the Webflow frontend and Braintrust-enabled backend on the same domain without a separate service.

Webflow Cloud runs on an Edge runtime. Account for these constraints when integrating the Braintrust SDK:

• All external calls must use the native fetch API — axios and other HTTP clients are not supported  
• Environment variables are available at runtime only, not during build  
• BRAINTRUST_API_KEY initialization must happen at request time, not module load time

Add BRAINTRUST_API_KEY as a secret environment variable in Webflow Cloud — secret variables are encrypted and not exposed in build output. The @braintrust/browser package provides an AsyncLocalStorage polyfill if you need client-side tracing alongside server-side instrumentation. Test SDK behavior in a staging Webflow Cloud environment before deploying to production.

What you can build with the Braintrust Webflow integration

Integrating Braintrust with Webflow lets you monitor and act on AI quality data directly from your site without building a separate monitoring dashboard.

Here are a few things you can build with this integration:

• AI chatbot quality dashboard: Build a Webflow CMS-powered page that displays chatbot accuracy and sentiment scores updated automatically via Zapier or a serverless function — fields like accuracy percentage, duration, and token counts map directly to CMS collection fields.  
• Evaluation-gated content publishing: Hold AI-generated blog posts or product descriptions in draft until a Braintrust evaluation scores them above a quality threshold, using a collection_item_created webhook to trigger the evaluation and publish only on a passing score.  
• AI project changelog: Create a new Webflow CMS item every time a Braintrust project or experiment is created via Zapier, building a public-facing changelog that stays current with your AI team's evaluation activity without manual updates.  
• Feedback-to-evaluation pipeline: Collect user feedback on AI-generated responses through a Webflow form, route submissions through Make into Braintrust datasets, and convert production failures into regression test cases for continuous quality improvement.

For more advanced patterns like multi-model A/B testing and prompt version management driven by CMS changes, explore Braintrust's BTQL query endpoint and function invocation API directly.