branch fixes

typescript/examples/langchain-nextjs-chatbot/.env-local

@@ -0,0 +1,6 @@
+NEXT_PUBLIC_CDP_API_KEY_NAME=
+NEXT_PUBLIC_CDP_API_KEY_PRIVATE_KEY=
+NEXT_PUBLIC_OPENAI_API_KEY=
+NETWORK_ID=base-sepolia
+# Wallet Connect ID needed to run the project. You can create one here: https://cloud.walletconnect.com/sign-in
+NEXT_PUBLIC_WC_PROJECT_ID=

typescript/examples/langchain-nextjs-chatbot/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "next/core-web-vitals",
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "warn" 
+  }
+}

typescript/examples/langchain-nextjs-chatbot/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+.env
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

typescript/examples/langchain-nextjs-chatbot/.prettierrc

@@ -0,0 +1,16 @@
+{
+  "printWidth": 80,             
+  "tabWidth": 2,                
+  "useTabs": false,             
+  "semi": true,                 
+  "singleQuote": true,          
+  "quoteProps": "as-needed",    
+  "jsxSingleQuote": false,      
+  "trailingComma": "es5",       
+  "bracketSpacing": true,       
+  "jsxBracketSameLine": false,  
+  "arrowParens": "always",      
+  "proseWrap": "preserve",      
+  "htmlWhitespaceSensitivity": "css",
+  "endOfLine": "lf"
+}

typescript/examples/langchain-nextjs-chatbot/README.md

@@ -0,0 +1,85 @@
+# NextJS AgentKit LangChain Chatbot Example
+
+A production-ready example demonstrating how to build an AI agent chatbot using NextJS, LangChain, and CDP AgentKit. The agent can perform complex onchain interactions through natural language conversations.
+
+## 🚀 Features
+
+- Full integration with CDP AgentKit actions and LangChain
+- Built with NextJS for optimal performance and SEO
+- Real-time chat interface with streaming responses
+- Support for complex onchain operations
+- Automatic wallet management and network detection
+
+## 💬 Example Interactions
+
+Ask the chatbot to:
+- Transfer ETH between wallets
+- Check real-time crypto prices
+- Deploy and manage NFT collections
+- Create ERC-20 tokens
+- Learn about Web3 concepts
+- Set up DCA (Dollar-Cost Averaging) strategies
+
+## 🔧 Prerequisites
+
+- Node.js 18 or higher
+- [CDP API Key](https://portal.cdp.coinbase.com/access/api) - For onchain interactions
+- [OpenAI API Key](https://platform.openai.com/docs/quickstart) - For AI capabilities
+
+### Version Check
+```bash
+node --version  # Must be v18.0.0 or higher
+```
+Need to upgrade? Use nvm:
+
+```bash
+nvm install node
+```
+
+🛠 Setup
+
+1. Clone and install dependencies:
+```bash
+git clone https://github.com/coinbase/agentkit.git
+cd agentkit
+npm install
+npm run build
+```
+
+2. Configure environment:
+- Copy .env.local to .env
+- Set required API keys:
+
+
+```bash
+CDP_API_KEY_NAME=your_key_name
+CDP_API_KEY_PRIVATE_KEY=your_private_key
+OPENAI_API_KEY=your_openai_key
+```
+
+3. Start the development server:
+```bash
+cd typescript/examples/langchain-nextjs-chatbot
+npm run dev
+```
+
+# 📱 Usage
+1. Open your browser to http://localhost:3000
+2. Start chatting with your AI agent
+3. The agent will automatically:
+   - Initialize a CDP wallet
+   - Detect the current network
+   - Handle gas fees when needed
+   - Execute onchain transactions securely
+
+
+# 🔄 Development
+Making changes? Rebuild the packages from root:
+
+```bash
+npm run build
+```
+Your changes will automatically reflect in the chatbot. 🤝
+
+📄 License
+Apache-2.0

typescript/examples/langchain-nextjs-chatbot/app/layout.tsx

@@ -0,0 +1,17 @@
+import '@/styles/globals.css';
+
+import { AppProvider } from '@/providers/AppProvider';
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <AppProvider>{children}</AppProvider>
+      </body>
+    </html>
+  );
+}

typescript/examples/langchain-nextjs-chatbot/app/page.tsx

