/ai-agent-langchain-langgraph-convex-clerk-ibm-wxtools-nextjs15

Modern Next.js 15 AI agent platform with Claude 3.5, prompt caching, and intelligent tool orchestration via IBM WxFlows (turns any data source into a tool)

Primary LanguageTypeScript

Let's build an AI Agent that can use Tools in NEXT.JS 15! (LangChain, Clerk, Convex, TS, IBM)

A sophisticated AI chat application built with Next.js, featuring real-time conversations, advanced prompt caching, and intelligent tool orchestration powered by LangChain and Claude 3.5 Sonnet.

Before You Get Started

  1. Sign up for a Free Clerk account
  2. Sign up for IBM's FREE WxFlows tool

Features

  • 🤖 Advanced AI chat interface with Claude 3.5 Sonnet
  • 🎨 Modern and responsive UI with Tailwind CSS
  • 🔐 Authentication with Clerk
  • 💾 Real-time data storage with Convex
  • ⚡ Built with Next.js 15 and React 19
  • 🌊 Advanced streaming responses with custom implementation
  • 📱 Mobile-friendly design
  • 🧠 Prompt caching for optimized token usage
  • 🔧 Intelligent tool orchestration with LangGraph
  • 🔄 Real-time updates and tool execution feedback
  • 📚 Integration with various data sources via wxflows

Advanced Features

AI and Prompt Management

  • Prompt Caching: Optimized token usage with Anthropic's caching feature
  • Context Window: Efficient 4096 token context management
  • Tool-Augmented Responses: Enhanced AI capabilities with custom tools
  • Context-Aware Conversations: Intelligent conversation management

Tool Integration

  • wxflows Integration:
    • Quick integration of various data sources
    • Support for YouTube transcripts
    • Google Books API integration
    • Custom data source tooling

LangChain & LangGraph Features

  • State Management: Sophisticated state handling with StateGraph
  • Tool Orchestration: Advanced tool management with ToolNode
  • Memory Management: Efficient context tracking with MemorySaver
  • Message Optimization: Intelligent message trimming and context management

Streaming Implementation

  • Custom Streaming Solution:
    • Real-time token streaming
    • Tool execution feedback
    • Error handling for failed tool calls
    • Workarounds for LangChainAdapter limitations

Real-time Features

  • Live Updates: Instant message delivery and updates
  • Tool Visualization: Real-time tool interaction display
  • History Management: Efficient message history tracking

Tech Stack

  • Frontend Framework: Next.js 15.1.3
  • UI Library: React 19.0.0
  • Styling: Tailwind CSS
  • Authentication: Clerk
  • Database: Convex
  • AI Integration: LangChain
  • Icons: Lucide React & Radix UI Icons
  • Type Safety: TypeScript

Prerequisites

  • Node.js (Latest LTS version recommended)
  • PNPM package manager or NPM/Yarn
  • Clerk account for authentication
  • Convex account for database
  • OpenAI/Anthropic API key for AI capabilities

Environment Variables

Create a .env.local file in the root directory with the following variables:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
ANTHROPIC_API_KEY=your_anthropic_api_key

Installation

  1. Clone the repository:
git clone https://github.com/yourusername/ibm-ai-agent.git
cd ibm-ai-agent
  1. Install dependencies:
pnpm install
  1. Start the development server:
pnpm dev

The application will be available at http://localhost:3000

Performance Optimizations

  • Implemented prompt caching
  • Optimized token usage
  • Efficient streaming implementation
  • Smart context window management

Level Up Your Dev Career 🚀

🔥 Want to earn $120k+/year as a developer? Our 1000+ students already are! Transform your career with the most comprehensive full-stack development program available!

Join Zero to Full Stack Hero 2.0 today!

Why Join Zero to Full Stack Hero 2.0?

  • 🎓 Complete Full-Stack Curriculum

    • Next.js 15, React, TypeScript, Tailwind CSS
    • Backend development with Node.js
    • Database management
    • Authentication & Authorization (like this demo!)
    • AI & SaaS modules
    • Lifetime access
    • Weekly coaching calls
    • Complete project source code
    • Exclusive Discord community
    • So much more!

  • 👨‍🏫 Live Coaching & Support

    • Weekly live sessions with Sonny Sangha
    • Real-time problem solving
    • Code reviews
    • Career guidance
    • Interview preparation

  • 💪 Real-World Experience

    • 50+ practical projects
    • 100+ coding challenges
    • Industry-standard practices
    • Portfolio building

  • 🤝 Active Developer Community

    • 24/7 support in Discord
    • Networking opportunities
    • Code reviews
    • Accountability partners
    • Job opportunities

Success Stories

  • Developers landing $120k+ positions at PayPal
  • Students securing remote work opportunities worldwide
  • Career changers breaking into tech
  • Freelancers starting successful businesses

Join Zero to Full Stack Hero 2.0 Today!

"The best investment in my development career" - Frank Ramos, Harvard Graduate & Senior Developer

This project is part of the Zero to Full Stack Hero 2.0 curriculum, showcasing advanced authentication patterns with Next.js and Auth0.