Capitol AI React Components

This library provides a set of reusable React components and utilities for building AI-powered applications using the Capitol.ai platform.

Installation

npm install @capitol.ai/react

Usage

Import and use components from the library in your React application:

import { useState } from 'react';
import { CapitolAiWrapper, CreateStory, EditorStory } from '@capitol.ai/react';

const App = () => {
  const [currentStoryId, setCurrentStoryId] = useState<string | undefined>(undefined);

  // If your callback receives an object with a storyId property:
  const handleCallback = ({ storyId }: { storyId: string }) => setCurrentStoryId(storyId);

  return (
    <CapitolAiWrapper>
      {!currentStoryId ? (
        <CreateStory callbackOnSubmit={handleCallback} />
      ) : (
        <EditorStory storyId={currentStoryId} />
      )}
    </CapitolAiWrapper>
  );
};

export default App;

Available Components

CapitolAiWrapper

Provides context and configuration for Capitol.ai components.

Props:

• children: React.ReactNode - The child components to be wrapped.

CreateStory

The CreateStory component is a React component that provides a user interface for creating new stories in the CapitolAI application. It includes features for prompt input, source management, and story configuration.

Features

• Prompt-based story creation
• Source management and integration
• Customizable sidebar configuration
• Project management capabilities
• Guardrails for content validation
• Custom UI components support
• Mobile-responsive design

Props

| Property | Type | Default | Required | Description | | --------------------------- | ------------------------------------------------------------------------------- | ------------------------------------ | -------- | --------------------------------------------------------------------------------------------- | | enableProjects | boolean | false | No | Shows user's created projects or an option to create a new project under the prompt component | | enablePrompts | boolean | true | No | Whether to show prompt suggestions | | enableSources | boolean | true | No | Enables source inputs, allowing user-uploaded sources (PDFs or images) | | enabledConfigSidebar | boolean | true | No | Show document configuration sidebar on desktop, and bottom container on mobile | | pageTitle | string | 'Create Powerful Content' | No | Title displayed at the top of the component | | pageTitleBlock | React.ReactNode | - | No | Custom component for page title | | pageFooterBlock | ReactNode | - | No | Custom component for page footer | | placeholderPrompt | string | 'Describe what you want to create' | No | Placeholder for prompt input | | promptFooter | React.ReactNode | - | No | Footer of the prompt section | | callbackOnSubmit | (props: CallbackOnSubmitProps) => void | null | Yes | Callback when story is submitted | | callbackOnError | (error: string) => void | - | No | Callback when error occurs | | submitPromptButton | (buttonProps: SubmitButtonProps) => React.ReactNode | - | No | Custom submit button component | | sidebarHeaderContent | (props: ConfigSideBarContentProps) => React.ReactNode | - | No | Custom sidebar header | | sidebarFooterContent | (props: ConfigSideBarContentProps) => React.ReactNode | - | No | Custom sidebar footer | | guardrailsCustomMessage | (violations: Violation[]) => React.ReactNode | - | No | Custom message for guardrail violations | | guardrailsCustomComponent | (violations: Violation[], confirmOverride: () => Promise<void>) => React.ReactNode | - | No | Custom component for guardrail violations | | promptContent | (props: {setPrependUserPrompt: (prompt: string) => void;}) => React.ReactNode | - | No | Custom prompt area | | sidebarSettings | object | {…} | No | See below for details |

sidebarSettings Configuration

| Property | Type | Default | Description | | ------------------------- | ------- | ------- | --------------------------------- | | enabledLayoutBlock | boolean | true | Show layout settings | | enabledTextBlock | boolean | true | Show text block | | enabledDataSourcesBlock | boolean | true | Show data source settings | | enabledImageBlock | boolean | true | Show image settings | | enabledChartBlock | boolean | true | Show chart block | | enabledQuoteBlock | boolean | true | Show quote block | | enabledMetricBlock | boolean | true | Show metric block | | enabledTableBlock | boolean | true | Show table data block | | enabledTweetBlock | boolean | true | Show tweet block | | useMinutesOfReading | boolean | false | Enable minutes of reading feature | | showFormatList | boolean | true | Show format list |

Example Usage

Here is an example of how to use the CreateStory component in your React application:

import { useNavigate } from "react-router-dom";
import { CreateStory } from "@capitol.ai/react";

const MyStoryCreator = () => {
  const navigate = useNavigate();
  const handleCallback = (storyId: string) => {
    navigate(`/story/${storyId}`);
  };

  return (
    <CreateStory
      callbackOnSubmit={handleCallback}
      enableProjects={true}
      enablePrompts={true}
      enableSources={true}
      pageTitle='Create Your Story'
      placeholderPrompt='Describe what you want to create'
    />
  );
};

