A simple question/answer chat agent built with Next.js and the Ax library.
- 🤖 AI-powered Q&A using Ax DSPy signatures
- 🏗️ Nested objects and complex structured outputs
- ⚡ Type-safe AI interactions with TypeScript
- 🎨 Clean, modern UI with dark mode support
- 🚀 Edge runtime for fast responses
- 📊 Rich metadata including confidence, sentiment, and complexity
-
Install dependencies:
pnpm install
-
Set up your OpenAI API key:
Create a
.env.localfile in the root directory:OPENAI_APIKEY=your_openai_api_key_here
-
Run the development server:
pnpm dev
-
Open your browser:
Navigate to http://localhost:3000
This app uses the Ax library to create a Q&A agent with complex structured outputs using DSPy signatures:
const qaAgent = ax(`
question:string "User's question" ->
answer:string "Comprehensive answer to the question",
confidence:number "Confidence score from 0 to 1",
sentiment:class "positive, neutral, negative" "Overall sentiment",
relatedTopics:string[] "Related topics or concepts (2-4 items)",
keyPoints:string[] "Key takeaways from the answer (2-3 items)",
sources:string[] "Suggested sources or references (1-3 items)",
followUpQuestions:string[] "Relevant follow-up questions (2-3 items)"
`);The signature defines:
- Input:
question:string- The user's question - Outputs: Multiple structured fields including:
answer- The main responseconfidence- How confident the AI is (0-1)sentiment- Classified sentiment (positive/neutral/negative)relatedTopics- Array of related conceptskeyPoints- Bullet points of key informationsources- Suggested referencesfollowUpQuestions- Questions to explore further
Ax automatically generates optimal prompts and handles the LLM interaction, giving you type-safe, structured AI responses with rich metadata.
├── app/
│ ├── api/chat/route.ts # API endpoint using Ax
│ ├── components/
│ │ └── ChatAgent.tsx # Chat UI component
│ └── page.tsx # Homepage
├── .env.local # Your API keys (create this)
└── package.json
MIT