--- title: "How to build a searchable directory on Gravity Forms by chatting with AI" date: 2026-07-29 author: "Casey Burridge" link: "https://www.gravitykit.com/build-searchable-directory-gravity-forms-ai/" --- Building a directory in WordPress used to mean manual plugin configuration: creating fields, mapping layouts, and wiring up search. Now you can build a directory website with AI by describing what you want in plain English. In this tutorial, I'll show you how I built a complete, searchable staff directory from a Gravity Forms form by chatting with Claude, using the free [GravityKit MCP](https://www.gravitykit.com/mcp/). The AI created the form, added the sample entries, built the [GravityView](https://www.gravitykit.com/products/gravityview/) View, and turned on search. My hands barely touched the keyboard (except to type prompts). ## Sneak peek Here's the finished directory we'll build: ![Staff directory built with GravityView, showing a search bar, department filter dropdown, and a three-column grid of staff cards with photos, job titles, bios, and phone numbers](https://www.gravitykit.com/wp-content/uploads/2026/07/01-staff-directory-front-end-1-1024x858.png) *Prefer the classic route? Our [Gravity Forms directory tutorial](https://www.gravitykit.com/gravity-forms-directory/) walks through the same kind of build using the View editor, no AI required* ## What is the GravityKit MCP? The GravityKit MCP is a free, open source [MCP server](https://www.gravitykit.com/what-is-a-wordpress-mcp-server/) that connects AI assistants like Claude to your Gravity Forms installation. Once connected, your AI assistant can create forms, manage entries, and build GravityView Views through conversation. It talks to your site over the secure Gravity Forms REST API, and it doesn't store your data. In other words: you describe the directory, and the AI assembles it on your actual WordPress site, using the same building blocks you'd configure by hand. ## What you'll need - A WordPress site with [Gravity Forms](https://www.gravityforms.com/) installed - [GravityView](https://www.gravitykit.com/products/gravityview/) – the add-on that displays your entries on the front end (every purchase includes a 30-day money-back guarantee) - The free [GravityKit MCP server](https://github.com/GravityKit/MCP) connected to an AI assistant such as Claude - 10 minutes and a rough idea of what your directory should contain We'll build a company staff directory, but the same conversation works for member directories, vendor lists, business listings, resource libraries, or any other collection of entries you want to make searchable. ## Step 1: Connect the GravityKit MCP to your AI assistant Our docs include a full walkthrough: [Creating Views with AI using the GravityKit MCP](https://www.gravitykit.com/docs/gravityview/advanced/build-views-with-ai/). The short version: - Enable the [Gravity Forms REST API](https://docs.gravityforms.com/rest-api-v2-authentication/) and create a WordPress application password so the MCP can sign in as you - Add the GravityKit MCP to your AI assistant's MCP configuration (it works with Claude Desktop, Claude Code, Cursor, and other MCP clients) - Restart your AI assistant and confirm the GravityKit tools show up The MCP operates within the permissions you give it, and with Gravity Forms logging enabled, every action it takes is logged in WordPress. ## Step 2: Create the form and sample entries by chat Every directory starts with a form. Instead of dragging fields around the form editor, I asked Claude: ``` Create a "Staff profiles" form with name, job title, department (dropdown: Engineering, Marketing, Sales, Support), email, phone, photo, and a short bio. Then add 12 sample staff entries so I can see the directory working. ``` ![Claude Desktop conversation with a prompt asking for a Staff profiles form with 12 sample entries, and Claude starting to work on it](https://www.gravitykit.com/wp-content/uploads/2026/07/08-chat-create-form-1024x316.png)A few seconds later, the form existed on my site, complete with the right field types: a Name field, a Drop Down for departments, Email, Phone, a file upload field for photos, and a Paragraph Text field for bios. ![Gravity Forms form editor displaying the Staff profiles form with Name, Job title, Department, Email, and Phone fields](https://www.gravitykit.com/wp-content/uploads/2026/07/02-form-editor-1024x576.png) *It also added 12 realistic sample entries across the four departments:*![Gravity Forms entries list showing 12 staff entries with first name, last name, job title, department, and email columns](https://www.gravitykit.com/wp-content/uploads/2026/07/03-entries-list-1024x576.png) ![](https://www.gravitykit.com/wp-content/uploads/2025/11/pro-tip.svg)**Pro Tip** Already have a form full of real data? Skip this step and point the AI at your existing form instead. And if your staff list lives in a spreadsheet, [GravityImport](/products/gravityimport/) can pull it into Gravity Forms as entries first. ## Step 3: Ask for a searchable directory This is where it gets fun. One prompt turns those entries into a directory: ``` Now build a searchable staff directory from that form. Show the photo, name, job title, and bio on each card, with the department and phone number below. Let visitors search by keyword and filter by department. ``` Behind the scenes, the GravityKit MCP created a GravityView View connected to the form, placed the fields into a card layout, and added a search bar with a keyword field and a department dropdown. **The important part**: this is a real View, not a black box. Open it in the GravityView editor and you'll see exactly what the AI configured, ready for you to adjust by hand whenever you want. ![GravityView View editor showing the Staff directory View with a search bar widget, pagination widgets, and the embed shortcode](https://www.gravitykit.com/wp-content/uploads/2026/07/04-view-editor-1024x576.png) ## Step 4: Refine it conversationally The first draft was close, but I wanted a few tweaks. Each one was a sentence, not a settings hunt: ``` Arrange the search fields side by side, with the search button on its own row below. ``` ``` Use the modern Vantage theme and show the cards in a three-column grid. ``` ``` Call the profile page "Staff profile" instead of the entry title. ``` The AI applied each change to the View, and I refreshed the page to see the result. ![](https://www.gravitykit.com/wp-content/uploads/2025/11/pro-tip.svg)**Pro Tip** Because every change lands in a normal GravityView View, you can mix and match. Let the AI do the heavy lifting, then fine-tune the details in the View editor. ## Step 5: Publish the directory on your site To put the directory in front of visitors, add it to a page. In the page editor, add the **GravityView View** block and select your new View from the dropdown. ![WordPress block editor with the GravityView View block added to a page and the Staff directory View selected in the block settings](https://www.gravitykit.com/wp-content/uploads/2026/07/05-gutenberg-block-1024x576.png) *Publish the page, and the directory is live. Visitors can search by name, filter by department, and click through to individual profiles* Here's what happens when a visitor filters by the Engineering department: ![Staff directory filtered by the Engineering department, displaying three matching staff cards and a Clear search button](https://www.gravitykit.com/wp-content/uploads/2026/07/Staff_directory_filtered_by_department-1024x461.png) *And clicking any name opens that person's profile page, which GravityView generates automatically from the Single Entry layout:*![Single staff profile page showing a team member's photo, bio, department, phone number, and email address](https://www.gravitykit.com/wp-content/uploads/2026/07/07-single-entry-1024x678.png) *That's it! Form entries in, searchable directory out, and the longest step was deciding what to name the departments* ## Optional enhancements The directory is a starting point. A few upgrades you can make (yes, you can ask the AI for these too): - **Put listings on a map** – The [Maps layout](https://www.gravitykit.com/products/maps/) displays entries as pins, ideal for business listings or provider directories. - **Accept public submissions** – Embed the Gravity Form so members or vendors can submit their own listings, and use [entry approval](https://www.gravitykit.com/docs/gravityview/entry-approval/approving-or-rejecting-entries-in-gravityview/) to review them before they appear. - **Handle thousands of entries** – The [DataTables layout](https://www.gravitykit.com/products/datatables/) adds fast, interactive tables for large datasets. - **Let people update their own listings** – GravityView's Edit Entry feature lets logged-in users edit the entries they created. ## Start building by chat A searchable directory used to be an afternoon project. With the GravityKit MCP, it's a short conversation: describe the form, describe the directory, and refine it in plain English, with a real GravityView View you can open and edit at any time. The GravityKit MCP is free and open source. [Get it on GitHub](https://github.com/GravityKit/MCP), connect it to your favorite AI assistant, and pair it with [GravityView](https://www.gravitykit.com/products/gravityview/) to turn your Gravity Forms data into directories, dashboards, and full web apps.