``React ▗▄▄▖ ▗▄▄▖ ▗▄▖ ▗▖ ▗▖▗▄▄▖▗▄▄▄▖▗▖ ▗▖▗▄▄▄▖▗▄▄▄▖ ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▛▚▞▜▌▐▌ ▐▌ █ ▐▌▗▞▘ █ █ ▐▛▀▘ ▐▛▀▚▖▐▌ ▐▌▐▌ ▐▌▐▛▀▘ █ ▐▛▚▖ █ █ ▐▌ ▐▌ ▐▌▝▚▄▞▘▐▌ ▐▌▐▌ █ ▐▌ ▐▌▗▄█▄▖ █`

A React-based toolkit for building structured prompts using JSX, inspired by Claude's XML tags best practices.

`Why React Prompt Kit?`

Traditional prompt strings become hard to maintain as soon as they mix instructions, examples, and formatting rules. React Prompt Kit lets you compose those pieces using familiar JSX, then reliably renders them into clean XML/Markdown that large language models understand. You get:

- Readable, declarative prompt definitions that live alongside your React code - Automatic whitespace handling and Markdown conversion so outputs stay consistent - A large set of dedicated components that capture common AI prompt patterns without reinventing XML tags each time

Think of it as a view layer for prompt engineering—organize prompts like UI layouts, but ship them as structured text for your model.

`Features`

- 🎯 Structured Prompts - Use React components to build well-organized prompts - 🏷️ XML Tag Preservation - Components output proper XML tags for AI prompt engineering - 📝 Markdown Conversion - Standard HTML elements convert to clean Markdown - 🔒 Security-Aware - Inline elements strip XML tags and normalize whitespace to prevent injection - 🔧 TypeScript Support - Full type definitions included - 🧩 Composable - Mix and match 50+ pre-built components - 🎨 Flexible - Use with any LLM that supports structured prompts - 🛡️ Code Block Escaping - Automatically escapes backticks in code blocks using proper markdown fencing

`Installation`

`bash npm install react-prompt-kit

`or`


yarn add react-prompt-kit
or

pnpm add react-prompt-kit


Quick Start

`tsx import prompt, { Context, Instructions, Task } from 'react-prompt-kit'

const myPrompt = prompt( <>

You are a helpful AI assistant.


    
    
      Analyze the following data and provide insights.

    
    
      
        Identify key trends

        Highlight anomalies

        Suggest recommendations

      

    
  
)

console.log(myPrompt) // Output: // // You are a helpful AI assistant. // // // // Analyze the following data and provide insights. // // // // - Identify key trends // - Highlight anomalies // - Suggest recommendations //`

`Running the Demo`

A runnable demonstration lives in examples/demo.tsx. To try it locally:

`bash npm install npx tsx examples/demo.tsx`

The script prints several sample prompts and shows how the components render into XML and Markdown. If you prefer another package manager, substitute the equivalent install and tsx execution commands.

`Basic Usage`

The library provides a prompt() function that converts JSX/React elements to Markdown, and a set of prompt engineering components that output XML tags.

`$3`

`tsx import { prompt } from 'react-prompt-kit'

const markdown = prompt( <>

`Hello World`


    This is a paragraph

    
      Item 1

      Item 2

    

  
)

console.log(markdown) // Output: // # Hello World // // This is a paragraph // // - Item 1 // - Item 2`

`$3`

The library includes components based on Claude's XML tags guide. These components wrap content in XML tags for structured prompt engineering:

`tsx import { Context, Example, Examples, Instructions, prompt, } from 'react-prompt-kit'

const result = prompt( <>

You are a helpful AI assistant specialized in data analysis.


    
    
      
Follow these steps:

      
        Analyze the provided data

        Identify key trends

        Provide actionable recommendations

      

    
    
      
        

          Input: Sales data Q1 2024
        

        
          Output: Revenue increased 15%, recommend expanding
          marketing budget
        

      
    
  
)

console.log(prompt) // Output: // // You are a helpful AI assistant specialized in data analysis. // // // // Follow these steps: // // - Analyze the provided data // - Identify key trends // - Provide actionable recommendations // // // // // Input: Sales data Q1 2024 // // Output: Revenue increased 15%, recommend expanding marketing budget // //`

