# LLM Examples

## Utilizing LLMs for Development

Large Language Models (LLMs) like GitHub Copilot, ChatGPT, Codex and Claude can significantly accelerate development with the Search Templates Starter. This guide provides proven prompts and strategies for common development tasks.

### Why use LLMs with Search Templates Starter?

The Search Templates Starter's well-structured codebase and modern tooling make it ideal for AI assistance:

* **Consistent patterns** - The organized project structure helps LLMs understand context
* **TypeScript support** - Type information provides better AI suggestions and error detection
* **Component-based architecture** - Clear boundaries make it easier to generate focused code
* **Testing infrastructure** - LLMs can generate tests alongside implementation code

### Effective Prompting Strategies

#### Follow Standard Development Patterns

The Search Templates Starter includes standard development patterns and documentation that LLMs can leverage:

* **AGENTS.md Standard** - Follows the [agents.md](https://agents.md/) standardized pattern for providing AI coding agents with project-specific context, build commands, code style guidelines, and testing instructions
* **Copilot Instructions** - Pre-configured GitHub Copilot instructions are included in the repository and should be customized for your specific use case
* **README patterns** - Follow the established documentation structure for consistency

> Tip: Consider modifying the `AGENTS.md` file in your project root to align with your project's custom conventions. Following the [agents.md](https://agents.md/) standard ensures that all AI coding tools can consistently adjust their contributions to match your guidelines.

### Common Development Tasks

#### Component Modifications

**Example: Replace FilterSidebar with FilterTopbar**

```
Replace the existing FilterSidebar component with a FilterTopbar component that displays filters horizontally at the top of the search results.

Update the layout in Serp component to render FilterTopbar above the products grid instead of FilterSidebar in the sidebar. Maintain all existing filter functionality while adapting the responsive design for horizontal layout.
```

**Example: Replace Pills with Checkboxes in Filters**

```
Replace the Pill components used in FilterSidebar with checkbox inputs for better accessibility and mobile usability.

Update the filter display to show checkboxes with labels instead of pill-style buttons, while maintaining the same filter state management and visual feedback for selected filters.
```

#### Styling Changes

**Example: Replace CSS Modules with Tailwind**

```
Convert the Button component from CSS modules to Tailwind CSS classes.

Replace the current Button.module.css imports and className usage with Tailwind utility classes, maintaining the same visual appearance and hover states.
```

or for a full conversion

```
Convert the CSS module based styling with Tailwind using standard Tailwind build pipelines.
```

#### Search Functionality

**Example: Replace Infinite Scroll with Load More Button**

```
Replace the current pagination in search results with a "Load More" button that appends new results to the existing list.

Update the Pagination component to show a centered button instead of page numbers, and modify the search state to accumulate results rather than replace them.
```

### Best Practices for LLM-Assisted Development

#### Code Review

Always review LLM-generated code for:

* Adherence to project patterns and conventions
* TypeScript type safety
* Security considerations
* Performance implications
* Test coverage completeness

#### Iterative Refinement

Start with basic prompts and refine:

1. Get a working implementation
2. Ask for improvements and optimizations
3. Add error handling and edge cases
4. Enhance with additional features
5. Optimize for performance and maintainability

#### Combine with Human Expertise

Use LLMs to:

* Generate boilerplate code quickly
* Explore different implementation approaches
* Create comprehensive test suites
* Document complex functionality

But rely on human judgment for:

* Architecture decisions
* Security considerations
* Performance trade-offs
* User experience design

### Troubleshooting LLM Issues

#### Common Problems

**Generated code doesn't follow project patterns:**

* Include more specific context about existing patterns
* Reference specific files as examples
* Provide the project structure in your prompt

**TypeScript errors in generated code:**

* Ask the LLM to review and fix TypeScript errors
* Provide the exact error messages for targeted fixes
* Include relevant type definitions in your prompt

**Tests fail or are incomplete:**

* Request test coverage for specific scenarios
* Ask for tests that follow existing test patterns
* Include example test files for reference

**Generated code lacks optimization:**

* Ask specifically for performance considerations
* Request code review focusing on optimization
* Include performance requirements in your initial prompt

By following these patterns and examples, you can significantly accelerate your development workflow while maintaining code quality and project consistency.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nosto.com/techdocs/implementing-nosto/implement-search/using-search-templates-starter/llm-examples.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.