Grok's Search Tools Open Up Real-Time Web and X Data for Bubble Builders

xAI's Grok API has added search tools that allow your API calls to pull from live web results and X (formerly Twitter) content in real time. For Bubble builders, this means you can build apps that answer questions using current information rather than relying solely on the model's training data. The integration works through the API Connector, but it requires switching from Grok's older completions endpoint to the newer responses format.

From Completions to Responses: What Changed

Earlier Grok integrations in Bubble used the chat completions endpoint with an array of messages in the request body. The search tools require the responses endpoint, which uses a different JSON structure. The two formats are not compatible, so if you have an existing Grok API call in Bubble, you will need to reinitialize it after updating the endpoint and body structure.

Once updated, reinitializing the call in the API Connector trains Bubble on the new response shape, which is important because the data that comes back is structured differently from a standard completions response.

Understanding the Response Structure

A response from the Grok search tools endpoint returns an outputs list. Each item in the list represents a step in Grok's reasoning or search process. Some items are web search calls, where the model has formulated and executed a search query. Others are the final message that should be shown to the user.

To display only the useful answer, you need to filter the outputs list to find the item where the type is message, then navigate into its content array to reach the text value. Filtering a list in Bubble uses the where condition on a list field, and drilling into nested lists requires chaining field accessors.

Opening the raw API response in a JSON tree viewer (search "JSON tree online" to find one) makes the structure much easier to navigate than reading flat text. Identify the path to the content you want, then recreate that path in Bubble's dynamic data picker.

Adding Dynamic Input and Storing the Response

In the API Connector, replace the static message content with a triangle bracket variable so Bubble treats it as a dynamic field at workflow runtime. Remove the surrounding quotation marks from the body, because the :formatted as JSON safe text modifier in the workflow will add them back correctly while also escaping any special characters that would break the JSON syntax.

For the response, a custom state is the right storage choice for single-turn queries. A custom state stores the result without writing to the database, making the display instant and keeping unnecessary records out of your data tables.

Authentication for the Grok API

Grok uses private key in header authentication with the header name Authorization and the value prefixed with Bearer. The content type header does not need to be added manually because application/json is the Bubble API Connector's default. These two details are easy to miss and are the most common reasons an initial Grok connection fails.

What to Build with Live Search in Bubble

Having real-time web and X search available in a Bubble workflow opens up several app patterns: competitive intelligence dashboards, news monitoring tools, customer sentiment trackers pulling from X, and AI assistants that answer questions about current events rather than only training data. The X semantic and thread-based search in particular gives access to a level of social intelligence that is difficult to replicate through other APIs.

For builders already using Grok in their Bubble apps, adding the search tool is an incremental change to the API call structure that significantly expands what your app can answer.