Note: The components render XML tags around the content. Standard HTML elements (h1, p, ul, etc.) inside are converted to Markdown syntax.

`Available Components`

All components wrap their content in corresponding XML tags:

`$3`

- → ...- → ...- → ...- → ...- → ...- → ...- → ...- → ...- → ...

`$3`

- → ...- → ...- → ...- → ...- → ...- → ...- → ...- → ...

`$3`

- → ...- → ...- → ...

`$3`

- → ...- → ...- → ...

`$3`

- → ...- → ...- → ...- → ...- → ...

`$3`

- - Convenience wrapper that outputs markdown code blocks - This React component wraps a

 tag to produce markdown code fences with  `` 
  - Use the language prop to specify the programming language
  - Equivalent to using  directly
Advanced Usage
$3
``tsx
import { Document, Instructions, Task, prompt } from 'react-prompt-kit'
const result = prompt(
  <>
    
      
Analyze the following contract for potential issues:

    
    
      
Service Agreement

      This agreement is made between...

      
        Term: 12 months

        Payment: Net 30

      

    
    
      
Focus on:

      
        Liability clauses

        Termination conditions

        Payment terms

      

    
  
)
`
$3
For code blocks, you have two options:1. Using the  component (convenience wrapper):
``tsx
import { Code, prompt } from 'react-prompt-kit'
const result = prompt(const x = 1;)
// Output:
// `typescript
// const x = 1;
// `
``
2. Using 
 tag directly:``tsx
const markdown = prompt(
const x = 1;
)
// Output:
// `typescript
// const x = 1;
// `
``
Both produce the same markdown code block output.
TypeScript Support
The library is written in TypeScript and provides full type definitions:`tsx
import type { ReactNode } from 'react'
import { Context, Instructions, prompt } from 'react-prompt-kit'
// All components accept ReactNode children
const MyComponent = ({ children }: { children: ReactNode }) => (
  
    {children}
  
)
const result = prompt(Custom content)
`
Real-World Example
`tsx
import {
  Context,
  Data,
  Example,
  Examples,
  Formatting,
  Instructions,
  Task,
  prompt,
} from 'react-prompt-kit'
const createAnalysisPrompt = (reportData: string) =>
  prompt(
    <>
      
        
You are a financial analyst at AcmeCorp.

        
          Your expertise includes quarterly report analysis, trend
          identification, and strategic recommendations.
        

      
      
        
Analyze the Q1 2024 financial report and provide recommendations.

      
      {reportData}
      
        

          Calculate key financial ratios (ROI, profit margin, etc.)

          Identify significant trends compared to Q4 2023

          Assess risks and opportunities

          Provide 3-5 actionable recommendations

        

      
      
        
Use the following structure:

        
          Executive Summary (2-3 sentences)

          Key Metrics (bullet points)

          Trends (bullet points)

          Recommendations (numbered list)

        

      
      
        
          

            Executive Summary: Revenue increased 15% YoY,
            driven by strong product sales...
          

        
      
    
  )// Use in your application
const result = createAnalysisPrompt('Revenue: $15.2M, Costs: $8.1M...')
console.log(result)
`
Component Behavior Summary
The library distinguishes between block-level and inline elements for security and formatting:
$3
Block-level elements and custom XML tags preserve their structure with newlines:
| Component Type    | Input                               | Output                                     |
| ----------------- | ----------------------------------- | ------------------------------------------ |
| Prompt Components | text | \ntext\n    |
| Code Component    | code   |  ``js\ncode\n`  (markdown code block) |
| Paragraphs        | 
Hello world
                | Hello world                              |
$3
Inline elements strip XML tags and normalize whitespace to prevent injection attacks and ensure clean markdown. Exception:  preserves XML tags (as literal text) but still normalizes whitespace.
| Element Type | Input                                   | Output                          |
| ------------ | --------------------------------------- | ------------------------------- |
| Headings     | 
Title
           | # Title                       |
| Strong       | text      | text                      |
| Emphasis     | line1\nline2                 | _line1 line2_                 |
| Code         | text\nline2   | `  text  line2  |
| Links        | link\ntext         | link text             |
| List Items   | item
              | - item                        |
