frontend-server

Serve a voice assistant frontend UI with FastAPI and Jinja2 templates.

Updated May 20, 2025
One-click install
npx skills add https://github.com/papdawin/customer-service-assistant --skill frontend-server
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-server
Source: https://github.com/papdawin/customer-service-assistant/tree/main/web/frontend
Command: npx skills add https://github.com/papdawin/customer-service-assistant --skill frontend-server

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a lightweight frontend service to host and render the voice assistant's web UI, enabling seamless user interaction via a browser.

Core Features & Use Cases

  • Render the index.html using Jinja2 templates and expose it via a FastAPI endpoint.
  • Serve static assets from the static directory to power the web UI.
  • Configure the backend API base URL (API_BASE) and page title (TITLE) to connect the frontend with the RAG/LLM backend.

Quick Start

Install dependencies from requirements.txt. Start the server with: uvicorn app:app --reload Open http://localhost:8000 and set API_BASE to your backend URL (e.g., http://localhost:8090).

Frequently Asked Questions about frontend-server

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I serve a FastAPI frontend with Jinja2 templates for a voice assistant?

Serve a FastAPI frontend by rendering Jinja2 templates and exposing them via an endpoint. This Skill provides a lightweight UI server that renders the index page, serves static assets, and connects to a backend API through a configurable API_BASE.

How do I connect a FastAPI UI server to my RAG backend API?

Connect a FastAPI UI server to your RAG backend by configuring the API_BASE environment variable. You can set API_BASE to your backend URL, such as http://localhost:8090, allowing the frontend to seamlessly communicate with the RAG or LLM backend.

Do I need uvicorn to run the FastAPI frontend server?

Yes, you need uvicorn to run the FastAPI frontend server. The Skill requires standard Python dependencies including FastAPI, Jinja2, and uvicorn, which are listed in the requirements.txt file, and the server starts using the uvicorn command.

Can I customize the page title on the voice assistant web UI?

Yes, you can customize the page title on the voice assistant web UI. The frontend server supports configuration through environment variables, allowing you to set both the API_BASE for the backend and the TITLE for the rendered page.

What's the best way to host static assets for a voice assistant web interface?

Host static assets for a voice assistant web interface by using a lightweight FastAPI server. This Skill serves static assets from a designated static directory to power the web UI, enabling seamless user interaction via a browser.

Why is my Jinja2 template not rendering when I start the UI server?

Jinja2 template rendering requires standard Python dependencies to be installed correctly. Ensure you install dependencies from requirements.txt and start the server properly with uvicorn, then open localhost port 8000 to view the rendered index page.