Skip to main content

First Chat

Now that you have content loaded, let's test the full chat experience.

Start both servers​

Terminal 1 — Backend:

uv run litestar run --reload

Terminal 2 — Frontend:

cd frontend
npm run dev

Open the app​

Go to http://localhost:5173. You should see:

  1. Your bio header — avatar, name, tagline, social links
  2. Your link tree — the links you added
  3. A chat widget at the bottom

Chat with your agent​

Click on the chat area. You'll see:

  • The greeting message you configured
  • Quick action buttons (if you set any up)

Try these conversations:

"What links do you have?"

The agent will call the links tool and render your links as interactive A2UI cards.

Ask about products​

"Do you have any courses?"

The agent shows product cards with prices and purchase buttons.

Ask about events​

"Any upcoming events?"

Event cards appear with details and RSVP buttons. Click RSVP to see the A2UI form.

Ask a FAQ question​

"What tech stack do you use?"

The agent searches your FAQ entries and answers based on the knowledge base.

Browse the portfolio​

"Show me your projects"

Portfolio items render as cards with images and links.

Book a consultation​

"I'd like to book a call"

The agent shows available booking slots with a date/time picker.

What's happening under the hood​

  1. Your message is sent over WebSocket to /ws/chat
  2. The PydanticAI agent decides which tools to call based on your message
  3. Tools query the SQLite database and build A2UI components
  4. The agent's text response + A2UI surfaces are sent back as JSON
  5. The Lit frontend renders A2UI components inline in the chat
  6. When you click buttons/submit forms, user actions flow back to the agent

See Architecture for the full picture.

Troubleshooting​

Chat shows "App not configured"

  • Make sure you've set up both the owner profile and bot config via the Admin API

Agent returns generic error

  • Check that your LLM API key is set in .env and matches the model_provider in bot config

No A2UI components appear

  • Verify that enabled_tools includes the relevant tool (e.g., "links" for link cards)
  • Check the browser console for WebSocket errors

Next steps​