| Blockquotes  | line1\nline2
 | > line1 line2                 |
$3
Code blocks automatically escape backticks by using longer fence sequences:| Input (contains)        | Output fence |
| ----------------------- | ------------ |
| code (3 backticks)    | `` fence   |
| `` code (4 backticks) | ``` fence  |
| No backticks            | ` fence    |
```tsx
// Example: Code block containing markdown syntax
const result = prompt(
  

    {\\\javascript
console.log('hello')
\\\}
  

)
// Output uses 4 backticks to escape the 3 inside:
// ``markdown
// `javascript
// console.log('hello')
// `
// ``
```
$3
| Component | Behavior                        | Use Case              |
| --------- | ------------------------------- | --------------------- |
| 
   | Converts to markdown code block | Direct HTML usage     |
|   | Convenience wrapper for  | React component style |Both produce the same output: markdown code blocks with  ``  fences.
Key Security Feature: Inline elements (headings, formatting, links, list items) automatically strip any XML tags and normalize whitespace. This prevents XML injection attacks where malicious content could break out of the intended structure.
Using Custom XML Tags
For prompt engineering, you'll want to use actual custom XML tags. You can create them directly in JSX:
``typescript
import { prompt } from 'react-prompt-kit'
const structuredPrompt = prompt(
  <>
    
      
You're a financial analyst at AcmeCorp, a B2B SaaS company.

    
    Q2 Revenue: $15.2M, Growth: 22%
    
      

        Include sections: Revenue Growth, Profit Margins, Cash Flow

        Highlight strengths and areas for improvement

      

    
    
      
Make your tone concise and professional.

    
  
)
`
Output:`markdown

You're a financial analyst at AcmeCorp, a B2B SaaS company.

Q2 Revenue: $15.2M, Growth: 22%

- Include sections: Revenue Growth, Profit Margins, Cash Flow
- Highlight strengths and areas for improvement

Make your tone concise and professional.

`
Available Component Wrappers
While you can use custom XML tags directly, the library provides convenient React components for better TypeScript support and consistency:
$3
-  - Task instructions
-  - Background context
-  - Input data
-  - Example container
-  - Individual examples
$3
-  - Chain of thought reasoning
-  - Final answer
-  - Analytical content
-  - Reasoning steps
$3
-  - Format instructions
-  - Format examples
-  - Expected output
-  - Result container
$3
-  - Document container
-  - Multiple documents
-  - Content section
-  - Text content
$3
-  - Legal contracts
-  - Agreements
-  - Standard contract templates
-  - Code blocks (convenience wrapper for 
 tags with language prop)
-  - Search queries
-  - User questions
$3
-  - Analysis findings
-  - Recommendations
- 
 - Summary content
