Socket
Book a DemoInstallSign in
Socket

@promptbook/components

Package Overview
Dependencies
Maintainers
1
Versions
102
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@promptbook/components

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

latest
Source
npmnpm
Version
0.103.0-37
Version published
Maintainers
1
Created
Source

✨ Promptbook: AI Agents

Turn your company's scattered knowledge into AI ready Books

NPM Version of Promptbook logo - cube with letters P and B Promptbook Quality of package Promptbook logo - cube with letters P and B Promptbook Known Vulnerabilities 🧪 Test Books 🧪 Test build 🧪 Lint 🧪 Spell check 🧪 Test types Issues

🌟 New Features

  • 🚀 GPT-5 Support - Now includes OpenAI's most advanced language model with unprecedented reasoning capabilities and 200K context window
  • 💡 VS Code support for .book files with syntax highlighting and IntelliSense
  • 🐳 Official Docker image (hejny/promptbook) for seamless containerized usage
  • 🔥 Native support for OpenAI o3-mini, GPT-4 and other leading LLMs
  • 🔍 DeepSeek integration for advanced knowledge search
⚠ 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

For most business applications nowadays, the biggest challenge isn't about the raw capabilities of AI models. Large language models like GPT-5 or Claude-4.1 are extremely capable.

The main challenge is to narrow it down, constrain it, set the proper context, rules, knowledge, and personality. There are a lot of tools which can do exactly this. On one side, there are no-code platforms which can launch your agent in seconds. On the other side, there are heavy frameworks like Langchain or Semantic Kernel, which can give you deep control.

Promptbook takes the best from both worlds. You are defining your AI behavior by simple books, which are very explicit. They are automatically enforced, but they are very easy to understand, very easy to write, and very reliable and portable.

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.

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.

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.
Your job is to provide legal advice and support to the company and its employees.
You are knowledgeable, professional, and detail-oriented.

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

Action commitment

Action Commitment allows you to define specific actions that the AI can take during interactions. This can include things like posting on a social media platform, sending emails, creating calendar events, or interacting with your internal systems.

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
ACTION When a user asks about an issue that could be treated as a crime, notify legal@company.com.

Read more about the language

Where to use your AI agent in book

Books can be useful in various applications and scenarios. Here are some examples:

Chat apps:

Create your own chat shopping assistant and place it in your eShop. You will be able to answer customer questions, help them find products, and provide personalized recommendations. Everything is tightly controlled by the book you have written.

Reply Agent:

Create your own AI agent, which will look at your emails and reply to them. It can even create drafts for you to review before sending.

Coding Agent:

Do you love Vibecoding, but the AI code is not always aligned with your coding style and architecture, rules, security, etc.? Create your own coding agent to help enforce your specific coding standards and practices.

This can be integrated to almost any Vibecoding platform, like GitHub Copilot, Amazon CodeWhisperer, Cursor, Cline, Kilocode, Roocode,...

They will work the same as you are used to, but with your specific rules written in book.

Internal Expertise

Do you have an app written in TypeScript, Python, C#, Java, or any other language, and you are integrating the AI.

You can avoid struggle with choosing the best model, its settings like temperature, max tokens, etc., by writing a book agent and using it as your AI expertise.

Doesn't matter if you do automations, data analysis, customer support, sentiment analysis, classification, or any other task. Your AI agent will be tailored to your specific needs and requirements.

Even works in no-code platforms!

How to create your AI agent in book

Now you want to use it. There are several ways how to write your first book:

From scratch with help from Paul

We have written ai asistant in book who can help you with writing your first book.

Your AI twin

Copy your own behavior, personality, and knowledge into book and create your AI twin. It can help you with your work, personal life, or any other task.

AI persona workpool

Or you can pick from our library of pre-written books for various roles and tasks. You can find books for customer support, coding, marketing, sales, HR, legal, and many other roles.

🚀 Get started

Take a look at the simple starter kit with books integrated into the Hello World sample applications:

💜 The Promptbook Project

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

ProjectAbout
Book language Book is a human-understandable markup language for writing AI applications such as chatbots, knowledge bases, agents, avarars, translators, automations and more. There is also a plugin for VSCode to support .book file extension
Promptbook Engine Promptbook engine can run applications written in Book language. It is released as multiple NPM packages and Docker HUB
Promptbook Studio Promptbook.studio is a web-based editor and runner for book applications. It is still in the experimental MVP stage.

Hello world examples:

🌐 Community & Social Media

Join our growing community of developers and users:

PlatformDescription
💬 DiscordJoin our active developer community for discussions and support
🗣️ GitHub DiscussionsTechnical discussions, feature requests, and community Q&A
👔 LinkedInProfessional updates and industry insights
📱 FacebookGeneral announcements and community engagement
🔗 ptbk.ioOfficial landing page with project information

🖼️ Product & Brand Channels

Promptbook.studio

📸 Instagram @promptbook.studioVisual 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 ManagementPipeline Control
Language & Output ControlAdvanced 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!

Keywords

ai

FAQs

Package last updated on 13 Nov 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts