This AI knowledge base UI for Figma gives you a file upload page and a small chat that answers with sources taken from the files. This is the light version, with a soft grey page and white cards.

What is included

• Four stat cards for files, pages read, storage and last update
• A dashed drop zone with accepted file types
• A file list with Ready, Uploading, Indexing and Failed states, a progress bar and a Retry button
• An Ask your files chat with a question and an answer
• Source cards with the file name, page and a highlighted passage

Where to use it

Use it for document chat tools, help centers, internal search and any product that answers from a user's files.

Design notes

The failed row says what went wrong and offers Retry. Each source card shows the exact passage in an amber highlight, so readers can check the answer. The light theme uses a #F4F5F9 background, white cards, #12141C text and an indigo #5B5BF0 accent.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. The file uses Plus Jakarta Sans, both free on Google Fonts, and every color is a fill you can change in the fill panel. Text pairs stay above 4.5 to 1 contrast.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. Install the free Google Fonts first so the text looks the same. All names and numbers in the file are sample content.