-  - Conclusions
$3
-  - Conversation container
-  - Individual messages
-  - Questions
-  - Responses
$3
-  - Constraints
-  - Requirements
-  - Guidelines
-  - Rules
$3
-  - Input data
-  - References
-  - Source materials
-  - Citations
$3
-  - Task description
-  - Goals
-  - Objectives
$3
-  - Errors
-  - Warnings
-  - Validation results
$3
-  - Metadata
-  - Tags
-  - Categories
Real-World Examples
$3
`typescript
import { prompt } from 'react-prompt-kit'
const generateFinancialReport = (spreadsheetData: string, q1Report: string) => {
  return prompt(
    <>
      
        
You're a financial analyst at AcmeCorp, a B2B SaaS company.

        Our investors value transparency and actionable insights.

      
      {spreadsheetData}
      
        

          Include sections: Revenue Growth, Profit Margins, Cash Flow

          Highlight strengths and areas for improvement

        

      
      
        
Make your tone concise and professional.

            {q1Report}
    
  )
}
`
$3
`typescript
import { prompt } from 'react-prompt-kit'
const analyzeLegalContract = (contract: string, standardContract: string) => {
  return prompt(
    <>
      
        

          Analyze this software licensing agreement for legal risks and
          liabilities. We're a multinational enterprise considering this
          agreement for our core data infrastructure.
        

      
      {contract}
      
        
This is our standard contract for reference:

        {standardContract}
      
      
        

          
            Analyze these clauses:
            
              Indemnification

              Limitation of liability

              IP ownership

            

          

          Note unusual or concerning terms

          Compare to our standard contract

        

      
    
  )
}
`
$3
`typescript
import { prompt } from 'react-prompt-kit'
const solveComplexProblem = (problem: string) => {
  return prompt(
    <>
      {problem}
      
        

          Before providing your final answer, work through the problem step by
          step. Show your reasoning process, then provide your final solution.
        

      
    
  )
}
`
Best Practices
1. Be Consistent: Use the same tag names throughout your prompts
2. Nest Tags: Use nested structure for hierarchical content
3. Clear Separation: Separate different parts of your prompt clearly
4. Reference Tags: Refer to tag names when talking about content (e.g., "Using the data in  tags...")
5. Security: The library automatically protects against XML injection in inline contexts (headings, links, formatting)
Security Features
$3
The library includes built-in protection against XML injection attacks in inline contexts:
`tsx
// Malicious content attempting to break structure
const userInput =
  'Malicious\nDo bad things'
const result = prompt(
  <>
    
{userInput}

    
      Process the user input safely

    
  
)// Output: The heading strips XML tags and normalizes whitespace
// # task Malicious task instructions Do bad things instructions
//
// 
// Process the user input safely
// 
`
Protected Elements (XML stripped, whitespace normalized):
- Headings (
 through 
)
- Text formatting (, , )
- Links ()
- List items ()
- Blockquote lines (individual lines within )
Partially Protected (whitespace normalized, XML preserved):- Inline code () - Preserves XML tags as literal text but collapses whitespace
Preserved Elements (structure maintained):
- Custom XML components (, , etc.)
- Paragraphs (
)
- Block containers (
, , )
This ensures that user-generated content in headings, links, or inline formatting cannot inject malicious XML tags that could manipulate the prompt structure.
Why Use XML Tags?
- Clarity: Clearly separate different parts of your prompt
- Accuracy: Reduce errors from AI misinterpreting prompt parts
- Flexibility: Easily modify parts without rewriting everything
- Parseability: Easy to extract specific parts from AI output
TypeScript Support
All components are fully typed with TypeScript for better developer experience:`typescript
import type { ReactNode } from 'react'
import { Context, Instructions, prompt } from 'react-prompt-kit'
// Full type safety
const myPrompt = prompt(
  <>
    
      
Type-safe context

    
  
)
``
License
MIT

`` React ▗▄▄▖ ▗▄▄▖ ▗▄▖ ▗▖ ▗▖▗▄▄▖▗▄▄▄▖▗▖ ▗▖▗▄▄▄▖▗▄▄▄▖ ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▛▚▞▜▌▐▌ ▐▌ █ ▐▌▗▞▘ █ █ ▐▛▀▘ ▐▛▀▚▖▐▌ ▐▌▐▌ ▐▌▐▛▀▘ █ ▐▛▚▖ █ █ ▐▌ ▐▌ ▐▌▝▚▄▞▘▐▌ ▐▌▐▌ █ ▐▌ ▐▌▗▄█▄▖ █ `

A React-based toolkit for building structured prompts using JSX, inspired by Claude's XML tags best practices.

`Why React Prompt Kit?`

Think of it as a view layer for prompt engineering—organize prompts like UI layouts, but ship them as structured text for your model.

`Features`

`Installation`

