Lekenny James

Inspiration

Our project was inspired by the frustration of navigating cluttered e-commerce platforms where users often spend more time adjusting filters than actually finding what they want. We wanted to create a system where shopping could be as simple as typing one natural sentence, and the AI would handle searching, filtering, and ranking. The idea aligned perfectly with TikTok TechJam’s Track 4: Building UI for the AI Era with Lynx, which encouraged us to merge AI intelligence with modern frontend tools.

What it does

The application is a proof-of-concept AI-powered product search engine for a TikTok Shop–style catalogue. Users enter a natural language query such as "cheap bottles larger than 500ml with multiple colors," and the system:

1. Sends the query to a FastAPI backend.
2. The backend uses OpenAI’s GPT-4o-mini model to interpret the request and recommend relevant products from a static catalogue.
3. The frontend displays the AI’s concise explanation above a grid of matching product cards, ranked in order of relevance. Products are clickable to open a detailed view, with options to add to cart or buy now (currently stubbed).

How we built it

We built the backend using FastAPI with a single /chat endpoint:

• The endpoint injects a hardcoded catalogue into the AI’s prompt.
• The AI is instructed to return only concise product recommendations and always append a PRODUCT_IDS: [id1, id2] list.
• Regex is used to parse the PRODUCT_IDS and filter the catalogue.
• The backend responds with a JSON object containing both the AI’s explanation and the relevant products.

The frontend was built with LynxJS, a React-like framework:

• App.tsx manages the search bar, AI response display, and the product grid.
• ProductPage.tsx shows enlarged product details with action buttons.
• Utility functions such as parsePrice, truncate, and toUIProduct convert backend data into user-friendly UI components.
• State is managed with useState and side effects with useEffect and useCallback.
• An AbortController ensures requests timeout gracefully to avoid hanging.

Styling was handled in App.css, with a responsive two-column product grid, rounded product cards, and consistent spacing.

Challenges we ran into

• Prompt engineering was difficult. The AI initially returned verbose, inconsistent responses that did not follow the required format. We had to refine our instructions so the AI only returned requested metrics and always listed product IDs.
• Extracting structured data from AI text required careful regex tuning to handle edge cases.
• Ensuring the backend’s JSON output matched the frontend’s toUIProduct model required several rounds of debugging.
• Time constraints meant we had to focus on core functionality and cut secondary features such as a full shopping cart or checkout flow.

Accomplishments that we're proud of

• Building a functional prototype where natural language queries dynamically filter and rank products in real time.
• Successfully integrating OpenAI’s API with FastAPI and handling structured responses despite the challenges of free-form AI text.
• Creating a clean, responsive UI in LynxJS that looks and feels like a modern shopping experience.
• Implementing timeout and error handling so the app fails gracefully under poor network conditions.

What we learned

• How to design prompts for AI systems so that outputs can be parsed reliably into structured formats.
• How LynxJS mirrors the React development model while being optimized for projects like this hackathon.
• How to build robust asynchronous flows in the frontend using AbortController and error states.
• The importance of frontend-backend contract consistency, especially when the backend output is generated by an AI model.

What's next for Lekenny James

• Implementing a persistent shopping cart and checkout flow.
• Supporting multi-turn conversational queries, allowing users to refine searches interactively.
• Adding authentication and personalized recommendations based on user profiles.
• Expanding beyond the hardcoded catalogue to integrate with real TikTok Shop data.
• Introducing pagination and scalability for larger product inventories.

Built With

• fastapi
• lynxjs
• node.js
• pydantic
• python
• regexlib
• typescript