Convert Figma logo to code with AI

ibelick logoprompt-kit

Core building blocks for AI apps. High-quality, accessible, and customizable components for AI interfaces.

1,539
81
1,539
9

Top Related Projects

Examples and guides for using the OpenAI API

A library for helping developers craft prompts for Large Language Models

This repo includes ChatGPT prompt curation to use ChatGPT and other LLM tools better.

🐙 Guides, papers, lecture, notebooks and resources for prompt engineering

106,456

🦜🔗 Build context-aware reasoning applications

Quick Overview

Prompt-kit is a React component library designed to create AI chat interfaces. It provides a set of customizable and reusable components that allow developers to quickly build chat-like interfaces for AI applications, similar to those seen in popular AI chatbots.

Pros

  • Easy to integrate with React projects
  • Customizable components for flexible UI design
  • Saves development time for AI chat interfaces
  • Modern and clean design out of the box

Cons

  • Limited to React applications
  • May require additional styling for complex layouts
  • Documentation could be more comprehensive
  • Relatively new project, which may lead to frequent changes

Code Examples

Here are a few examples of how to use prompt-kit components:

  1. Creating a basic chat interface:
import { Chat, Message } from 'prompt-kit'

function App() {
  return (
    <Chat>
      <Message role="user">Hello, AI!</Message>
      <Message role="assistant">Hello! How can I assist you today?</Message>
    </Chat>
  )
}
  1. Using the Input component for user messages:
import { Chat, Message, Input } from 'prompt-kit'

function App() {
  const [messages, setMessages] = useState([])

  const handleSend = (message) => {
    setMessages([...messages, { role: 'user', content: message }])
  }

  return (
    <Chat>
      {messages.map((msg, index) => (
        <Message key={index} role={msg.role}>{msg.content}</Message>
      ))}
      <Input onSend={handleSend} />
    </Chat>
  )
}
  1. Customizing the appearance with themes:
import { Chat, Message, ThemeProvider } from 'prompt-kit'

const customTheme = {
  chat: {
    backgroundColor: '#f0f0f0',
  },
  message: {
    user: {
      backgroundColor: '#e1f5fe',
    },
    assistant: {
      backgroundColor: '#f3e5f5',
    },
  },
}

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Chat>
        <Message role="user">Custom themed message</Message>
        <Message role="assistant">Response with custom theme</Message>
      </Chat>
    </ThemeProvider>
  )
}

Getting Started

To start using prompt-kit in your React project:

  1. Install the package:

    npm install prompt-kit
    
  2. Import and use the components in your React application:

    import { Chat, Message, Input } from 'prompt-kit'
    
    function App() {
      return (
        <Chat>
          <Message role="assistant">Welcome! How can I help you?</Message>
          <Input placeholder="Type your message here..." />
        </Chat>
      )
    }
    
    export default App
    
  3. Customize the components as needed using props and themes to match your application's design.

Competitor Comparisons

Examples and guides for using the OpenAI API

Pros of openai-cookbook

  • Comprehensive guide with extensive examples and use cases
  • Official repository maintained by OpenAI
  • Covers a wide range of OpenAI API functionalities

Cons of openai-cookbook

  • More complex and potentially overwhelming for beginners
  • Focuses solely on OpenAI's offerings, limiting broader AI exploration

Code Comparison

prompt-kit:

const prompt = new Prompt({
  template: "Hello, {{name}}!",
  variables: { name: "World" }
});
console.log(prompt.render());

openai-cookbook:

import openai

response = openai.Completion.create(
  engine="text-davinci-002",
  prompt="Hello, World!",
  max_tokens=5
)
print(response.choices[0].text.strip())

Summary

prompt-kit is a lightweight, user-friendly tool for creating and managing prompts, ideal for beginners and quick implementations. openai-cookbook, on the other hand, offers a comprehensive guide to OpenAI's API, providing in-depth examples and best practices. While prompt-kit focuses on simplicity and flexibility, openai-cookbook delivers a more extensive, OpenAI-specific resource for developers looking to leverage the full potential of the platform.

A library for helping developers craft prompts for Large Language Models

Pros of prompt-engine

  • More comprehensive and feature-rich, offering a wider range of prompt engineering tools
  • Backed by Microsoft, potentially providing better long-term support and updates
  • Includes advanced features like prompt versioning and collaboration tools

Cons of prompt-engine

  • Steeper learning curve due to its more complex architecture
  • May be overkill for simpler projects or individual developers
  • Requires more setup and configuration compared to prompt-kit

Code Comparison

prompt-kit:

import { PromptTemplate } from 'prompt-kit';