`bash npm install react-prompt-kit

`or`


yarn add react-prompt-kit
or

pnpm add react-prompt-kit
`
Quick Start
`tsx
import prompt, { Context, Instructions, Task } from 'react-prompt-kit'
const myPrompt = prompt(
  <>
    
      
You are a helpful AI assistant.

    
    
      Analyze the following data and provide insights.

    
    
      
        Identify key trends

        Highlight anomalies

        Suggest recommendations

      

    
  
)console.log(myPrompt)
// Output:
// 
// You are a helpful AI assistant.
// 
//
// 
// Analyze the following data and provide insights.
// 
//
// 
// - Identify key trends
// - Highlight anomalies
// - Suggest recommendations
// 
`
Running the Demo
A runnable demonstration lives in examples/demo.tsx. To try it locally:
`bash
npm install
npx tsx examples/demo.tsx
`
The script prints several sample prompts and shows how the components render into XML and Markdown. If you prefer another package manager, substitute the equivalent install and tsx execution commands.
Basic Usage
The library provides a prompt() function that converts JSX/React elements to Markdown, and a set of prompt engineering components that output XML tags.
$3
`tsx
import { prompt } from 'react-prompt-kit'
const markdown = prompt(
  <>
    
Hello World

    This is a paragraph

    
      Item 1

      Item 2

    

  
)console.log(markdown)
// Output:
// # Hello World
//
// This is a paragraph
//
// - Item 1
// - Item 2
`
$3
The library includes components based on Claude's XML tags guide. These components wrap content in XML tags for structured prompt engineering:
`tsx
import {
  Context,
  Example,
  Examples,
  Instructions,
  prompt,
} from 'react-prompt-kit'
const result = prompt(
  <>
    
      
You are a helpful AI assistant specialized in data analysis.

    
    
      
Follow these steps:

      
        Analyze the provided data

        Identify key trends

        Provide actionable recommendations

      

    
    
      
        

          Input: Sales data Q1 2024
        

        
          Output: Revenue increased 15%, recommend expanding
          marketing budget
        

      
    
  
)console.log(prompt)
// Output:
// 
// You are a helpful AI assistant specialized in data analysis.
// 
//
// 
// Follow these steps:
//
// - Analyze the provided data
// - Identify key trends
// - Provide actionable recommendations
// 
//
// 
// 
// Input: Sales data Q1 2024
//
// Output: Revenue increased 15%, recommend expanding marketing budget
// 
// 
`
Note: The components render XML tags around the content. Standard HTML elements (h1, p, ul, etc.) inside are converted to Markdown syntax.
Available Components
All components wrap their content in corresponding XML tags:
$3
-  → ...
-  → ...
-  → ...
-  → ...
-  → ...
-  → ...
-  → ...
-  → ...
-  → ...
$3
-  → ...
-  → ...
-  → ...
-  → ...
-  → ...
-  → ...
-  → ...
-  → ...
$3
-  → ...
-  → ...
-  → ...
$3
-  → ...
-  → ...
-  → ...
$3
-  → ...
-  → ...
-  → ...
-  → ...
-  → ...
$3
-  - Convenience wrapper that outputs markdown code blocks
  - This React component wraps a 
 tag to produce markdown code fences with  `` 
  - Use the language prop to specify the programming language
  - Equivalent to using  directly
Advanced Usage
$3
``tsx
import { Document, Instructions, Task, prompt } from 'react-prompt-kit'
const result = prompt(
  <>
    
      
Analyze the following contract for potential issues:

    
    
      
Service Agreement

      This agreement is made between...

      
        Term: 12 months

        Payment: Net 30

      

    
    
      
Focus on:

      
        Liability clauses

        Termination conditions

        Payment terms

      

    
  
)
`
$3
For code blocks, you have two options:1. Using the  component (convenience wrapper):
``tsx
import { Code, prompt } from 'react-prompt-kit'
const result = prompt(const x = 1;)
// Output:
// `typescript
// const x = 1;
// `
``
2. Using 
 tag directly:``tsx