@@ -0,0 +1,126 @@
+"use client";
+import React, { useEffect, useState } from 'react';
+import { ArrowRight } from 'lucide-react';
+import AgentInterface from '@/components/AgentInterface';
+
+const GridBackground = () => {
+  return (
+    <div className="absolute inset-0 overflow-hidden">
+      <div className="absolute inset-0 grid grid-cols-8 gap-px opacity-20">
+        {Array.from({ length: 64 }).map((_, i) => (
+          <div
+            key={i}
+            className="aspect-square border border-white/10 hover:bg-white/5 transition-colors duration-300"
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const Home = () => {
+  const [scrolled, setScrolled] = useState(false);
+  const [isAgentOpen, setIsAgentOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <div className="w-full min-h-screen bg-[#00120f] text-white overflow-hidden">
+      {/* Grid Background */}
+      <GridBackground />
+
+      {/* Navigation */}
+      <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? 'bg-black/80 backdrop-blur-md' : ''
+        }`}>
+        <div className="container mx-auto px-6 py-4 flex justify-between items-center">
+          <div className="text-2xl font-bold tracking-tight"> </div>
+          <div className="flex gap-8 items-center">
+            <button className="text-white/70 hover:text-white transition-colors">Platform</button>
+            <button className="text-white/70 hover:text-white transition-colors">Solutions</button>
+            <button className="text-white/70 hover:text-white transition-colors">Technology</button>
+            <button className="relative px-4 py-2 border border-white/20 hover:border-white transition-colors">
+              Get Started
+            </button>
+          </div>
+          <div className="relative px-4 py-2 border border-white/20 hover:border-white transition-colors">
+          </div>
+        </div>
+      </nav>
+
+      {/* Hero Section */}
+      <div className="relative">
+        <div className="container mx-auto px-6 pt-32">
+          <div className="max-w-4xl">
+            <h1 className="text-7xl font-bold tracking-tight leading-tight mb-8">
+              Building the Future
+              <br />
+              <span className="text-neutral-400">of Digital Trust</span>
+            </h1>
+            <p className="text-xl text-neutral-400 mb-12 max-w-2xl">
+              Empowering the next generation of decentralized applications
+              with enterprise-grade infrastructure and tools.
+            </p>
+            <div className="flex gap-6">
+              {isAgentOpen ? (
+                     <AgentInterface />
+               ) : (
+            <button className="group px-6 py-3 bg-white text-black font-medium flex items-center gap-2 hover:bg-neutral-200 transition-colors"
+                onClick={() => setIsAgentOpen(true)}>
+                 Start Chatting with DCAi Bot
+                 <ArrowRight className="group-hover:translate-x-1 transition-transform" />
+               </button>
+              )}
+
+            </div>
+          </div>
+        </div>
+
+        {/* Stats Section */}
+        <div className="container mx-auto px-6 py-24">
+          <div className="grid grid-cols-3 gap-8">
+            {[
+              { value: "$1B+", label: "Total Value Secured" },
+              { value: "1M+", label: "Transactions Processed" },
+              { value: "100+", label: "Enterprise Clients" }
+            ].map((stat, index) => (
+              <div key={index} className="group border border-white/10 p-8 hover:border-white/30 transition-colors">
+                <div className="text-4xl font-bold mb-2">{stat.value}</div>
+                <div className="text-neutral-400">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Features Grid */}
+        <div className="container mx-auto px-6 py-24">
+          <div className="grid grid-cols-2 gap-8">
+            {[
+              { title: "Enterprise Security", desc: "Bank-grade security protocols with multi-layer protection" },
+              { title: "Scalable Infrastructure", desc: "Built to handle millions of transactions per second" },
+              { title: "Developer Tools", desc: "Comprehensive SDK and API documentation" },
+              { title: "24/7 Support", desc: "Round-the-clock technical assistance and monitoring" }
+            ].map((feature, index) => (
+              <div key={index} className="group border border-white/10 p-8 hover:border-white/30 transition-colors">
+                <h3 className="text-2xl font-bold mb-4">{feature.title}</h3>
+                <p className="text-neutral-400">{feature.desc}</p>
+                <div className="mt-8 h-px w-full bg-gradient-to-r from-white/20 to-transparent group-hover:from-white/40 transition-colors" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Footer line */}
+      <div className="fixed bottom-0 left-0 right-0 h-px bg-white/10" />
+    </div>
+  );
+};
+
+export default Home;