@capitol.ai/ui-components NPM

Capitol AI - Summary

Local setup

First, install the package:

npm install @capitol.ai/summary

Then, import components you need and default styles (optional):

import { Summary } from '@capitol.ai/summary';
import '@capitol.ai/summary/dist/summary.css';

Components

Summary

The main component that displays AI-generated summaries in different layouts.

Prop	Type	Default	Description
summaryId	string	""	Unique identifier for the summary
prompt	string	"prompt"	The prompt text that generated the summary
title	string	"AI summary"	Title of the summary
className	string	""	Additional CSS classes
summary	string	""	The summary content
layout	"quoted" \| "clean"	"quoted"	Layout type for the summary. "quoted" shows prompt in quotes with decorative elements, "clean" provides a minimal design
format	"basic" \| "advanced"	"basic"	Format type for the summary
output	SummaryOutput	undefined	Additional output data for advanced format
useMarkdown	boolean	false	Whether to render the summary content as markdown. When true, the content will be rendered using ReactMarkdown with proper styling

Prompt

A component for user input with customizable styling.

Prop	Type	Default	Description
placeholderText	string	"Enter prompt"	Placeholder text for the input
minHeight	number	undefined	Minimum height of the input area
accentColor	string	undefined	Accent color for the submit button
onSubmit	(prompt: string) => void	() => {}	Callback when prompt is submitted
onChange	(text: string) => void	() => {}	Callback when prompt text changes
disabled	boolean	false	Whether the input is disabled

PromptSuggestions

Displays a list of prompt suggestions that users can click on.

Prop	Type	Default	Description
prompts	string[]	[]	Array of prompt suggestions
onClickHandler	(prompt: string) => void	() => {}	Callback when a suggestion is clicked
title	string	"Suggestions"	Title of the suggestions section

PromptWithOptions

Combines the Prompt component with suggestion options.

Prop	Type	Default	Description
placeholder	string	"Ask a question"	Placeholder text for the input
prompts	string[]	[]	Array of prompt suggestions
onSubmit	(prompt: string) => void	undefined	Callback when prompt is submitted
onChange	(text: string) => void	undefined	Callback when prompt text changes

Sources

Displays a list of sources with optional masonry layout and pagination.

Prop	Type	Default	Description
sources	Source[]	[]	Array of source objects
isMasonryLayout	boolean	false	Whether to use masonry layout
itemsPerPage	number	4	Number of items to display per page

Pagination

A reusable pagination component for navigating through pages of content. Mainly used as pagination for Sources

Prop	Type	Default	Description
currentPage	number	1	Current page number
totalPages	number	1	Total number of pages
onPageChange	(page: number) => void	() => {}	Callback when page changes
maxVisiblePages	number	5	Maximum number of visible page buttons

Navigation

Displays a navigation menu with active state tracking.

Prop	Type	Default	Description
title	string	"Navigation"	Title of the navigation section
navList	NavItem[]	[]	Array of navigation items
activeItem	string	""	Currently active navigation item

GenerationLog

Displays a list of generation steps with loading animations.

Prop	Type	Default	Description
title	string	"Generating..."	Title of the generation log
logs	string[]	[]	Array of log messages

Types

SummaryOutput

Property	Type	Description
header	string	Header text for the summary
body	string	Main body content of the summary
image	string	Optional image URL for the summary

Source

Property	Type	Description
url	string	URL of the source
title	string	Title of the source
image	string	Image URL for the source

NavItem

Property	Type	Description
ref	string	Reference ID for the navigation item
name	string	Display name of the navigation item

Example Usage

import { Summary, PromptWithOptions, Sources, Navigation, GenerationLog } from '@capitol.ai/summary';
import '@capitol.ai/summary/dist/summary.css';

const MyApp = () => {
  return (
    <div>
      <PromptWithOptions
        placeholder="Ask a question"
        prompts={["What is AI?", "How does it work?"]}
        onSubmit={(prompt) => console.log(prompt)}
      />
      <GenerationLog
        title="Generating Summary"
        logs={["Analyzing sources", "Generating content"]}
      />
      <Summary
        title="AI Summary"
        prompt="What is artificial intelligence?"
        summary="Artificial intelligence is..."
        layout="metric-media"
      />
      <Sources
        sources={[
          {
            url: "https://example.com",
            title: "Example Source",
            image: "https://example.com/image.jpg"
          }
        ]}
      />
      <Navigation
        title="Table of Contents"
        navList={[
          { ref: "section1", name: "Introduction" },
          { ref: "section2", name: "Main Content" }
        ]}
        activeItem="section1"
      />
    </div>
  );
}

Building new package

It's always a better idea to test before publish (e.g. using App.jsx).

Once you absolutely happy with what you've done:

npm run build
npm version patch
npm publish

react components tailwind library capitolai deep search ai tools

@faker-js/faker lottie-web markdown-to-jsx react-router-dom

0.0.1

6 months ago