JSPM

@promptbook/components

0.105.0-15
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1001
  • Score
    100M100P100Q100535F
  • License BUSL-1.1

Promptbook: Turn your company's scattered knowledge into AI ready books

Package Exports

  • @promptbook/components
  • @promptbook/components/esm/index.es.js
  • @promptbook/components/umd/index.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@promptbook/components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

✨ Promptbook: AI Agents

Turn your company's scattered knowledge into AI ready Books

[NPM Version of ![Promptbook logo](./design/logo-h1.png) Promptbook](https://www.npmjs.com/package/promptbook) [Quality of package ![Promptbook logo](./design/logo-h1.png) Promptbook](https://packagequality.com/#?package=promptbook) Known Vulnerabilities 🧪 Test Books 🧪 Test build 🧪 Lint 🧪 Spell check 🧪 Test types Issues

🌟 New Features

  • Gemini 3 Support
⚠ Warning: This is a pre-release version of the library. It is not yet ready for production use. Please look at latest stable release.

📦 Package @promptbook/components

To install this package, run:

# Install entire promptbook ecosystem
npm i ptbk

# Install just this package to save space
npm install @promptbook/components

Reusable React components for the Promptbook ecosystem, providing a comprehensive set of UI components for building promptbook-powered applications.

🎯 Purpose and Motivation

The components package provides ready-to-use React components that integrate seamlessly with the Promptbook ecosystem. It eliminates the need to build UI components from scratch when creating promptbook-powered applications, offering everything from book editors to chat interfaces and avatar components.

🔧 High-Level Functionality

This package provides a complete set of React components for promptbook applications:

  • Book Editor: Styled editor with syntax highlighting for promptbook commitment types
  • Chat Components: Full-featured chat interfaces for LLM interactions
  • Avatar Components: Profile and chip components for user representation
  • Icon Library: Consistent iconography for promptbook applications
  • Markdown Rendering: Utilities for rendering markdown content in chat contexts

✨ Key Features

  • 🎨 Styled Components - Pre-styled components that work out of the box
  • 💬 Chat Interface - Complete chat UI with LLM integration support
  • ✏️ Book Editor - Syntax-highlighted editor for promptbook files
  • 👤 Avatar System - Flexible avatar components with profile support
  • 🎯 TypeScript Support - Full TypeScript definitions for all components
  • 📱 Responsive Design - Components work across different screen sizes
  • 🔧 Customizable - Easy to customize with CSS classes and props
  • ⚡ Performance Optimized - Efficient rendering and minimal bundle size

Example Usage

Next.js (App Router)

'use client';

import { BookEditor } from '@promptbook/components';

export default function Page() {
    return (
        <div className="p-6">
            <BookEditor className="max-w-3xl mx-auto" />
        </div>
    );
}

Note: The component contains a top-level "use client" directive so it can be imported directly in client components.

Create React App / Vite / Other React apps

import { BookEditor } from '@promptbook/components';

function App() {
    return (
        <div style={{ padding: 24 }}>
            <BookEditor />
        </div>
    );
}

export default App;

Component API

import type { BookEditorProps } from '@promptbook/components';

interface BookEditorProps {
    // Additional CSS classes for wrapper
    className?: string;

    // Optional font className (e.g. from next/font)
    fontClassName?: string;

    // Controlled value of the book text
    value?: string;

    // Controlled change handler
    onChange?: (value: string) => void;

    // Explicit list of commitment keywords to highlight (case-insensitive).
    // If omitted, a default set (PERSONA, KNOWLEDGE, MEMORY, STYLE, RULE, RULES, SAMPLE, EXAMPLE, FORMAT, MODEL, ACTION, META IMAGE, META LINK, NOTE, GOAL, MESSAGE, SCENARIO, DELETE, CANCEL, DISCARD, REMOVE, EXPECT, SCENARIOS, BEHAVIOUR, BEHAVIOURS, AVOID, AVOIDANCE, GOALS, CONTEXT) is used.
    commitmentTypes?: string[];
}

Styling

The component comes with built-in styles. You can pass your own className and fontClassName to customize its look or integrate with your design system.

Compatibility

  • Frameworks: Next.js, CRA, Vite, Remix, and other React apps
  • Rendering: Client-side
  • Bundles: ESM and UMD

📦 Exported Entities

Version Information

  • BOOK_LANGUAGE_VERSION - Current book language version
  • PROMPTBOOK_ENGINE_VERSION - Current engine version

Avatar Components

  • AvatarChip - Compact avatar display component
  • AvatarChipProps - Props interface for AvatarChip (type)
  • AvatarChipFromSource - Avatar chip with source-based loading
  • AvatarChipFromSourceProps - Props interface for AvatarChipFromSource (type)
  • AvatarProfile - Full avatar profile component
  • AvatarProfileProps - Props interface for AvatarProfile (type)
  • AvatarProfileFromSource - Avatar profile with source-based loading
  • AvatarProfileFromSourceProps - Props interface for AvatarProfileFromSource (type)

Book Editor Components

  • BookEditor - Main book editor component with syntax highlighting
  • BookEditorProps - Props interface for BookEditor (type)

Chat Components

  • Chat - Basic chat interface component
  • ChatProps - Props interface for Chat component (type)
  • LlmChat - Enhanced chat component with LLM integration
  • LlmChatProps - Props interface for LlmChat component (type)

Chat Types and Utilities

  • ChatMessage - Type definition for chat messages (type)
  • ChatParticipant - Type definition for chat participants (type)
  • renderMarkdown - Utility function for rendering markdown content
  • isMarkdownContent - Utility to check if content is markdown

Icon Components

  • ArrowIcon - Arrow icon component
  • ResetIcon - Reset/refresh icon component
  • SendIcon - Send message icon component
  • TemplateIcon - Template/document icon component

💡 This package provides React components for promptbook applications. For the core functionality, see @promptbook/core or install all packages with npm i ptbk

Rest of the documentation is common for entire promptbook ecosystem:

📖 The Book Whitepaper

Nowadays, the biggest challenge for most business applications isn't the raw capabilities of AI models. Large language models such as GPT-5.2 and Claude-4.5 are incredibly capable.

The main challenge lies in managing the context, providing rules and knowledge, and narrowing the personality.

In Promptbook, you can define your context using simple Books that are very explicit, easy to understand and write, reliable, and highly portable.

Paul Smith

PERSONA You are a company lawyer.
Your job is to provide legal advice and support to the company and its employees.
RULE You are knowledgeable, professional, and detail-oriented.
TEAM You are part of the legal team of Paul Smith & Associés, you discuss with {Emily White}, the head of the compliance department. {George Brown} is expert in corporate law and {Sophia Black} is expert in labor law.

Aspects of great AI agent

We have created a language called Book, which allows you to write AI agents in their native language and create your own AI persona. Book provides a guide to define all the traits and commitments.

You can look at it as "prompting" (or writing a system message), but decorated by commitments.

Commitments are special syntax elements that define contracts between you and the AI agent. They are transformed by Promptbook Engine into low-level parameters like which model to use, its temperature, system message, RAG index, MCP servers, and many other parameters. For some commitments (for example RULE commitment) Promptbook Engine can even create adversary agents and extra checks to enforce the rules.

Persona commitment

Personas define the character of your AI persona, its role, and how it should interact with users. It sets the tone and style of communication.

Paul Smith & Associés

PERSONA You are a company lawyer.

Knowledge commitment

Knowledge Commitment allows you to provide specific information, facts, or context that the AI should be aware of when responding.

This can include domain-specific knowledge, company policies, or any other relevant information.

Promptbook Engine will automatically enforce this knowledge during interactions. When the knowledge is short enough, it will be included in the prompt. When it is too long, it will be stored in vector databases and RAG retrieved when needed. But you don't need to care about it.

Paul Smith & Associés

PERSONA You are a company lawyer.
Your job is to provide legal advice and support to the company and its employees.
You are knowledgeable, professional, and detail-oriented.

KNOWLEDGE https://company.com/company-policies.pdf
KNOWLEDGE https://company.com/internal-documents/employee-handbook.docx

Rule commitment

Rules will enforce specific behaviors or constraints on the AI's responses. This can include ethical guidelines, communication styles, or any other rules you want the AI to follow.

Depending on rule strictness, Promptbook will either propagate it to the prompt or use other techniques, like adversary agent, to enforce it.

Paul Smith & Associés

PERSONA You are a company lawyer.
Your job is to provide legal advice and support to the company and its employees.
You are knowledgeable, professional, and detail-oriented.

RULE Always ensure compliance with laws and regulations.
RULE Never provide legal advice outside your area of expertise.
RULE Never provide legal advice about criminal law.
KNOWLEDGE https://company.com/company-policies.pdf
KNOWLEDGE https://company.com/internal-documents/employee-handbook.docx

Team commitment

Team commitment allows you to define the team structure and advisory fellow members the AI can consult with. This allows the AI to simulate collaboration and consultation with other experts, enhancing the quality of its responses.

Paul Smith & Associés

PERSONA You are a company lawyer.
Your job is to provide legal advice and support to the company and its employees.
You are knowledgeable, professional, and detail-oriented.

RULE Always ensure compliance with laws and regulations.
RULE Never provide legal advice outside your area of expertise.
RULE Never provide legal advice about criminal law.
KNOWLEDGE https://company.com/company-policies.pdf
KNOWLEDGE https://company.com/internal-documents/employee-handbook.docx
TEAM You are part of the legal team of Paul Smith & Associés, you discuss with {Emily White}, the head of the compliance department. {George Brown} is expert in corporate law and {Sophia Black} is expert in labor law.

Promptbook Ecosystem

!!!@@@

Promptbook Server

!!!@@@

Promptbook Engine

!!!@@@

💜 The Promptbook Project

Promptbook project is ecosystem of multiple projects and tools, following is a list of most important pieces of the project:

Project About
Agents Server Place where you "AI agents live". It allows to create, manage, deploy, and interact with AI agents created in Book language.
Book language Human-friendly, high-level language that abstracts away low-level details of AI. It allows to focus on personality, behavior, knowledge, and rules of AI agents rather than on models, parameters, and prompt engineering.
There is also a plugin for VSCode to support .book file extension
Promptbook Engine Promptbook engine can run AI agents based on Book language. It is released as multiple NPM packages and Promptbook Agent Server as Docker Package Agent Server is based on Promptbook Engine.

🌐 Community & Social Media

Join our growing community of developers and users:

Platform Description
💬 Discord Join our active developer community for discussions and support
🗣️ GitHub Discussions Technical discussions, feature requests, and community Q&A
👔 LinkedIn Professional updates and industry insights
📱 Facebook General announcements and community engagement
🔗 ptbk.io Official landing page with project information

🖼️ Product & Brand Channels

Promptbook.studio

📸 Instagram @promptbook.studio Visual updates, UI showcases, and design inspiration

📚 Documentation

See detailed guides and API reference in the docs or online.

🔒 Security

For information on reporting security vulnerabilities, see our Security Policy.

📦 Packages (for developers)

This library is divided into several packages, all are published from single monorepo. You can install all of them at once:

npm i ptbk

Or you can install them separately:

⭐ Marked packages are worth to try first

📚 Dictionary

The following glossary is used to clarify certain concepts:

General LLM / AI terms

  • Prompt drift is a phenomenon where the AI model starts to generate outputs that are not aligned with the original prompt. This can happen due to the model's training data, the prompt's wording, or the model's architecture.
  • Pipeline, workflow scenario or chain is a sequence of tasks that are executed in a specific order. In the context of AI, a pipeline can refer to a sequence of AI models that are used to process data.
  • Fine-tuning is a process where a pre-trained AI model is further trained on a specific dataset to improve its performance on a specific task.
  • Zero-shot learning is a machine learning paradigm where a model is trained to perform a task without any labeled examples. Instead, the model is provided with a description of the task and is expected to generate the correct output.
  • Few-shot learning is a machine learning paradigm where a model is trained to perform a task with only a few labeled examples. This is in contrast to traditional machine learning, where models are trained on large datasets.
  • Meta-learning is a machine learning paradigm where a model is trained on a variety of tasks and is able to learn new tasks with minimal additional training. This is achieved by learning a set of meta-parameters that can be quickly adapted to new tasks.
  • Retrieval-augmented generation is a machine learning paradigm where a model generates text by retrieving relevant information from a large database of text. This approach combines the benefits of generative models and retrieval models.
  • Longtail refers to non-common or rare events, items, or entities that are not well-represented in the training data of machine learning models. Longtail items are often challenging for models to predict accurately.

Note: This section is not a complete dictionary, more list of general AI / LLM terms that has connection with Promptbook

💯 Core concepts

Advanced concepts

Data & Knowledge Management Pipeline Control
Language & Output Control Advanced Generation

🔍 View more concepts

🚂 Promptbook Engine

Schema of Promptbook Engine

➕➖ When to use Promptbook?

➕ When to use

  • When you are writing app that generates complex things via LLM - like websites, articles, presentations, code, stories, songs,...
  • When you want to separate code from text prompts
  • When you want to describe complex prompt pipelines and don't want to do it in the code
  • When you want to orchestrate multiple prompts together
  • When you want to reuse parts of prompts in multiple places
  • When you want to version your prompts and test multiple versions
  • When you want to log the execution of prompts and backtrace the issues

See more

➖ When not to use

  • When you have already implemented single simple prompt and it works fine for your job
  • When OpenAI Assistant (GPTs) is enough for you
  • When you need streaming (this may be implemented in the future, see discussion).
  • When you need to use something other than JavaScript or TypeScript (other languages are on the way, see the discussion)
  • When your main focus is on something other than text - like images, audio, video, spreadsheets (other media types may be added in the future, see discussion)
  • When you need to use recursion (see the discussion)

See more

🐜 Known issues

🧼 Intentionally not implemented features

❔ FAQ

If you have a question start a discussion, open an issue or write me an email.

📅 Changelog

See CHANGELOG.md

📜 License

This project is licensed under BUSL 1.1.

🤝 Contributing

We welcome contributions! See CONTRIBUTING.md for guidelines.

You can also ⭐ star the project, follow us on GitHub or various other social networks.We are open to pull requests, feedback, and suggestions.

🆘 Support & Community

Need help with Book language? We're here for you!

We welcome contributions and feedback to make Book language better for everyone!