| title | LLMPlayground Test Suite |
|---|---|
| description | Visual test suite for LLMPlayground component covering all use cases |
| sidebarTitle | Playground Test Suite |
| icon | test |
| mode | wide |
import { LLMPlayground } from '/snippets/LLMPlayground.jsx';
This page serves as a comprehensive visual test suite for the LLMPlayground component, covering all use cases and edge cases.
Basic chat mode with default settings.
Chat mode with pre-filled input text.
Input persists after submission, enabling continuous conversation.
Shows placeholder response as an assistant message bubble. When combined with defaultInput, both the input and response are displayed as a conversation.
Testing with a taller height setting.
Testing with a shorter height setting.
Testing with different model and temperature settings.
Testing input with comments (comments are filtered out before sending).
<LLMPlayground defaultInput={`// This is a comment that won't be sent to the API What is machine learning?
// Another comment Explain it simply.`} height="500px" />
Empty playground with no default input or placeholder.
Basic advanced mode with system and user messages.
<LLMPlayground defaultMode="advanced" defaultMessages={[ { role: "system", content: "You are a helpful assistant that explains concepts clearly." }, { role: "user", content: "What is the difference between AI and machine learning?" } ]} height="500px" />
Advanced mode with multiple message exchanges.
<LLMPlayground defaultMode="advanced" defaultMessages={[ { role: "system", content: "You are a coding tutor." }, { role: "user", content: "What is a closure in JavaScript?" }, { role: "assistant", content: "A closure is a function that has access to variables in its outer (enclosing) lexical scope, even after the outer function has returned." }, { role: "user", content: "Can you give me an example?" } ]} height="600px" />
Advanced mode with empty message fields.
Testing with a very long input text.
<LLMPlayground
defaultInput={This is a very long input text to test how the component handles lengthy content. It should properly wrap and display the text in a readable format. The textarea should auto-resize to accommodate the content, and the chat interface should handle long messages gracefully. Let's see how it looks with multiple paragraphs and lines of text that extend beyond the normal input length.}
height="500px"
/>
Testing with an extended multi-paragraph text to thoroughly test the component's handling of lengthy content, including proper wrapping, scrolling, and display formatting.
<LLMPlayground defaultInput={`Artificial intelligence has revolutionized the way we interact with technology and process information. Machine learning, a subset of AI, enables systems to learn and improve from experience without being explicitly programmed. Deep learning, which uses neural networks with multiple layers, has achieved remarkable breakthroughs in image recognition, natural language processing, and autonomous systems.
The field of natural language processing has seen tremendous growth with the advent of large language models. These models, trained on vast amounts of text data, can understand context, generate human-like responses, and perform a wide variety of language tasks. From chatbots to translation services, from content generation to code assistance, LLMs have become integral to modern software applications.
When building applications that leverage AI capabilities, developers must consider several important factors. First, understanding the limitations and biases of AI models is crucial for creating responsible applications. Second, proper prompt engineering can significantly improve the quality and relevance of AI-generated responses. Third, implementing appropriate error handling and fallback mechanisms ensures a robust user experience even when AI services encounter issues.
The future of AI development looks promising, with ongoing research in areas such as reasoning, planning, and multimodal understanding. As these technologies continue to evolve, developers will have access to increasingly powerful tools for building intelligent applications that can understand and interact with users in more natural and meaningful ways. Artificial intelligence has revolutionized the way we interact with technology and process information. Machine learning, a subset of AI, enables systems to learn and improve from experience without being explicitly programmed. Deep learning, which uses neural networks with multiple layers, has achieved remarkable breakthroughs in image recognition, natural language processing, and autonomous systems.
The field of natural language processing has seen tremendous growth with the advent of large language models. These models, trained on vast amounts of text data, can understand context, generate human-like responses, and perform a wide variety of language tasks. From chatbots to translation services, from content generation to code assistance, LLMs have become integral to modern software applications.
When building applications that leverage AI capabilities, developers must consider several important factors. First, understanding the limitations and biases of AI models is crucial for creating responsible applications. Second, proper prompt engineering can significantly improve the quality and relevance of AI-generated responses. Third, implementing appropriate error handling and fallback mechanisms ensures a robust user experience even when AI services encounter issues.
The future of AI development looks promising, with ongoing research in areas such as reasoning, planning, and multimodal understanding. As these technologies continue to evolve, developers will have access to increasingly powerful tools for building intelligent applications that can understand and interact with users in more natural and meaningful ways.`} height="600px" />
Testing with special characters and unicode.
Testing with multi-line input.
<LLMPlayground
defaultInput={Line 1 Line 2 Line 3 Line 4}
height="400px"
/>
Test the conversation flow where input persists.
Placeholder appears as the first assistant message.
This test suite covers:
- ✅ Basic simple mode
- ✅ Simple mode with default input
- ✅ Simple mode with keepInput enabled
- ✅ Simple mode with placeholder response
- ✅ Combined default input and placeholder
- ✅ Custom heights (short, tall, default)
- ✅ Custom models and temperatures
- ✅ Input with comments
- ✅ Empty states
- ✅ Advanced mode (basic and multi-message)
- ✅ Edge cases (long text, special characters, multi-line)
- ✅ Different model configurations
- ✅ Conversation flow testing
Use this page to visually verify that all features work correctly and the UI renders properly in different scenarios.