const template = new PromptTemplate('Hello, {name}!');
const result = template.format({ name: 'World' });
console.log(result); // Output: Hello, World!

prompt-engine:

import { PromptTemplate } from '@microsoft/prompt-engine';

const template = new PromptTemplate('Hello, {name}!');
const result = await template.format({ name: 'World' });
console.log(result); // Output: Hello, World!

Summary

prompt-kit is a lightweight and easy-to-use library for basic prompt engineering tasks, ideal for small projects or individual developers. prompt-engine, on the other hand, offers a more robust set of features and tools, making it suitable for larger teams and complex projects. While prompt-engine provides advanced capabilities, it comes with a steeper learning curve and requires more setup. The choice between the two depends on the specific needs of the project and the developer's experience level.

This repo includes ChatGPT prompt curation to use ChatGPT and other LLM tools better.

Pros of awesome-chatgpt-prompts

  • Larger collection of prompts, offering more variety and options
  • Community-driven with frequent updates and contributions
  • Organized into categories for easier navigation

Cons of awesome-chatgpt-prompts

  • Less structured format, making it harder to quickly implement prompts
  • Lacks a standardized template or format for prompts
  • No built-in tools or utilities for prompt management

Code Comparison

prompt-kit:

const prompt = new Prompt({
  name: "Article Writer",
  description: "Write an article on a given topic",
  template: "Write an article about {{topic}} in {{style}} style."
});

awesome-chatgpt-prompts:

# Act as an Article Writer

Write an article on the following topic:
[Insert topic here]
Style: [Insert desired style]

Summary

While awesome-chatgpt-prompts offers a vast collection of community-contributed prompts, prompt-kit provides a more structured approach with built-in tools for prompt management. awesome-chatgpt-prompts is better suited for inspiration and exploring various prompt ideas, whereas prompt-kit offers a more developer-friendly solution for integrating prompts into projects. The choice between the two depends on whether you prioritize variety and community input or a more standardized and programmatic approach to prompt handling.

🐙 Guides, papers, lecture, notebooks and resources for prompt engineering

Pros of Prompt-Engineering-Guide

  • Comprehensive guide covering various prompt engineering techniques and best practices
  • Regularly updated with new content and examples
  • Includes practical applications and case studies

Cons of Prompt-Engineering-Guide

  • More theoretical and text-heavy, which may be overwhelming for beginners
  • Lacks interactive elements or tools for hands-on experimentation

Code Comparison

Prompt-Engineering-Guide (example of a few-shot prompt):

examples = [
    {"input": "I loved the movie!", "output": "Positive"},
    {"input": "The film was terrible.", "output": "Negative"}
]
prompt = f"Classify the sentiment of the following text:\n\n{examples}\n\nInput: {user_input}\nOutput:"

prompt-kit (example of a prompt template):

const template = `Summarize the following text:
{{text}}

Summary:`;

const prompt = template.replace('{{text}}', userInput);

While Prompt-Engineering-Guide focuses on explaining prompt engineering concepts, prompt-kit provides a more practical, code-centric approach with ready-to-use templates and utilities for implementing prompts in applications.

106,456

🦜🔗 Build context-aware reasoning applications

Pros of LangChain

  • More comprehensive framework for building LLM applications
  • Extensive documentation and community support
  • Integrates with various LLMs and tools beyond just prompts

Cons of LangChain

  • Steeper learning curve due to its complexity
  • May be overkill for simple prompt engineering tasks
  • Requires more setup and configuration

Code Comparison

Prompt-Kit example:

import { PromptTemplate } from 'prompt-kit';

const template = new PromptTemplate('Hello, {name}!');
const result = template.format({ name: 'World' });

LangChain example:

from langchain import PromptTemplate

template = PromptTemplate(
    input_variables=["name"],
    template="Hello, {name}!"
)
result = template.format(name="World")

Summary

Prompt-Kit is a lightweight library focused specifically on prompt engineering, making it easier to use for simple tasks. LangChain, on the other hand, is a more robust framework that offers a wider range of features for building complex LLM applications. The choice between the two depends on the scope and requirements of your project.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

prompt-kit

Customizable, high-quality components for AI applications.
Build chat experiences, AI agents, autonomous assistants, and more, quickly and beautifully.

cover

Installation

Install shadcn/ui

First, you'll need to install and configure shadcn/ui in your project.
Follow the installation guide in the shadcn/ui documentation.

Install prompt-kit components

Once shadcn/ui is set up, you can install prompt-kit components using the shadcn CLI:

npx shadcn@latest add prompt-kit/[component]

Usage

After installation, import and start using the components in your project:

import { PromptInput } from "@/components/ui/prompt-input"