Summer Contributions - Chat in the Front, Party in the Back

What It Does

Community member Nick Nance has created something special with agentuity-chat - a sleek Next.js web application that demonstrates the power of combining modern frontend development with Agentuity's cloud-hosted agents.

The project showcases how easy it is to build a production-ready chat interface using Vercel's AI SDK while leveraging Agentuity agents running in the cloud as the backend intelligence. It's a perfect example of "chat on the front, party on the back" - beautiful, front-end tech powered by sophisticated AI agents.

How It Works

The magic happens through the seamless integration between Vercel's useChat hook and Agentuity's agent infrastructure. Here's how the pieces fit together:

Frontend: Next.js with Vercel AI SDK

The frontend leverages Vercel's powerful useChat hook. It can be directly connected to your deployed Agentuity agent via the AGENTUITY_URL environment variable. The Vercel AI SDK handles all the complexity of streaming responses and message management.

Backend: Agentuity Agents in the Cloud

The backend consists of Agentuity agents deployed to the cloud that handle the actual AI processing. Here's the actual agent code from Nick's project:

import type { AgentRequest } from "@agentuity/sdk";
import { streamText, type UIMessage } from "ai";
import { anthropic } from "@ai-sdk/anthropic";

export default async function Agent(req: AgentRequest) {
	const {
		messages,
	}: {
		id: string;
		messages: Array<UIMessage>;
	} = await req.data.object();

	const result = streamText({
		model: anthropic("claude-3-5-sonnet-latest"),
		system: "you are a helpful assistant",
		messages,
	});

	return result.toDataStreamResponse();
}

This simple LLM code demonstrates the potential power of the integration:

• Agentuity SDK Integration: Uses AgentRequest to receive structured data from the frontend
• Vercel AI SDK Compatibility: Leverages streamText for streaming responses
• Model Flexibility: Easy to swap between different AI providers (here using Anthropic's Claude)
• Streaming Support: Returns a data stream response for real-time chat experience

The agents are deployed using Agentuity's cloud infrastructure, which provides:

• Automatic scaling and management
• Built-in monitoring and analytics
• Secure agent-to-agent communication
• Easy deployment via the Agentuity CLI
• Deployment that is serverless without the downsides (your agents can run for as long as they need to)
• A really awesome dev mode for testing your agents locally

The beauty is in the simplicity - your frontend just sends messages to the deployed Agentuity agent URL, and the agent handles all the AI processing, model management, and response generation in the cloud.

How to Use It

Getting started with Nick's project is straightforward. Check the README for more details and to make it your own on Agentuity. It's as simple as:

1. Clone the repo`

2. agentuity project import

3. agentuity deploy

Community Spotlight

Nick Nance has created an excellent example of how to build modern AI applications with clean separation of concerns. His project demonstrates the power of combining best-in-class frontend tools with Agentuity's agent infrastructure.

Want to contribute to our summer series? Share your Agentuity projects with us on Discord or tag us on social media.