Build An AI-Powered Ctrl+F

Cape is a new AI that reads documents and then answers questions about them.

It does this by finding the bit of text in a document that answers your question. It allows you to leverage state-of-the-art tech to build your own AI with a few lines of code.

In this tutorial, we’ll show you how you can build an AI-powered Ctrl+F in 10 minutes. Try the demo here.

Getting Set Up

Getting The Code

You can clone our tutorial repository with completed working code.

git clone https://github.com/bloomsburyai/ctrlf-tutorial

Change directories to the new ctrlf-tutorial/ folder you will see the following files:

• index.html the html code containing an input field for the question and an editable div containing the text to be searched.
• static/app.js the javascript code calling the cape API and rendering the results.
• static/style.css a simple style sheet, to pretty print results.

Calling the answer endpoint

The Cape API allows you to upload many documents, you can then select which documents you want your answer from. In our case we just need to search the text in the editable div, the /answer endpoints allows you to pass the text you want the answers from, which is exactly what we need.

Step 1 — Get the text and the question

To obtain the text we use jquery to extract both the question and the text :

Step 2 — Submit to the endpoint URL

We first build the URL by giving a token:

Here we use a public answer token, this is generated for every user when you sign-up, and serves to identify the user. It must be given as an URL parameter.

We then simply take the previously extracted parameters (from Step 1) and make a request to the /answer endpoint

Step 3 — Display the results

We will receive the following format from our post request :

The interesting attributes of the response are :

• answerText the answer from the provided text
• answerTextStartOffset when to start highlighting the provided text
• answerTextEndOffset when to stop highlighting the provided text
• confidence the score used for ordering answers

Displaying results

We can then display these attributes, look at showAnswers() function for more details.

Wrap Up

In this tutorial we showed you how simple it is to use Cape to have AI in your app.

You could also use Cape to:

• Build an expressive query tool for textual data — e.g. find the number of product reviews where a customer mentions they made a complaint.
• Build a virtual office assistant that answers routine questions from your HR and compliance documents through Slack. Find the tutorial here.
• Build an add-on to your private search that mimics Google’s “direct answers”.

This is our mission at Bloomsbury AI (the company behind Cape) — to make the expertise stored in documents and in people’s heads as accessible as possible.

We’re constantly trying to improve our documentation and support developers using our AI so please reach out with any feedback!