How to Implement Natural Language Grid Search in Ext JS Using ChatGPT

Data-rich applications often present users with powerful but complex data grids. While traditional filtering and sorting options offer granular control, they can be cumbersome for non-technical users. A presentation by Andres Villalba of Sencha at JS Days 2025 demonstrated a forward-thinking solution: integrating ChatGPT with an Ext JS grid to enable natural language querying, transforming the user experience by making data interaction intuitive and conversational.

This article provides a deep dive into the architecture, implementation, and practical considerations of this innovative approach, which allows users to make requests like, “show users that are 50 years old or older and have an AOL account, ordered by country,” and see the grid update instantly. While the demonstration used Ext JS, the core principles apply to any modern data grid framework.

The Core Concept: From Conversation to Structured Data

The primary objective is to create a seamless translation layer. A user’s natural language query is captured and sent to an AI model, which then converts the unstructured text into a precise, machine-readable JSON object. This JSON object contains the exact filter and sorter configurations that the data grid framework requires to manipulate the data display.

System Architecture: A Three-Part Harmony

The proof-of-concept application was built on a robust and straightforward technology stack, with each component playing a critical role.

1. The Technology Stack

• Front-End: An Ext JS application provides the user interface, including the text input for the query and the data grid itself.
• Back-End: A NodeJS server acts as the crucial intermediary. It handles communication between the client and the AI service. Key NPM packages include:
  • Express: To create and manage the web server and API endpoints.
  • OpenAI: The official library for interacting with the OpenAI API.
  • CORS: To manage cross-origin resource sharing if the front-end and back-end are hosted on different domains.
  • express.json(): (Modern built-in middleware, formerly body-parser) To parse incoming JSON request bodies from the client.
• AI Service: The OpenAI API, specifically using the GPT-4 model. Villalba noted that while models like GPT-3.5 are cheaper, GPT-4 provides significantly higher reliability in consistently generating the correctly structured JSON output, making it the preferred choice for this task.

2. Data Flow and Security

The architecture is designed to be secure and efficient. The flow is as follows:

1. A user types a natural language query into the Ext JS application.
2. The front-end sends this query to the NodeJS back-end server.
3. The NodeJS server constructs a detailed prompt (including the user’s query) and sends it to the OpenAI API. Crucially, the OpenAI API key is stored securely as an environment variable on the server and is never exposed to the client-side code.
4. ChatGPT processes the prompt and returns the structured JSON containing the filters and sorters.
5. The NodeJS server forwards this JSON response back to the Ext JS application.
6. The front-end parses the JSON and applies the filters and sorters to the grid’s data store.

This server-mediated approach is essential for security. It ensures that sensitive credentials like the API key remain protected, a task that requires a basic back-end understanding even for predominantly front-end developers.

The Key to Success: Advanced Prompt Engineering

The reliability of the entire system hinges on the quality of the prompt sent to ChatGPT. A well-engineered prompt leaves no room for ambiguity and forces the AI to return data in the exact format required. The successful prompt was constructed from six essential components:

1. Define a Role and Task: The prompt begins by assigning a role to the AI, such as: “You are an assistant that converts user natural language queries into structured filters and sorters for a data grid.”
2. Provide the Data Schema: The prompt must define the available fields in the grid, including their names and data types (e.g., Name: string, Age: number, Email: string, Status: [‘active’, ‘inactive’], CreatedAt: date, Country: string, LastMonthSales: number).
3. Specify the Output Format: This instruction is explicit and rigid. For example: “Respond ONLY with a valid JSON object. The object must have a filters property (an array of filter objects) and a sorters property (an array of sorter objects).”
4. Establish Operator Mapping: The prompt defines how natural language phrases should map to logical operators (e.g., “contains” or “has” maps to a like operator; “between” for numbers maps to gt and lt operators; “is one of” maps to an in operator).
5. Implement Fail-Safes and Rules: To handle ambiguity and prevent errors, clear rules are included. For instance: “If the user asks to filter on a field not listed in the schema, ignore it. If the query is unclear, return an empty filters array. Do not use wildcards in values, as the filtering logic is handled by the operator.”
6. Inject the User Input: Finally, the user’s actual query is dynamically inserted into the prompt template.

The prompt also included concrete examples of desired outputs for complex cases, such as range queries (“sales between 1,000 and 1,500”) and date queries (“users created during 2023”), to ensure ChatGPT learned the exact required JSON structure.

Client-Side Implementation in Ext JS

Once the structured JSON is received from the server, the Ext JS client-side code must perform minor pre-processing before applying it to the grid’s store.

1. Map property to dataIndex: The JSON generated by the AI might use a generic field name like “property”: “Age”. Ext JS filters, however, require this key to be “dataIndex”. The client-side code must iterate through the received filters and rename this key accordingly.
2. Convert Date Strings to Objects: The AI will return dates as strings (e.g., “2023-01-01”). For accurate filtering, these strings must be converted into JavaScript Date objects before being passed to the Ext JS store’s filtering methods.

After these adjustments, the store.setFilters() and store.setSorters() methods are called, and the grid updates automatically to reflect the user’s natural language query.

Practical Considerations for Developers

Developer Skillset

This integration highlights a shift in developer skills. Beyond pure front-end proficiency, developers need:

• API Integration Skills: Comfort in connecting to and consuming third-party APIs.
• Basic Back-End Knowledge: Understanding how to set up a simple NodeJS server is vital for securing API keys.
• Prompt Engineering: The ability to write clear, structured, and context-rich prompts is becoming a critical skill for leveraging AI effectively.

API Costs and Optimization

Cost is directly tied to the number of tokens in the prompt and the response.

• Per-Query Cost: The demonstration’s complex prompt and response averaged around 460 tokens, costing approximately $0.02 (two cents) per query with GPT-4. The entire development and testing phase was completed using less than $5 in API credits.
• Cost Management: To optimize, developers can experiment with more concise prompts or use more cost-effective models like GPT-3.5-Turbo for simpler applications. For large-scale enterprise use, transitioning to a managed service like Azure OpenAI or AWS Bedrock could offer better performance, security, and potentially lower costs at scale, albeit with the added overhead of managing cloud services.

Conclusion

Integrating ChatGPT for natural language grid search represents a significant leap forward in user experience. It replaces complex UI controls with the simplicity of conversation. As demonstrated by Andres Villalba, this is no longer a futuristic concept but a practical reality. With thoughtful architecture, robust prompt engineering, and a modest budget, developers can build more intuitive, powerful, and accessible data-driven applications today.