export default MyStoryCreator;

Explanation

• The MyStoryCreator component demonstrates how to implement the CreateStory component.
• It includes a callback function to handle the submission of a new story, along with customizable props for prompts, sidebar settings, and UI elements.

EditorStory

The EditorStory component is a comprehensive React component serving as the main editor interface for story creation and editing in the CapitolAI application.

Features

• Rich text editing capabilities
• Mobile-responsive with swipable container
• Sidebar configuration for content blocks
• Support for citations and AI-generated content
• Project management, export, sharing, and feedback systems
• Guardrails for content validation

Props

| Property | Type | Default | Required | Description | | -------------------------------- | ------------------------------------------------------- | ------- | -------- | ----------------------------------------------- | | storyId | string | - | Yes | Unique ID of the story | | pipelineId | string | - | No | Unique ID of the pipeline. Note: if pipelineId is provided, the config for the pipeline will overwrite the config provided by formatCustomConfigs | | enableProjects | boolean | false | No | Enables project management | | sidebarSettings | object | {…} | No | Sidebar feature configuration. See more | | formatCustomConfigs | object | - | No | Custom formatting options | | enableDocRemix | boolean | true | No | Enables document remixing | | enableHistory | boolean | No | No | Enables history tracking | | enableExportToGoogle | boolean | No | No | Google export functionality | | enableDownload | boolean | No | No | Story download option | | enabledShare | boolean | No | No | Share feature | | enableHeaderMenu | boolean | - | No | Header menu | | enabledConfigSidebar | boolean | true | No | Config sidebar | | headerContent | React.ReactNode | - | No | Custom header | | storyFooter | React.ReactNode | - | No | Footer content | | citationsDisclaimer | React.ReactNode | - | No | Citations disclaimer | | aiGenerated | boolean | false | No | AI-generated indicator | | aiGeneratedText | string | - | No | AI-generated content | | sourceIds | string[] | - | No | Array of source IDs | | preProcessedSources | string[] | - | No | Pre-processed sources | | tags | Tag[] | - | No | Story tags | | enabledFeedback | boolean | true | No | Feedback system | | enabledStoryHeader | boolean | true | No | Story header | | enableStoryTitle | boolean | - | No | Story title | | enabledTurnIntoSelector | boolean | true | No | Content type selector | | enableUnusedSourcesModal | boolean | true | No | Modal for unused sources | | remixCallbackOnSubmit | (promptInfo: PromptInfo) => void | - | No | Callback on remix submit | | historyCallbackOnSubmit | (params: HistoryCallbackInfo) => void | - | No | Callback on history action | | callBackSideMenu | (props: CallBackSideMenuProps) => void | - | No | Side menu interactions | | getStoryHeadline | (storyHeadline: string) => void | - | No | Retrieve story headline | | callbackOnError | (error: string) => void | - | No | Error callback | | callbackOnStoryGenerationError | () => void | - | Yes | Callback on story generation error | | sidebarHeaderContent | (props: ConfigSideBarContentProps) => React.ReactNode | - | No | Sidebar header content | | sidebarFooterContent | (props: ConfigSideBarContentProps) => React.ReactNode | - | No | Sidebar footer content | | remixHistoryLeftContent | (author?: Author) => React.ReactNode | - | No | Remix history left section | | storyErrorModal | (props: StoryErrorModalProps) => React.ReactNode | - | No | Custom error modal | | guardrailsCustomMessage | (violations: Violation[]) => React.ReactNode | - | No | Custom message for guardrails | | guardrailsCustomComponent | (violations: Violation[], confirmOverride: () => Promise<void>) => React.ReactNode | - | No | Custom component for guardrails |

Example Usage

Here is an example of how to use the EditorStory component in your React application:

import { EditorStory } from "@capitol.ai/react";

const MyStoryEditor = () => {
  return (
    <EditorStory
      storyId="unique-story-id"
      pipelineId="unique-pipeline-id"
      enableProjects={true}
      enableDocRemix={true}
      enabledShare={true}
      enabledFeedback={true}
    />
  );
};

export default MyStoryEditor;

Explanation

• The Editor component demonstrates how to implement the EditorStory component.
• It retrieves the storyId from the URL parameters and passes it to the EditorStory along with customizable props for sidebar settings and functionality options.

Proxy Configuration

To handle Capitol.ai API requests, you need to configure a proxy in your React project. If you're using Vite, add the following to your vite.config.ts:

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '^/proxy/capitolai/api/v(\\d+)': {
        target: 'http://localhost:8000/api',
        changeOrigin: true,
        rewrite: (path: string) =>
          path.replace(/^\/proxy\/capitolai\/api\/v(\d+)/, '/v$1'),
      },
    },
  },
});

