Warp UI design for search people can use

Ask an agent for search and you usually get a text field that works when you type the exact name and press Enter. Real people make typos, type half a word, and hit a blank page when nothing matches. Then they assume the thing doesn't exist.

Example task used in this guide: turn a bare search box into search people can use, including when nothing matches.

Search people can use

Good search answers two questions fast: is the thing I want here, and if not, what should I try next? That means results as you type, a useful no-results state and filters that don't get in the way. Agents don't make those choices unless you write them down.

Put the rules in AGENTS.md

Warp's agent reads AGENTS.md at the root of your project (the name must be in capitals). Add a search section like this:

# Search

- The search field is easy to find on every page that has something to search, with a placeholder that says what you can search for.
- Results update as people type, after a short pause. Matching words are highlighted.
- Show recent searches when the field is empty and focused.
- No results says what was searched, suggests a fix (check spelling, fewer filters) and offers a way forward.
- Filters show how many are active, with one "Clear all". Clearing the search keeps people where they were.
- Show loading and failed-to-load states. Keyboard: Enter opens the first result, Esc clears.
- Reuse our existing Input, List and Button components. No new colors.

If your project still has a WARP.md in the same folder, Warp uses that one instead, so put the section there.

Study real search screens

With UXKIN connected, Warp's agent can call find_ui_references with plain words like "search results filters" or "search no results", then open a whole search journey from a real app with get_journey.

Ask it to compare three on a few points: when results appear, what no results looks like, and how filters behave. Then have it say which decisions it's adopting. You're borrowing decisions, not screens.

Search like a user

• Type half a word: results appear without pressing Enter, with the match highlighted.
• Make a typo and search for something that isn't there: no results says what you searched and what to try.
• Add two filters, then clear the search: the filters stay, and "Clear all" removes them.
• Paste a very long query: nothing breaks the layout.
• Keyboard only: Enter opens the first result, Esc clears.
• 375px and 1440px, and a slow or failed load.

Set up UXKIN in Warp

UXKIN connects as a remote MCP server, and you sign in with your UXKIN account, so there's no token to copy. You need a UXKIN plan (Monthly or Lifetime).

1. Open Settings → Agents → MCP servers (or search the Command Palette for Open MCP Servers).
2. Click + Add, choose Streamable HTTP or SSE Server (URL), paste this and save:

{
  "uxkin": {
    "url": "https://uxkin.com/mcp"
  }
}

3. Warp opens the UXKIN page in your browser. Log in and click Allow.
4. Check that uxkin is running and lists find_ui_references, find_ui_materials and get_journey. If it doesn't start, click View Logs.

Warp keeps the sign-in on your computer, so you only do it once per computer. You can remove it from the same MCP servers page.

Add the UXKIN skills

UXKIN also publishes free skills that work with no account, like no-ui-slop and uxkin-research. Warp loads skills from the project's .agents/skills folder, which is where this installs them:

npx skills add uxkin/agent

Warp's agent uses a skill when it fits the task, or type /no-ui-slop to use it by name.

A prompt you can use

Adapt it to your own search. It starts by reading the code and the rules, asks for real references and lists what to check:

Rework the search in src/search. Today it only searches after pressing Enter, shows a blank page when nothing matches, and loses the filters when the search is cleared.

First, read the search code and AGENTS.md, and list what breaks the rules.

If UXKIN is connected, call find_ui_references with "search results filters" and with "search no results", then open one complete search journey with get_journey. Compare three: when results appear, what no results looks like, and how filters behave. Tell me which decisions you're adopting.

Then:
- Update results as people type, with matching words highlighted.
- Show recent searches when the field is empty.
- Design no results with what was searched and a way forward.
- Keep filters when the search is cleared, with an active count and "Clear all".
- Add loading and error states, Enter and Esc.

Try it with a typo, a very long query and no results, at 375px and 1440px. List each change in one line.

Questions