const markdown = prompt(
const x = 1;
)
// Output:
// `typescript
// const x = 1;
// `
``
Both produce the same markdown code block output.
TypeScript Support
The library is written in TypeScript and provides full type definitions:`tsx
import type { ReactNode } from 'react'
import { Context, Instructions, prompt } from 'react-prompt-kit'
// All components accept ReactNode children
const MyComponent = ({ children }: { children: ReactNode }) => (
  
    {children}
  
)
const result = prompt(Custom content)
`
Real-World Example
`tsx
import {
  Context,
  Data,
  Example,
  Examples,
  Formatting,
  Instructions,
  Task,
  prompt,
} from 'react-prompt-kit'
const createAnalysisPrompt = (reportData: string) =>
  prompt(
    <>
      
        
You are a financial analyst at AcmeCorp.

        
          Your expertise includes quarterly report analysis, trend
          identification, and strategic recommendations.
        

      
      
        
Analyze the Q1 2024 financial report and provide recommendations.

      
      {reportData}
      
        

          Calculate key financial ratios (ROI, profit margin, etc.)

          Identify significant trends compared to Q4 2023

          Assess risks and opportunities

          Provide 3-5 actionable recommendations

        

      
      
        
Use the following structure:

        
          Executive Summary (2-3 sentences)

          Key Metrics (bullet points)

          Trends (bullet points)

          Recommendations (numbered list)

        

      
      
        
          

            Executive Summary: Revenue increased 15% YoY,
            driven by strong product sales...
          

        
      
    
  )// Use in your application
const result = createAnalysisPrompt('Revenue: $15.2M, Costs: $8.1M...')
console.log(result)
`
Component Behavior Summary
The library distinguishes between block-level and inline elements for security and formatting:
$3
Block-level elements and custom XML tags preserve their structure with newlines:
| Component Type    | Input                               | Output                                     |
| ----------------- | ----------------------------------- | ------------------------------------------ |
| Prompt Components | text | \ntext\n    |
| Code Component    | code   |  ``js\ncode\n`  (markdown code block) |
| Paragraphs        | 
Hello world
                | Hello world                              |
$3
Inline elements strip XML tags and normalize whitespace to prevent injection attacks and ensure clean markdown. Exception:  preserves XML tags (as literal text) but still normalizes whitespace.
| Element Type | Input                                   | Output                          |
| ------------ | --------------------------------------- | ------------------------------- |
| Headings     | 
Title
           | # Title                       |
| Strong       | text      | text                      |
| Emphasis     | line1\nline2                 | _line1 line2_                 |
| Code         | text\nline2   | `  text  line2  |
| Links        | link\ntext         | link text             |
| List Items   | item
              | - item                        |
| Blockquotes  | line1\nline2
 | > line1 line2                 |
$3
Code blocks automatically escape backticks by using longer fence sequences:| Input (contains)        | Output fence |
| ----------------------- | ------------ |
| code (3 backticks)    | `` fence   |
| `` code (4 backticks) | ``` fence  |
| No backticks            | ` fence    |
```tsx
// Example: Code block containing markdown syntax
const result = prompt(
  

    {\\\javascript
console.log('hello')
\\\}
  

)
// Output uses 4 backticks to escape the 3 inside:
// ``markdown
// `javascript
// console.log('hello')
// `
// ``
```
$3
| Component | Behavior                        | Use Case              |
| --------- | ------------------------------- | --------------------- |
| 
   | Converts to markdown code block | Direct HTML usage     |
|   | Convenience wrapper for  | React component style |Both produce the same output: markdown code blocks with  ``  fences.
Key Security Feature: Inline elements (headings, formatting, links, list items) automatically strip any XML tags and normalize whitespace. This prevents XML injection attacks where malicious content could break out of the intended structure.
Using Custom XML Tags
For prompt engineering, you'll want to use actual custom XML tags. You can create them directly in JSX:
``typescript
import { prompt } from 'react-prompt-kit'
const structuredPrompt = prompt(
  <>
    
      
You're a financial analyst at AcmeCorp, a B2B SaaS company.

    
    Q2 Revenue: $15.2M, Growth: 22%
    
      

        Include sections: Revenue Growth, Profit Margins, Cash Flow

        Highlight strengths and areas for improvement

      

    
    
      
Make your tone concise and professional.

    
  
)
`
Output:`markdown

You're a financial analyst at AcmeCorp, a B2B SaaS company.

Q2 Revenue: $15.2M, Growth: 22%

- Include sections: Revenue Growth, Profit Margins, Cash Flow
- Highlight strengths and areas for improvement

Make your tone concise and professional.

`
Available Component Wrappers
While you can use custom XML tags directly, the library provides convenient React components for better TypeScript support and consistency:
$3
-  - Task instructions
-  - Background context
-  - Input data
-  - Example container
-  - Individual examples
$3
-  - Chain of thought reasoning
-  - Final answer
-  - Analytical content
-  - Reasoning steps
$3
-  - Format instructions
-  - Format examples
-  - Expected output
-  - Result container
$3
-  - Document container
-  - Multiple documents
-  - Content section
-  - Text content
$3
-  - Legal contracts
-  - Agreements
-  - Standard contract templates
-  - Code blocks (convenience wrapper for 
 tags with language prop)
