Capitol AI Vue Components

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

Installation

npm install @capitol.ai/vue

Usage

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

<template>
  <CapitolAiWrapper>
    <CreateStory v-if="!storyId" @submit="handleOnSubmit" />
    <EditorStory v-else :story-id="storyId" />
  </CapitolAiWrapper>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CapitolAiWrapper, CreateStory, EditorStory } from '@capitol.ai/vue';

const storyId = ref<string | null>(null);

// Update storyId when a new story is created
function handleOnSubmit(id: string) {
  storyId.value = id;
}
</script>

Available Components

CapitolAiWrapper

Provides context and configuration for Capitol.ai components.

Props:

• default: Slot for child components to be wrapped.

CreateStory

The CreateStory component 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 | Slot | - | No | Custom component for page title | | pageFooterBlock | Slot | - | No | Custom component for page footer | | placeholderPrompt | string | 'Describe what you want to create' | No | Placeholder for prompt input | | promptFooter | Slot | - | No | Footer of the prompt section | | callbackOnSubmit | function | - | No | Callback when story is submitted (alternative to @submit event) | | callbackOnError | function | - | No | Callback when error occurs (alternative to @error event) | | submitPromptButton | Slot | - | No | Custom submit button component | | sidebarHeaderContent | Slot | - | No | Custom sidebar header | | sidebarFooterContent | Slot | - | No | Custom sidebar footer | | guardrailsCustomMessage | Slot | - | No | Custom message for guardrail violations | | guardrailsCustomComponent | Slot | - | No | Custom component for guardrail violations. Slot props: { violations: array, confirmOverride: function } | | promptContent | Slot | - | No | Custom prompt area | | sidebarSettings | object | {…} | No | See below for details |

• submit: Emitted when a story is submitted. Payload: { storyId, promptInfo }
• error: Emitted when an error occurs. Payload: error

sidebarSettings Configuration

The sidebarSettings prop is an object that configures which blocks and features are enabled in the configuration sidebar of the CreateStory component. It allows fine-grained control over the sidebar's content and behavior.

| 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

<template>
  <CreateStory
    :enable-projects="true"
    :enable-prompts="true"
    :enable-sources="true"
    page-title="Create Your Story"
    placeholder-prompt="Describe what you want to create"
    @submit="onStorySubmit"
    @error="onError"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const storyId = ref<string | null>(null);

// Called when a story is successfully created
function onStorySubmit(id: string) {
  storyId.value = id;
}

// Called when an error occurs during story creation
function onError() {
  alert('Handle error');
}
</script>

EditorStory

The EditorStory component is a comprehensive 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 | false | No | Enables history tracking | | enableExportToGoogle | boolean | false | No | Google export functionality | | enableDownload | boolean | false | No | Story download option | | enabledShare | boolean | false | No | Share feature | | enableHeaderMenu | boolean | - | No | Header menu | | enabledConfigSidebar | boolean | true | No | Config sidebar | | headerContent | Slot | - | No | Custom header | | storyFooter | Slot | - | No | Footer content | | citationsDisclaimer | Slot | - | 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 | array | - | 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 | function | (promptInfo: object) => void | No | Callback on remix submit | | historyCallbackOnSubmit | function | (params: object) => void | No | Callback on history action | | callBackSideMenu | function | (props: object) => void | No | Side menu interactions | | getStoryHeadline | function | (storyHeadline: string) => void | No | Retrieve story headline | | callbackOnError | function | (error: string) => void | No | Error callback | | callbackOnStoryGenerationError | function | () => void | Yes | Callback on story generation error | | sidebarHeaderContent | Slot | - | No | Sidebar header content. Slot props: { ...ConfigSideBarContentProps } | | sidebarFooterContent | Slot | - | No | Sidebar footer content. Slot props: { ...ConfigSideBarContentProps } | | remixHistoryLeftContent | Slot | - | No | Remix history left section. Slot props: { author?: object } | | storyErrorModal | Slot | - | No | Custom error modal. Slot props: { ...StoryErrorModalProps } | | guardrailsCustomMessage | Slot | - | No | Custom message for guardrails. Slot props: { violations: array } | | guardrailsCustomComponent | Slot | - | No | Custom component for guardrails. Slot props: { violations: array, confirmOverride: function } |

Events

• story-generation-error: Emitted when story generation fails.

Example Usage

<template>
  <EditorStory
    story-id="unique-story-id"
    pipelineId="unique-pipeline-id"
    :enable-projects="true"
    :enable-doc-remix="true"
    :enabled-share="true"
    :enabled-feedback="true"
    @story-generation-error="onStoryGenError"
  />
</template>

<script setup lang="ts">
function onStoryGenError() {
  // handle error
}
</script>

Proxy Configuration

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

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

export default defineConfig({
  plugins: [vue()],
  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)

You can customize the appearance of the Capitol.ai Vue components by adding CSS variables to your project's styles.

: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 override, add these variables to your main CSS file (e.g., App.css or main.css):

: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 Vue 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 Vue 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.