prompt-kit
Core building blocks for AI apps. High-quality, accessible, and customizable components for AI interfaces.
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
🦜🔗 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:
- 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>
)
}
- 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>
)
}
- 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:
-
Install the package:
npm install prompt-kit
-
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
-
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.
🦜🔗 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
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
prompt-kit
Customizable, high-quality components for AI applications.
Build chat experiences, AI agents, autonomous assistants, and more, quickly and beautifully.
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"
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
🦜🔗 Build context-aware reasoning applications
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot