### Install Prompt-Kit Components with shadcn CLI Source: https://www.prompt-kit.com/docs/installation This command installs Prompt-Kit components into your project after shadcn/ui has been configured. Ensure you replace '[COMPONENT]' with the specific component name you wish to install. ```bash npx shadcn@latest add "https://prompt-kit.com/c/[COMPONENT].json" ``` -------------------------------- ### Import Prompt Input Component Source: https://www.prompt-kit.com/docs/installation Example of how to import the PromptInput component from the installed shadcn/ui components directory in your React project. ```javascript import { PromptInput } from "@/components/ui/prompt-input"; ``` -------------------------------- ### Installation using CLI Source: https://context7_llms Instructions for installing the Message component using the command-line interface. ```APIDOC ## Installation ### CLI ```bash npx shadcn add "https://prompt-kit.com/c/message.json" ``` ``` -------------------------------- ### Installation Source: https://context7_llms Instructions for installing the CodeBlock component using either the CLI or manual methods. ```APIDOC ## Installation This section details how to install the CodeBlock component. ### Method 1: CLI Installation Use the following command to add the CodeBlock component to your project: ```bash npx shadcn add "https://prompt-kit.com/c/code-block.json" ``` ### Method 2: Manual Installation 1. Copy and paste the provided code into your project's components. 2. Install the required dependency: ```bash npm install shiki ``` 3. Update the import paths as needed for your project structure. ``` -------------------------------- ### Installation Source: https://context7_llms Instructions for installing the Scroll Button component using either the CLI or manual installation. ```APIDOC ## Installation ### Description Instructions for installing the Scroll Button component using either the CLI or manual installation. ### Method N/A (Installation Guide) ### Endpoint N/A (Installation Guide) ### Parameters N/A ### Request Example N/A ### Response N/A ## Installation CLI Manual Copy and paste the following code into your project. Update the import paths to match your project setup. ``` -------------------------------- ### Install Tool Calling Primitive with shadcn Source: https://www.prompt-kit.com/primitives This command installs the tool calling primitive, providing a UI component and an API route for interacting with tools. It requires the Vercel AI SDK and shadcn setup. The API route typically needs an OPENAI_API_KEY for model interaction. ```bash npx shadcn@latest add "https://prompt-kit.com/c/tool-calling.json" ``` -------------------------------- ### Install Prompt Kit CLI Tool Source: https://context7_llms Installs the Prompt Kit components using the npx command-line interface. This is the recommended method for quick integration. ```bash npx shadcn add "https://prompt-kit.com/c/loader.json" ``` -------------------------------- ### Example: Basic Message Source: https://context7_llms A basic example demonstrating the default usage of the Message component. ```APIDOC ## Examples ### Basic Message ```tsx // Usage of the basic message component ``` ``` -------------------------------- ### Install Tool Component via CLI Source: https://context7_llms Installs the Tool component using the shadcn CLI. This command fetches the component configuration from the specified URL, integrating it into your project. ```bash npx shadcn add "https://prompt-kit.com/c/tool.json" ``` -------------------------------- ### Loader Installation Source: https://context7_llms Instructions for installing the Prompt Kit loader component using either the CLI or manual methods. ```APIDOC ## Installation ### CLI Installation To install the loader using the CLI, run the following command: ```bash npx shadcn add "https://prompt-kit.com/c/loader.json" ``` _Note: If you are using Tailwind CSS v4, you may need to manually add keyframes to your `global.css` file. Refer to the manual installation section for details._ ### Manual Installation 1. **Copy CSS**: Paste the following keyframes into your `global.css` file: ```css @keyframes typing { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-2px); opacity: 1; } } @keyframes loading-dots { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* ... other keyframes ... */ @keyframes shimmer { 0% { background-position: 200% 50%; } 100% { background-position: -200% 50%; } } @keyframes spinner-fade { 0% { opacity: 0; } 100% { opacity: 1; } } ``` 2. **Copy Component**: Paste the following code into your project (e.g., `components/prompt-kit/loader.tsx`): ```tsx // No code provided for this section ``` 3. **Update Imports**: Adjust the import paths to match your project structure. ``` -------------------------------- ### Install PromptKit Response Stream via CLI Source: https://context7_llms This command installs the PromptKit response stream component using npx and shadcn. Ensure you have Node.js and npm/yarn installed. ```bash npx shadcn add "https://prompt-kit.com/c/response-stream.json" ``` -------------------------------- ### Installation Manually Source: https://context7_llms Manual installation steps for the Message component, including copying code and updating imports. ```APIDOC ## Installation ### Manual 1. Copy and paste the following code into your project. ```tsx // components/prompt-kit/message.tsx // ... component code ... ``` 2. Update the import paths to match your project setup. ``` -------------------------------- ### Basic Loader Component Example Source: https://context7_llms Demonstrates the basic usage of the Loader component with its default settings. This example showcases all available loader variants. ```tsx /* Code for app/docs/loader/loader-basic.tsx will be inserted here */ ``` -------------------------------- ### Manual Installation of Code Block Component Source: https://context7_llms Manually installs the Code Block component by copying the file into your project and installing the 'shiki' dependency for syntax highlighting. This method provides more control over the integration process. ```tsx import { CodeBlock } from "@/components/prompt-kit/code-block"; // ... in your component ``` ```bash npm install shiki ``` -------------------------------- ### Install prompt-kit Components with shadcn CLI Source: https://context7_llms Installs a specific prompt-kit component using the shadcn CLI. This command fetches the component configuration from the provided URL and integrates it into your project. ```bash npx shadcn@latest add "https://prompt-kit.com/c/[COMPONENT].json" ``` ```bash npx shadcn add "https://prompt-kit.com/c/prompt-input.json" ``` -------------------------------- ### Install Node.js using NVM on Linux Source: https://nodejs.org/en/download This snippet demonstrates how to download and install the Node Version Manager (nvm) and then use it to install a specific version of Node.js. It includes commands to verify the installed Node.js and npm versions. This process is essential for managing multiple Node.js versions on a single system. ```bash # Download and install nvm: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash # Source nvm to use it in the current shell \. "$HOME/.nvm/nvm.sh" # Download and install Node.js version 24 nvm install 24 # Verify the Node.js version node -v # Expected output: "v24.11.0" # Verify npm version npm -v # Expected output: "11.6.1" ``` -------------------------------- ### Example: Message with Actions Source: https://context7_llms An example illustrating how to add interactive actions to messages using MessageActions and MessageAction. ```APIDOC ## Examples ### Message with Actions You can use `MessageActions` and `MessageAction` to add interactive elements to your messages. ```tsx // Usage of message component with actions ``` ``` -------------------------------- ### Install JSX Preview Component via CLI Source: https://context7_llms Installs the JSX Preview component using the shadcn CLI. This command fetches the necessary configuration from the provided URL to add the component to your project. ```bash npx shadcn add "https://prompt-kit.com/c/jsx-preview.json" ``` -------------------------------- ### Manual Installation of File Upload Component Source: https://context7_llms This snippet shows the manual installation process for the File Upload component. It involves copying and pasting the provided code and updating import paths. ```tsx import { FileUpload, FileUploadTrigger, FileUploadContent } from "@/components/ui/file-upload"; export function CustomFileUpload() { return ( console.log("Added files:", files)} className="border rounded-md p-4" >

