How to Add AI Docs Search to Your App with DocStar

With DocStar you can add AI-powered docs search to your own app in one prompt. The DocStar Search SDK puts a Cmd/Ctrl + K search window and an Ask AI chat inside your website or web app, answering from your published DocStar docs. Your coding agent adds it to your code through the DocStar MCP, and you review the change before it ships.

Most users never open your help center. They get stuck inside your product, look for help there, and when they can't find it they open a ticket or give up. In-app docs search fixes that: the answer comes to where the question started. This guide shows how to set it up the DocStar way, with your AI agent doing the work.

The DocStar Search SDK is a small script that searches a published DocStar collection directly. There's no backend to build, no search index to host and no embeddings pipeline to run.

Only published pages appear in results, so drafts and work in progress never show up in your app.

It's the same experience readers already get on a published DocStar site, where the search bar says "Ask AI or search docs..." and every page offers Ask AI about this page. The SDK brings it into your product.

Adding a script tag sounds like a two-minute job. In practice someone has to find the right collection ID, decide where the scripts load, wire a visible Help button, pick how results open, and check that the docs the search will surface are actually good enough to be found. That last part is where in-app search usually goes wrong: a great search box over thin docs just returns nothing faster.

With DocStar, your coding agent handles all of it in one pass, because it can see both sides at once: your app's code in the repo, and your docs in DocStar through the DocStar MCP.

Connect Claude Code, Cursor, Codex or another MCP-capable assistant to DocStar. Use DocStar from your assistant's connector directory if it's listed there, or add it as a custom (remote) MCP server with this URL:

https://mcp.docstar.io/mcp

The first time the agent needs your workspace, you sign in to DocStar in your browser. There's no API key to copy, and the agent works only with the collections your account can access, with your permissions. Full steps: Connect your AI assistant.

Open your app's repo in the agent and paste a prompt like this:

Use the DocStar MCP to add DocStar docs search to this app. Find our public help docs collection in DocStar and get its collection ID. Read https://docstar.io/help/integrations/search-sdk and add the Search SDK to our main layout so it loads once on every page. Use openMode "iframe" so users stay in the app. Add a visible "Help" button in the header that calls window.DocStarSearch.open(). Then read our app's main screens and list the user questions our published docs don't answer yet, and draft the missing pages as drafts in DocStar. Show me the code diff and the list of draft pages before you save anything.

[Screenshot: Coding agent showing its plan for adding DocStar search to the app]

Here's what happens after you hit Enter:

1. Finds your docs. Through the DocStar MCP it lists your collections, picks the help docs one with you, and reads the collection ID.

2. Reads the setup guide. It reads the Search SDK help page so it uses the real script and options, not a guess.

3. Adds the SDK to your code. It loads the script once in your main HTML file or layout, then calls window.DocStarSearch.configure() with your collection ID and options.

4. Adds a Help button. Not everyone knows Cmd/Ctrl + K, so it wires a visible button to window.DocStarSearch.open().

5. Finds the gaps. It compares the screens and flows in your code with what your published docs cover, and lists the questions users will search for but won't find.

6. Drafts the missing pages. It writes them in your DocStar collection as drafts. Nothing reaches your live docs, or your in-app search, until you publish.

7. Asks before changing anything. You see the code diff and the draft list first.

The configuration it adds looks like this (from the Search SDK help page):

<script src="https://script.docstar.io/scripts/search-sdk/search-sdk.script.min.js"></script>
<script>
  window.DocStarSearch.configure({
    collectionId: "your-collection-id",
    openMode: "iframe",
    debounceDelay: 300,
    enableKeyboardShortcut: true,
    minSearchLength: 2
  });
</script>

In a React app, the Help button is just:

function HelpButton() {
  return (
    <button onClick={() => window.DocStarSearch && window.DocStarSearch.open()}>
      Help
    </button>
  );
}

Your role is review and the judgment calls the agent shouldn't make alone:

• Which collection users search. Point the SDK at your public help docs, not an internal wiki.

• How results open. iframe keeps users in your app while they read. newTab makes sense when your docs should open on their own site, such as your help center on your own domain.

• Tone and accuracy of the new pages. Read each draft, fix anything only your team knows, and publish the ones you're happy with.

• Merging the code change. Review the diff like any other pull request.

Once you publish, those pages show up in the search window and in Ask AI answers inside your app.

The SDK has a short list of options. Ask the agent to change them, or edit them yourself:

You can also open and close the window from your own code with window.DocStarSearch.open() and window.DocStarSearch.close(). That's useful for a "Need help?" link next to a tricky form, or an empty state that opens search for the user.

In-app search is only as good as the docs behind it. The good news: the SDK searches your published DocStar collection directly, so there's nothing to re-index or redeploy. When you publish an updated page, that's what your users find.

The ongoing job is keeping the docs themselves current, and that's where your agent helps again. When you ship a feature, ask it in the same session:

Read the changes in this branch. Update the DocStar help pages that describe these screens, and draft new pages for anything new. Save everything as drafts and show me what changed.

The agent reads the code change, updates the matching pages as drafts, and you publish. To make this a habit, add a line to your repo's AGENTS.md or CLAUDE.md telling the coding agent to update the DocStar help docs whenever a user-facing screen changes. That only works when changes go through the agent, so keep a quick docs check in your release review too.

Two more ways to close the loop:

• Turn repeat questions into FAQs. DocStar can draft FAQ suggestions from your docs that you approve before they go live. See How to Reduce Support Tickets with DocStar FAQs and AI.

• Read what readers tell you. DocStar collects thumbs up/down ratings and reader comments on published pages. Use them to decide which pages to fix next. See Documentation Analytics: How to Improve Your Docs with DocStar.

You can skip the agent entirely. Copy your collection ID from the collection's URL in DocStar (it's the part after /collection/), paste the two script tags from the Search SDK guide before the closing </body> tag, and add a button that calls window.DocStarSearch.open(). Publish the pages you want users to find, and you're done.

• No search backend. Two script tags and a collection ID. DocStar hosts the search and the Ask AI chat.

• One source for every channel. The same published docs power your docs site, the in-app search, your help center on your own domain, llms.txt and Markdown copies for AI, and an MCP server for AI assistants.

• Agent-first setup and upkeep. Your coding agent wires the SDK, finds gaps in your docs and drafts fixes through the DocStar MCP. You stay in control of what gets published.

• Safe by design. The agent asks before it changes anything, every edit starts as a draft, and only published pages ever appear in search.

• Works with your stack. Plain HTML, React, Vue, Angular or anything else that renders a web page.

No. The SDK searches your published DocStar collection directly. You add two script tags and your collection ID, and DocStar handles search and Ask AI.

No. Only published pages appear in results. Your agent saves its new pages as drafts, and they reach your in-app search only after you publish them.

Any web framework, including plain HTML, React, Vue and Angular. Load the scripts once, for example in your main HTML file or layout, and call window.DocStarSearch.open() from any button.

Yes. After results appear, users click Ask AI, ask in plain language, and keep asking follow-ups in the same chat. Answers come from your docs.

No. Add the DocStar MCP (https://mcp.docstar.io/mcp) to your assistant and sign in to DocStar in your browser the first time. The agent uses your permissions and asks before it changes anything.

Bring your docs to where your users get stuck. Create a DocStar workspace, publish your help docs, connect your coding agent to the DocStar MCP, and ask it to add search to your app.

Get started free