Styles Customization (Optional)

If you want to customize the appearance of the Capitol.ai React components, you can add CSS variables to your project's styles. Here are the available variables and their default values:

:root {
  --capitol-accent-color: #1d76f3;
  --capitol-font-family: 'Akkurat Pro';
  --capitol-border-radius: 8px;
  --capitol-prompt-background-color: #ffffff;
  --capitol-sidebar-background-color: #ffffff;
  --capitol-story-background-color: #ffffff;
}

To apply custom styles, add these variables to your project's CSS file (e.g., App.css or index.css) and modify the values as needed:

:root {
  --capitol-accent-color: #00a86b;
  --capitol-font-family: 'Roboto', sans-serif;
  /* Add other variables you want to customize */
}

This example changes the accent color to green and the font to Roboto. You can adjust any of the variables to match your application's design.

Note: Customization is entirely optional. The components will use their default styles if you don't specify these variables.

ClassNames for Customization (Optional)

Capitol.ai React components provide several predefined class names that you can use to customize their styles. Below is a list of available class names along with a brief description of their purpose:

• capitol-config-sidebar: The main container for the configuration sidebar.
• capitol-config-sidebar__scrollable: A scrollable area within the configuration sidebar.
• capitol-config-sidebar__divider: A divider element within the configuration sidebar.
• capitol-config-sidebar__format-list: The list of formats available in the configuration sidebar.
• capitol-config-sidebar__footer: The footer area of the configuration sidebar.
• capitol-config-sidebar__item: An individual item within the configuration sidebar.
• capitol-config-sidebar__header: The header area of the configuration sidebar.
• capitol-prompt-container: The container for the prompt input area.
• capitol-suggestions: The container for suggestion elements.
• capitol-suggestions__title: The title element for the suggestions block.
• capitol-suggestions__options: The container for individual suggestion options.
• capitol-suggestion: The container element for an individual suggestion.
• capitol-suggestion__title: The title element for the suggestion.
• capitol-suggestion__icon: The icon associated with each suggestion.

Example of Customizing Styles

You can target these class names in your CSS to apply custom styles. For example:

.capitol-config-sidebar {
  background-color: #f8f9fa;
}

.capitol-suggestions__title {
  font-weight: bold;
  color: #1d76f3;
}

.capitol-config-sidebar__footer {
  padding: 10px;
  text-align: center;
}

Feel free to modify these styles to match your application's design!

Proprietary License

Copyright (c) 2024-2025 Capitol AI. All rights reserved.

1. Definitions: “Software” refers to the Capitol AI React Components, including all source code, object code, documentation, and related materials provided by Capitol AI.

2. License Grant: Subject to the terms of this agreement, Capitol AI grants you a non-exclusive, non-transferable, limited license to use the Software solely for your internal, non-commercial purposes.

3. Restrictions: You may not: a) Modify, adapt, alter, translate, or create derivative works of the Software b) Reverse engineer, decompile, disassemble, or otherwise attempt to derive the source code of the Software c) Redistribute, sublicense, rent, lease, or sell the Software d) Remove or alter any proprietary notices or labels on the Software e) Use the Software for any commercial purpose without explicit written consent from Capitol AI

4. Commercial Use: Any use of the Software for commercial purposes, including but not limited to selling products or services that utilize the Software, is strictly prohibited without explicit written consent from Capitol AI. To obtain consent for commercial use, please contact Capitol AI directly.

5. Ownership: Capitol AI retains all right, title, and interest in and to the Software, including all intellectual property rights therein.

6. Termination: This license is effective until terminated. Capitol AI may terminate this license at any time if you fail to comply with any term of this agreement.

7. Disclaimer of Warranty: THE SOFTWARE IS PROVIDED “AS IS” WITHOUT WARRANTY OF ANY KIND. CAPITOL AI DISCLAIMS ALL WARRANTIES, WHETHER EXPRESS, IMPLIED, OR STATUTORY.

8. Limitation of Liability: IN NO EVENT SHALL CAPITOL AI BE LIABLE FOR ANY SPECIAL, INCIDENTAL, INDIRECT, OR CONSEQUENTIAL DAMAGES WHATSOEVER ARISING OUT OF THE USE OF OR INABILITY TO USE THE SOFTWARE.

9. Governing Law: This agreement shall be governed by and construed in accordance with the laws of Delaware without regard to its conflict of law provisions.

By using the Software, you acknowledge that you have read this agreement, understand it, and agree to be bound by its terms and conditions.