Drag file here or click to upload

 ); } ``` -------------------------------- ### Streaming JSX Preview Component Example Source: https://context7_llms This example showcases the streaming capability of the JSXPreview component, allowing for dynamic content rendering as it becomes available. ```tsx import { JSXPreview } from "@/components/ui/jsx-preview"; import { useState, useEffect } from "react"; export function JSXPreviewStreaming() { const [jsxString, setJsxString] = useState(""); useEffect(() => { let timer: NodeJS.Timeout; const fullJsx = "
Streaming example!
"; let currentJsx = ""; for (let i = 0; i < fullJsx.length; i++) { timer = setTimeout(() => { currentJsx += fullJsx[i]; setJsxString(currentJsx); }, i * 50); } return () => clearTimeout(timer); }, []); return ; } ``` -------------------------------- ### Integrating with Tailwind Typography Source: https://www.prompt-kit.com/docs/markdown Shows how to use the `@tailwindcss/typography` plugin with the Markdown component for enhanced typographic styling. It includes installation instructions and an example of applying the `prose` class. ```bash npm install -D @tailwindcss/typography ``` ```html
{markdownContent}
``` -------------------------------- ### Example: Message with Markdown Source: https://context7_llms An example showcasing the Message component's ability to render Markdown content. ```APIDOC ## Examples ### Message with Markdown The `markdown` prop enables rendering content as [Markdown](/docs/markdown), perfect for rich text formatting in messages. ```tsx // Usage of message component with markdown prop ``` ``` -------------------------------- ### Install Prompt Suggestion CLI Source: https://context7_llms Installs the prompt suggestion component using the shadcn CLI. This command fetches the necessary configuration to integrate prompt suggestions into your project. ```bash npx shadcn add "https://prompt-kit.com/c/prompt-suggestion.json" ``` -------------------------------- ### Install Message Component using CLI Source: https://context7_llms Installs the Message component into your project using the `shadcn-ui` CLI. This command fetches the component's configuration and necessary files for integration. ```bash npx shadcn add "https://prompt-kit.com/c/message.json" ``` -------------------------------- ### Install Markdown Component Manually Source: https://context7_llms Manually installs the PromptKit Markdown component by copying source code and installing necessary npm dependencies. Ensure import paths are updated to match your project structure. ```tsx import React from 'react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import remarkBreaks from 'remark-breaks'; interface MarkdownProps { children: string; className?: string; // Add other relevant props as needed } const Markdown: React.FC = ({ children, className, ...props }) => { return ( {children} ); }; export default Markdown; ``` -------------------------------- ### Basic JSX Preview Component Example Source: https://context7_llms This example demonstrates the basic usage of the JSXPreview component, rendering a simple JSX string directly into a React component. ```tsx import { JSXPreview } from "@/components/ui/jsx-preview"; export function JSXPreviewBasic() { const jsxString = "
Hello, World!
"; return ; } ``` -------------------------------- ### Install Reasoning Component via CLI (Bash) Source: https://context7_llms Installs the Reasoning component into your project using the shadcn-ui CLI. This command fetches the necessary component configuration and files from the provided URL. ```bash npx shadcn add "https://prompt-kit.com/c/reasoning.json" ``` -------------------------------- ### Install react-markdown with npm Source: https://github.com/remarkjs/react-markdown Installs the react-markdown package using npm. This is the standard method for Node.js environments. ```bash npm install react-markdown ``` -------------------------------- ### Install Chat Container via CLI Source: https://context7_llms Installs the Chat Container component using the shadcn CLI. This is a quick way to add the component to your project. ```bash npx shadcn add "https://prompt-kit.com/c/chat-container.json" ``` -------------------------------- ### React Markdown Component Example Source: https://github.com/remarkjs/react-markdown This snippet demonstrates the basic usage of the react-markdown component. It takes a Markdown string as input and renders it as HTML within a React application. Ensure you have react and react-dom installed as peer dependencies. ```jsx import React from 'react'; import ReactDOM from 'react-dom/client'; import Markdown from 'react-markdown'; const markdownContent = '# Hello, Markdown!\n\nThis is a **sample** paragraph rendered using react-markdown.' const App = () => { return ( {markdownContent} ); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ``` -------------------------------- ### Install prompt-kit Components with shadcn CLI Source: https://github.com/ibelick/prompt-kit This command installs a specific prompt-kit component into your project after shadcn/ui has been configured. Ensure you replace '[component]' with the desired component name. ```bash npx shadcn@latest add prompt-kit/[component] ``` -------------------------------- ### Install File Upload Component via CLI Source: https://context7_llms This command installs the File Upload component using the provided CLI command. It's a quick way to add the component to your project. ```bash npx shadcn add "https://prompt-kit.com/c/file-upload.json" ``` -------------------------------- ### Install Tool Component Manually Source: https://context7_llms Manually installs the Tool component by copying the provided code into your project. Remember to adjust import paths to align with your project structure. ```tsx // Code for components/prompt-kit/tool.tsx will be loaded here ``` -------------------------------- ### Install Prompt Input Component via CLI Source: https://www.prompt-kit.com/docs/prompt-input This command installs the Prompt Input component and its related files into your project using the shadcn CLI. Ensure you have npx available in your environment. ```bash npx shadcn add "https://prompt-kit.com/c/prompt-input.json" ``` -------------------------------- ### Install JSX Preview Component Manually Source: https://context7_llms Manually installs the JSX Preview component by copying and pasting the provided code into your project. Ensure to update import paths as needed. ```tsx // Code for components/prompt-kit/jsx-preview.tsx will be loaded here ``` -------------------------------- ### Basic Markdown Rendering Example Source: https://www.prompt-kit.com/docs/markdown Demonstrates the basic rendering of Markdown content, including text formatting, lists, links, and code blocks. This serves as a foundational example for using the Markdown component. ```markdown # Markdown Example This is a **bold text** and this is an _italic text_. ## Lists ### Unordered List * Item 1 * Item 2 * Item 3 ### Ordered List 1. First item 2. Second item 3. Third item ## Links and Images Visit [Prompt Kit](https://prompt-kit.com) ## Code Inline code example. ``` // Code block example function greet(name) { return `Hello, ${name}!`; } ``` ``` -------------------------------- ### Prompt Kit Component: PromptInput (Manual Installation) Source: https://context7_llms Provides the source code for the prompt-kit PromptInput component for manual installation. Copy and paste this code into your project and adjust import paths as necessary. ```tsx // Manual installation for PromptInput component // Copy and paste this code into your project and update import paths. // Assuming necessary shadcn/ui components and utilities are available // ... (actual component code would be here) ``` -------------------------------- ### Install Markdown Dependencies Source: https://context7_llms Installs the required npm packages for the Markdown component, including react-markdown, remark-gfm for GitHub Flavored Markdown, and remark-breaks for supporting line breaks. ```bash npm install react-markdown remark-gfm remark-breaks ``` -------------------------------- ### Install Scroll Button using CLI Source: https://context7_llms Installs the scroll button component using the shadcn CLI. This command fetches the necessary configuration and adds the component to your project. ```bash npx shadcn add "https://prompt-kit.com/c/scroll-button.json" ``` -------------------------------- ### Install Code Block Component via CLI Source: https://context7_llms Installs the Prompt Kit Code Block component using npm or yarn by running an npx command. This is the recommended method for quick integration. ```bash npx shadcn add "https://prompt-kit.com/c/code-block.json" ``` -------------------------------- ### Install Markdown Component using CLI Source: https://www.prompt-kit.com/docs/markdown Provides the command-line interface (CLI) command to install the Markdown component. This is the recommended method for adding the component to your project. ```bash npx shadcn add "https://prompt-kit.com/c/markdown.json" ``` -------------------------------- ### Manual Installation of Response Stream Component Source: https://context7_llms Provides the code to be manually pasted into your project for the ResponseStream component. Remember to adjust import paths as needed for your project structure. ```tsx // Paste the ResponseStream component code here // Update import paths to match your project setup. ``` -------------------------------- ### Install Chatbot Primitive with shadcn Source: https://www.prompt-kit.com/primitives This command installs the chatbot primitive, which includes a UI component and an API route. Ensure you have the Vercel AI SDK and shadcn configured. The API route will typically require an OPENAI_API_KEY environment variable to be set. ```bash npx shadcn@latest add "https://prompt-kit.com/c/chatbot.json" ``` -------------------------------- ### Manual Installation of Prompt Kit Source Component Source: https://context7_llms Provides the necessary code for manual installation of the Prompt Kit source component. Ensure to update import paths according to your project structure. ```tsx import React from "react"; interface SourceProps { href: string; children: React.ReactNode; className?: string; } export function Source({ href, children, className, }: SourceProps) { return ( {children} ); } ``` -------------------------------- ### Manual Installation of Scroll Button Component Source: https://context7_llms Manually installs the scroll button component by copying and pasting the provided code into your project. Remember to update import paths as needed. ```tsx /* Code for components/prompt-kit/scroll-button.tsx will be inserted here */ ``` -------------------------------- ### Message Component Manual Installation Source: https://context7_llms Provides instructions for manually installing the Message component by copying its code into your project and updating import paths. This method offers flexibility for projects not using the `shadcn-ui` CLI. ```tsx // components/prompt-kit/message.tsx // ... component code ... // Update import paths to match your project setup. ``` -------------------------------- ### Add Prompt Kit Source via CLI Source: https://context7_llms Installs Prompt Kit source components using the shadcn CLI. This command adds the necessary configuration to your project. ```bash npx shadcn add "https://prompt-kit.com/c/source.json" ``` -------------------------------- ### Install Reasoning Component Manually (TypeScript) Source: https://context7_llms Provides instructions for manually installing the Reasoning component by copying and pasting the source code into your project. Remember to update import paths to match your project structure. ```tsx // Copy and paste the following code into your project. // components/prompt-kit/reasoning.tsx // Update the import paths to match your project setup. ``` -------------------------------- ### Basic Hello World Example with react-markdown Source: https://github.com/remarkjs/react-markdown A simple example demonstrating how to use the Markdown component to render a basic markdown string ('# Hi, *Pluto*!') into React elements within a web page. ```javascript import React from 'react' import {createRoot} from 'react-dom/client' import Markdown from 'react-markdown' const markdown = '# Hi, *Pluto*!' createRoot(document.body).render({ content: markdown }) ``` -------------------------------- ### Chat Container Basic Example Source: https://context7_llms A basic implementation of the Chat Container component, demonstrating its core functionality for displaying chat messages. ```tsx import ComponentCodePreview from "@/components/app/component-code-preview" import { generateMetadata } from "../utils/metadata" import { ChatBasic } from "./chat-basic" import { ChatWithCustomScroll } from "./chat-with-custom-scroll" export const metadata = generateMetadata( "Chat Container", "A component for creating chat interfaces with intelligent auto-scrolling behavior, designed to provide a smooth experience in conversation interfaces." ) # Chat Container A component for creating chat interfaces with intelligent auto-scrolling behavior, designed to provide a smooth experience in conversation interfaces. ## Examples ### Chat container basic } filePath="app/docs/chat-container/chat-with-custom-scroll.tsx" classNameComponentContainer="p-0" /> ### Streaming Text Example A chat container that demonstrates text streaming with automatic scrolling. Click the "Show Streaming" button to see a simulated streaming response with the smart auto-scroll behavior in action. } filePath="app/docs/chat-container/chat-basic.tsx" classNameComponentContainer="p-0" /> ## Installation CLI Manual Copy and paste the following code into your project. Update the import paths to match your project setup. ## Component API The ChatContainer is built using three separate components that work together: ``` -------------------------------- ### Install Tailwind CSS with Vite Source: https://tailwindcss.com/docs Steps to install and configure the Tailwind CSS Vite plugin for seamless integration with frameworks like Laravel, SvelteKit, React Router, Nuxt, and SolidJS. This involves creating a Vite project, installing Tailwind CSS and its Vite plugin, configuring the plugin in vite.config.ts, and importing Tailwind CSS into your main CSS file. ```bash npm create vite@latest my-project cd my-project ``` ```bash npm install tailwindcss @tailwindcss/vite ``` ```typescript import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss(), ], }) ``` ```css @import "tailwindcss"; ``` ```bash npm run dev ``` -------------------------------- ### Install Dependencies for Markdown Chatbot Source: https://sdk.vercel.ai/cookbook/next/markdown-chatbot-with-memoization Installs the necessary npm packages, 'react-markdown' for rendering Markdown and 'marked' for parsing it, required for the Markdown Chatbot with Memoization recipe. ```bash npm install react-markdown marked ``` -------------------------------- ### Install Chatbot Primitive using Shadcn CLI Source: https://context7_llms Command to install the 'chatbot' primitive, which provides a complete chatbot component with frontend and backend implementation. This command uses the shadcn-ui CLI to add the component from a provided JSON configuration URL. ```bash npx shadcn add "https://prompt-kit.com/c/chatbot.json" ``` -------------------------------- ### Reasoning Component: Markdown Support Example (TypeScript) Source: https://context7_llms Illustrates how to use the Reasoning component with Markdown support, enabling rich text formatting for better-structured AI-generated content. This enhances readability for complex explanations. ```tsx import ComponentCodePreview from "@/components/app/component-code-preview" import { generateMetadata } from "../utils/metadata" import { ReasoningMarkdown } from "./reasoning-markdown" export const metadata = generateMetadata( "Reasoning", "A collapsible component for showing AI reasoning, explanations, or logic. You can control it manually or let it auto-close when the stream ends. Markdown is supported." ) } filePath="app/docs/reasoning/reasoning-markdown.tsx" classNameComponentContainer="p-8 justify-start items-start min-h-[400px]" hasReTrigger /> ``` -------------------------------- ### Response Stream Component Examples Source: https://context7_llms Demonstrates various ways to use the ResponseStream component for simulating text streaming effects, including typewriter, fade, and markdown modes. ```APIDOC ## Response Stream Component ### Description A component to simulate streaming text on the client side, perfect for fake responses, or any controlled progressive text display. **We don't recommend to use it for LLM output.** ### Method N/A (Component Examples) ### Endpoint N/A (Component Examples) ### Parameters N/A ### Request Example N/A ### Response N/A ### Examples #### Typewriter Mode The default mode that types out text character by character, simulating a typing effect. #### Fade Mode The fade mode reveals text word by word with a smooth fade-in animation. #### With Markdown ResponseStream can be combined with the Markdown component to create rich, animated content. Note: For `mode="fade"`, manual rendering of segments with CSS animations is required. This can be complex with markdown and might necessitate custom `remarkPlugins`. ``` -------------------------------- ### Start Development Server with npm Source: https://tailwindcss.com/docs This command initiates the development server for the project, typically used for live previewing changes during development. It relies on npm as the package manager and assumes a 'dev' script is defined in the project's package.json. ```shell npm run dev ``` -------------------------------- ### Manual CSS Animations for Loader Component Source: https://context7_llms Provides CSS keyframe animations required for various loader variants. These should be added to your global.css file for manual installation. ```css @keyframes typing { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-2px); opacity: 1; } } @keyframes loading-dots { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @keyframes wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.6); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes text-blink { 0%, 100% { color: var(--primary); } 50% { color: var(--muted-foreground); } } @keyframes bounce-dots { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } } @keyframes thin-pulse { 0%, 100% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 0.4; } } @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.5); opacity: 1; } } @keyframes shimmer-text { 0% { background-position: 150% center; } 100% { background-position: -150% center; } } @keyframes wave-bars { 0%, 100% { transform: scaleY(1); opacity: 0.5; } 50% { transform: scaleY(0.6); opacity: 1; } } @keyframes shimmer { 0% { background-position: 200% 50%; } 100% { background-position: -200% 50%; } } @keyframes spinner-fade { 0% { opacity: 0; } 100% { opacity: 1; } } ``` -------------------------------- ### Reasoning Component: Basic Usage Example (TypeScript) Source: https://context7_llms Demonstrates the most basic implementation of the Reasoning component, designed to automatically close when the AI streaming process is complete. This is useful for displaying sequential AI outputs. ```tsx import ComponentCodePreview from "@/components/app/component-code-preview" import { generateMetadata } from "../utils/metadata" import { ReasoningBasic } from "./reasoning-basic" export const metadata = generateMetadata( "Reasoning", "A collapsible component for showing AI reasoning, explanations, or logic. You can control it manually or let it auto-close when the stream ends. Markdown is supported." ) } filePath="app/docs/reasoning/reasoning-basic.tsx" classNameComponentContainer="p-8 justify-start items-start min-h-[300px]" hasReTrigger /> ``` -------------------------------- ### Use remark-gfm Plugin with Markdown Source: https://github.com/remarkjs/react-markdown This example demonstrates using the 'remark-gfm' plugin with the 'Markdown' component to enable GitHub Flavored Markdown features like strikethrough, tables, and task lists. Ensure 'remark-gfm' is installed. ```javascript import React from 'react'; import { createRoot } from 'react-dom/client'; import Markdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; const markdown = `A paragraph with *emphasis* and **strong importance**. > A block quote with ~strikethrough~ and a URL: https://reactjs.org. * Lists * [ ] todo * [x] done A table: | a | b | | - | - | `; createRoot(document.body).render( {markdown} ); ``` -------------------------------- ### Import PromptInput Component in React Source: https://github.com/ibelick/prompt-kit Example of importing and using the PromptInput component from the prompt-kit library within a React project. This assumes the component is located at '@/components/ui/prompt-input'. ```javascript import { PromptInput } from "@/components/ui/prompt-input" ``` -------------------------------- ### Markdown with Custom Component Styling Example Source: https://www.prompt-kit.com/docs/markdown Illustrates how to customize the rendering of Markdown elements by providing custom React components. This allows for unique styling of headings, links, and blockquotes. ```markdown # Custom Components Example ## Styled Headings ### This is a custom styled H3 ## Custom Links [Click me to toggle theme] ## Custom Blockquotes > This is a custom styled blockquote > with multiple lines of text. ## Custom Lists * First item with custom styling * Second item with custom styling * Third item with custom styling ``` -------------------------------- ### Response Stream with Markdown (TypeScript) Source: https://context7_llms An example demonstrating how to combine ResponseStream with Markdown for rich, animated content. This involves directly using the `useTextStream` hook and may require custom handling for fade mode with Markdown. ```tsx import ComponentCodePreview from "@/components/app/component-code-preview" import { ResponseStreamWithMarkdown } from "./response-stream-with-markdown" // ... other imports and component definitions } filePath="app/docs/response-stream/response-stream-with-markdown.tsx" classNameComponentContainer="p-8 justify-start items-start min-h-[400px]" disableNotProse hasReTrigger /> ``` -------------------------------- ### Install Tailwind Typography Plugin Source: https://github.com/tailwindlabs/tailwindcss-typography Install the @tailwindcss/typography plugin using npm. This is a development dependency for your project. ```bash npm install -D @tailwindcss/typography ``` -------------------------------- ### Customizing Syntax Highlighting Source: https://context7_llms Information on how to customize syntax highlighting using Shiki themes. ```APIDOC ## Customizing Syntax Highlighting The `CodeBlockCode` component uses [Shiki](https://shiki.matsu.io/) for syntax highlighting. You can customize the theme by passing a different theme name to the `theme` prop. Shiki supports many popular themes including: - github-light (default) - github-dark - dracula - nord - and more. For a complete list of supported themes, refer to the [Shiki documentation](https://github.com/shikijs/shiki/blob/main/docs/themes.md). ``` -------------------------------- ### Install remark-gfm with npm Source: https://github.com/remarkjs/remark-gfm This snippet shows how to install the remark-gfm package using npm for Node.js environments. It is a prerequisite for using the package in your project. ```bash npm install remark-gfm ``` -------------------------------- ### Install remark-gfm with Deno Source: https://github.com/remarkjs/remark-gfm This snippet demonstrates how to import and use remark-gfm in Deno environments using esm.sh. This allows for direct use in Deno projects without local installation. ```typescript import remarkGfm from 'https://esm.sh/remark-gfm@4' ``` -------------------------------- ### Loader Component API Source: https://context7_llms API documentation for the Loader component, detailing its configurable props. ```APIDOC ## Component API ### Loader | Prop | Type | Default | Description | | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------- | :--------------------------------------- | | variant | "circular" | "classic" | "pulse" | "pulse-dot" | "dots" | "typing" | "wave" | "bars" | "terminal" | "text-blink" | "text-shimmer" | "loading-dots" | "circular" | The visual style of the loader | | size | "sm" | "md" | "lg" | "md" | The size of the loader | | text | string | | Text to display (for supported variants) | | className | string | | Additional CSS classes | ``` -------------------------------- ### Example: Disabling single tilde strikethrough Source: https://github.com/remarkjs/remark-gfm Demonstrates how to configure remark-gfm to disable support for strikethrough using a single tilde. ```APIDOC ## Example: `singleTilde` To turn off support for parsing strikethrough with single tildes, pass `singleTilde: false`: ### Request Example ```javascript // ... import { unified } from 'unified'; import remarkParse from 'remark-parse'; import remarkGfm from 'remark-gfm'; import remarkRehype from 'remark-rehype'; import rehypeStringify from 'rehype-stringify'; const file = await unified() .use(remarkParse) .use(remarkGfm, { singleTilde: false }) .use(remarkRehype) .use(rehypeStringify) .process('~one~ and ~~two~~'); console.log(String(file)); ``` ### Response Example ```html ~one~ and two ``` ``` -------------------------------- ### Usage with Markdown Source: https://context7_llms Demonstrates how to use the CodeBlock component within Markdown content for rendering code snippets. ```APIDOC ## Usage with Markdown The `CodeBlock` component is used internally by the `Markdown` component to render code blocks in markdown content. When used within the `Markdown` component, code blocks are automatically wrapped with the `not-prose` class to prevent conflicts with prose styling. ```tsx import { Markdown } from "@/components/prompt-kit/markdown" function MyComponent() { const markdownContent = ` # Example ```javascript function greet(name) { return `Hello, ${name}!`; } ``` ` return {markdownContent} } ``` ``` -------------------------------- ### FileUpload API Source: https://context7_llms API documentation for the FileUpload component, which allows for drag-and-drop file uploads. ```APIDOC ## FileUpload Component API ### Description API details for the FileUpload component. ### Props #### FileUpload | Prop | Type | Default | Description | | :----------- | :---------------------- | :------ | :--------------------------------------- | | onFilesAdded | (files: File[]) => void | | Function called when files are added | | children | React.ReactNode | | Child components | | multiple | boolean | true | Allow selection of multiple files | | accept | string | | File types to accept (e.g., ".jpg,.png") | #### FileUploadTrigger | Prop | Type | Default | Description | | :-------- | :----------------------------------------- | :------ | :--------------------- | | asChild | boolean | false | Use child element as the trigger | | className | string | | Additional CSS classes | | children | React.ReactNode | | Child components | | ...props | `React.ComponentPropsWithoutRef<"button">` | | All other button props | #### FileUploadContent | Prop | Type | Default | Description | | :-------- | :------------------------------------- | :------ | :--------------------- | | className | string | | Additional CSS classes | | ...props | `React.HTMLAttributes` | | All other div props | ``` -------------------------------- ### Next.js Showcase Page with Project Links Source: https://context7_llms A Next.js page component that displays a list of projects, each with a title, thumbnail, and a link. It uses Next.js Image and Link components for optimized rendering and navigation. Metadata is generated using a utility function. ```tsx import { Button } from "@/components/ui/button" import { ArrowRightIcon } from "lucide-react" import Image from "next/image" import Link from "next/link" import { generateMetadata } from "../utils/metadata" export const metadata = generateMetadata("Showcase", "Showcase for prompt-kit.") const projects = [ { title: "zola.chat", href: "https://zola.chat", thumbnail: "https://www.zola.chat/cover_zola.jpg", }, { title: "emojis.com", href: "https://emojis.com", thumbnail: "https://attic.sh/_static/emojis/ai-emoji-generator/og.jpg", }, { title: "ottogrid.ai", href: "https://ottogrid.ai", thumbnail: "https://ottogrid.ai/opengraph-image.png?2ca0b60807e14ef5", }, { title: "aiagent.app", href: "https://aiagent.app", thumbnail: "https://aiagent.app/opengraph-image.png?opengraph-image.e8b1925a.png", }, { title: "www.findappgaps.com", href: "https://www.findappgaps.com", thumbnail: "https://www.findappgaps.com/opengraph-image.png?fd2d072fb61c49f3", }, { title: "faithbase.ai", href: "https://faithbase.ai", thumbnail: "https://faithbase.ai/opengraph.jpg", }, ] export default function Showcase() { return (

Showcase

Building something great with prompt-kit?

We'd love to feature your project here.

{projects.map((project) => (
thumbnail
{project.title}
Visit {project.title}
))}
) } ``` -------------------------------- ### Loader Component with Customizable Sizes Source: https://context7_llms Illustrates how to customize the size of the Loader component using predefined size options. This allows for visual consistency across different UI elements. ```tsx /* Code for app/docs/loader/loader-sizes.tsx will be inserted here */ ``` -------------------------------- ### Using ChatContainerRoot with ScrollButton Source: https://context7_llms Demonstrates how to integrate ChatContainerRoot, ChatContainerContent, and ChatContainerScrollAnchor with a ScrollButton for a functional chat interface. This setup enables auto-scrolling and provides a button to return to the bottom. ```tsx import { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor } from "@/components/prompt-kit/chat-container" import { ScrollButton } from "@/components/prompt-kit/scroll-button" function ChatInterface() { return (
{/* Your chat messages here */}
Message 1
Message 2
Message 3
) } ``` -------------------------------- ### JSXPreview API Source: https://context7_llms API documentation for the experimental JSXPreview component, used for rendering JSX strings as React components. ```APIDOC ## JSXPreview Component API ### Description API details for the experimental JSXPreview component, which renders JSX strings as React components with streaming support. ### Props #### ReasoningContent | Prop | Type | Default | Description | | :--------------- | :-------------- | :------ | :---------------------------------------- | | children | React.ReactNode | | The content to be displayed | | className | string | | Additional CSS classes | | contentClassName | string | | Additional CSS classes for the content | | markdown | boolean | false | Enable markdown rendering for the content | | ...props | HTMLAttributes | | Additional HTML div props | ``` -------------------------------- ### Install remark-gfm in Browsers with esm.sh Source: https://github.com/remarkjs/remark-gfm This snippet shows how to import remark-gfm for browser usage via esm.sh with bundling enabled. This is useful for client-side JavaScript applications. ```typescript import remarkGfm from 'https://esm.sh/remark-gfm@4?bundle' ``` -------------------------------- ### Basic Code Block Display Source: https://context7_llms Demonstrates the fundamental usage of the Code Block component for rendering a simple code snippet. It requires the 'CodeBlockBasic' component to be imported and rendered. ```tsx import ComponentCodePreview from "@/components/app/component-code-preview" import { CodeBlockBasic } from "./code-block-basic" // ... inside a React component } filePath="app/docs/code-block/code-block-basic.tsx" classNameComponentContainer="p-8" /> ``` -------------------------------- ### Markdown Component with Fallback Prop Source: https://github.com/remarkjs/react-markdown This example shows how to use the `fallback` prop in the react-markdown component. This prop specifies a default element to render if the Markdown content is empty or invalid, preventing potential rendering errors. ```jsx import React from 'react'; import Markdown from 'react-markdown'; const App = () => { return ( No content provided.}> {''} ); }; export default App; ```