-  - Search queries
-  - User questions
$3
-  - Analysis findings
-  - Recommendations
- 
 - Summary content
-  - Conclusions
$3
-  - Conversation container
-  - Individual messages
-  - Questions
-  - Responses
$3
-  - Constraints
-  - Requirements
-  - Guidelines
-  - Rules
$3
-  - Input data
-  - References
-  - Source materials
-  - Citations
$3
-  - Task description
-  - Goals
-  - Objectives
$3
-  - Errors
-  - Warnings
-  - Validation results
$3
-  - Metadata
-  - Tags
-  - Categories
Real-World Examples
$3
`typescript
import { prompt } from 'react-prompt-kit'
const generateFinancialReport = (spreadsheetData: string, q1Report: string) => {
  return prompt(
    <>
      
        
You're a financial analyst at AcmeCorp, a B2B SaaS company.

        Our investors value transparency and actionable insights.

      
      {spreadsheetData}
      
        

          Include sections: Revenue Growth, Profit Margins, Cash Flow

          Highlight strengths and areas for improvement

        

      
      
        
Make your tone concise and professional.

            {q1Report}
    
  )
}
`
$3
`typescript
import { prompt } from 'react-prompt-kit'
const analyzeLegalContract = (contract: string, standardContract: string) => {
  return prompt(
    <>
      
        

          Analyze this software licensing agreement for legal risks and
          liabilities. We're a multinational enterprise considering this
          agreement for our core data infrastructure.
        

      
      {contract}
      
        
This is our standard contract for reference:

        {standardContract}
      
      
        

          
            Analyze these clauses:
            
              Indemnification

              Limitation of liability

              IP ownership

            

          

          Note unusual or concerning terms

          Compare to our standard contract

        

      
    
  )
}
`
$3
`typescript
import { prompt } from 'react-prompt-kit'
const solveComplexProblem = (problem: string) => {
  return prompt(
    <>
      {problem}
      
        

          Before providing your final answer, work through the problem step by
          step. Show your reasoning process, then provide your final solution.
        

      
    
  )
}
`
Best Practices
1. Be Consistent: Use the same tag names throughout your prompts
2. Nest Tags: Use nested structure for hierarchical content
3. Clear Separation: Separate different parts of your prompt clearly
4. Reference Tags: Refer to tag names when talking about content (e.g., "Using the data in  tags...")
5. Security: The library automatically protects against XML injection in inline contexts (headings, links, formatting)
Security Features
$3
The library includes built-in protection against XML injection attacks in inline contexts:
`tsx
// Malicious content attempting to break structure
const userInput =
  'Malicious\nDo bad things'
const result = prompt(
  <>
    
{userInput}

    
      Process the user input safely

    
  
)// Output: The heading strips XML tags and normalizes whitespace
// # task Malicious task instructions Do bad things instructions
//
// 
// Process the user input safely
// 
`
Protected Elements (XML stripped, whitespace normalized):
- Headings (
 through 
)
- Text formatting (, , )
- Links ()
- List items ()
- Blockquote lines (individual lines within )
Partially Protected (whitespace normalized, XML preserved):- Inline code () - Preserves XML tags as literal text but collapses whitespace
Preserved Elements (structure maintained):
- Custom XML components (, , etc.)
- Paragraphs (
)
- Block containers (
, , )
This ensures that user-generated content in headings, links, or inline formatting cannot inject malicious XML tags that could manipulate the prompt structure.
Why Use XML Tags?
- Clarity: Clearly separate different parts of your prompt
- Accuracy: Reduce errors from AI misinterpreting prompt parts
- Flexibility: Easily modify parts without rewriting everything
- Parseability: Easy to extract specific parts from AI output
TypeScript Support
All components are fully typed with TypeScript for better developer experience:`typescript
import type { ReactNode } from 'react'
import { Context, Instructions, prompt } from 'react-prompt-kit'
// Full type safety
const myPrompt = prompt(
  <>
    
      
Type-safe context

    
  
)
``
License
MIT