FeaturesCMSNotion

Search

Add searchable Notion content UI and API routes.

import { SearchDialog } from '@kit/notion/ui/search-dialog';
import { notionConfig } from '../../../config/cms.config';

export function NotionSearchDialogDemo() {
    return (
        <div className="w-full max-w-md">
            <SearchDialog config={notionConfig} contentType="posts" placeholder="Search blog posts..." />
        </div>
    );
}

What It Does

Provides backend search endpoint helpers and frontend SearchDialog UI component.

When To Use

You need in-app search over Notion-backed content.

Prerequisites

Notion content configured.
API route enabled.

Important

This page describes the standard kit integration path; adapt app-specific paths and config names when your project differs.

How To Use

Component source

components/ui/search-dialog.tsx

'use client';

import { Badge } from '@kit/ui/badge';
import { Button } from '@kit/ui/button';
import {
    Command,
    CommandDialog,
    CommandEmpty,
    CommandGroup,
    CommandInput,

Get the Kit

Kit required to see the full code

Video walkthrough

Connect your Notion database before enabling search

Backend route

app/api/notion/search/route.ts

import { createNotionSearchHandler } from '@kit/notion/api';
import { notionConfig } from '~/config/cms.config';
 
export const POST = createNotionSearchHandler(notionConfig);

Frontend dialog

import { SearchDialog } from '@kit/notion/ui/search-dialog';
 
<SearchDialog config={notionConfig} contentType="posts" placeholder="Search posts..." />

API Reference

SearchDialogProps

Prop	Type	Default
`config*`	`TConfig`
`contentType*`	`keyof...`
`placeholder`	`string`
`className`	`string`

MCP Context

capability: notion_search
entrypoints:
  - @kit/notion/api#createNotionSearchHandler
  - @kit/notion/ui/search-dialog
inputs:
  - query
  - content_type
outputs:
  - ranked_search_results
constraints:
  - search endpoint expects POST body schema
side_effects:
  - Notion query traffic

Agent Recipe

Add search API route.
Render SearchDialog with matching contentType.
Validate keyboard shortcut and query behavior.

Troubleshooting

Empty results: verify content type key and indexed fields.
Request errors: validate request payload schema.

Notion

LLMs

Expose content as markdown endpoints for AI tooling.

AskAI

Add an AI-assistant launcher tied to markdown/LLM endpoints.

How is this guide?

Last updated on 3/23/2026