ProStack includes a powerful AI chat feature that allows users to interact with AI assistants and integrates with external tools.
Chat Features
- AI Conversations: Engage in natural language conversations with AI models
- Tool Integrations: Web search capabilities and other tools
- Feedback System: Collect user feedback on AI responses
- Markdown Support: Rich text formatting in responses
Chat Components
The chat system consists of several key components:
Chat Interface
The main chat interface includes:
- Message input area
- Chat history display
- Tool integration panels
Chat Bubbles
ProStack provides custom components for displaying user and assistant messages:
import { UserBubble } from "@/app/(app)/chat/components/chat-bubbles/user";
import { AssistantBubble } from "@/app/(app)/chat/components/chat-bubbles/assistant";
// User message
<UserBubble content="How can I deploy ProStack to production?" />
// Assistant message
<AssistantBubble
chatId="msg-123"
content="You can deploy ProStack using Docker or Vercel. Here's how..."
currentFeedback="neutral"
/>
The chat system can invoke external tools like web search:
import { ToolInvocationListView } from "@/app/(app)/chat/components/chat-bubbles/tool-invocation";
<ToolInvocationListView
toolInvocation={{
toolName: "web_search",
toolCallId: "call-123",
args: { query: "ProStack deployment" },
state: "running"
}}
/>
Using the Chat API
To integrate with the chat functionality in your code:
// Client-side chat interaction
import { createChat, sendMessage } from "@/app/actions/ai/actions";
// Create a new chat conversation
const newConversation = await createChat();
// Send a message to the conversation
const response = await sendMessage({
conversationId: newConversation.id,
message: "How can I deploy ProStack to production?"
});
OpenAI Integration
The chat system integrates with OpenAI’s API. Configuration is done through environment variables:
# OpenAI API Key
OPENAI_API_KEY=sk-*******
ProStack includes a web search tool that allows the AI to search the internet for information:
# Google Search Engine API Keys
GOOGLE_SE_API_KEY=your-google-search-api-key
GOOGLE_CSE_ID=your-google-custom-search-engine-id
Extending the Chat System
You can extend the chat system with:
- Custom Tools: Add new tool integrations
- AI Model Configuration: Change parameters or switch AI models
- Custom UI: Modify the chat interface to match your branding
// Define a new tool in app/actions/ai/index.ts
export const agentTools = {
// Existing tools...
weather: {
description: "Get current weather information",
parameters: {
type: "object",
properties: {
location: {
type: "string",
description: "The city and state, e.g. San Francisco, CA"
}
},
required: ["location"]
}
}
};
// Implement the tool handler
// In app/actions/ai/tools/weather.ts
export async function handleWeatherTool(args: { location: string }) {
// Fetch weather data from an API
const weatherData = await fetchWeatherData(args.location);
return weatherData;
}
Next Steps
