Feat: add langchain nextjs template (#68)

## Related Issue
Fixes #58 

## Changes Made
This PR adds the following changes:
<!-- List the key changes made in this PR -->
- I added an examples directory with a README file which can be used to
list templates, projects and examples built by the team and community
  
## Implementation Details
<!-- Provide technical details about the implementation -->
- The template link contained in the README is a template I created
using the Nextjs and Langchain template.
- The template includes a proper implementation of the Solana Agent Kit
and Langchain response streaming.

## Additional Notes
<!-- Any additional information that reviewers should know -->
I believe that examples should be left out of library repos, not just
because of bundle size but because the repo itself can get quite big and
maintaining a monorepo never scales well.

## Checklist
- [x] I have tested these changes locally
- [x] I have updated the documentation

examples/agent-kit-nextjs-langchain/.env.example

@@ -0,0 +1,4 @@
+LANGCHAIN_CALLBACKS_BACKGROUND=false
+OPENAI_API_KEY=
+RPC_URL=
+SOLANA_PRIVATE_KEY=

examples/agent-kit-nextjs-langchain/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/agent-kit-nextjs-langchain/.gitignore

@@ -0,0 +1,43 @@
+# 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*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.env

examples/agent-kit-nextjs-langchain/.prettierrc.json

@@ -0,0 +1 @@
+{}

examples/agent-kit-nextjs-langchain/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 LangChain
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

examples/agent-kit-nextjs-langchain/README.md

@@ -0,0 +1,56 @@
+# SolanaAgentKit 🦜️🔗 LangChain + Next.js Starter Template
+
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/michaelessiet/solana-agent-nextjs-starter-langchain)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsendaifun%2Fsolana-agent-kit%2Ftree%2Fmain%2Fexamples%2Fagent-kit-nextjs-langchain&env=OPENAI_API_KEY,RPC_URL,SOLANA_PRIVATE_KEY&project-name=solana-agent-kit&repository-name=sak-yourprojectname)
+
+This template scaffolds a SolanaAgentKit + LangChain.js + Next.js starter app.
+
+The agent uses [LangGraph.js](https://langchain-ai.github.io/langgraphjs/), LangChain's framework for building agentic workflows. They use preconfigured helper functions to minimize boilerplate, but you can replace them with custom graphs as desired.
+
+![Demo GIF](/public/images/agent-convo.gif)
+
+It's free-tier friendly too! Check out the [bundle size stats below](#-bundle-size).
+
+## 🚀 Getting Started
+
+First, clone this repo and download it locally.
+
+Next, you'll need to set up environment variables in your repo's `.env.local` file. Copy the `.env.example` file to `.env.local`.
+To start, you'll just need to add your OpenAI API key, Solana RPC URL and wallet private key in base 58 string form.
+
+Next, install the required packages using your preferred package manager (e.g. `pnpm`).
+
+```bash
+pnpm install
+```
+
+Now you're ready to run the development server:
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result! Ask the bot something and you'll see a streamed response:
+
+![A streaming conversation between the user and the AI](/public/images/chat-conversation.png)
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+Backend logic lives in `app/api/chat/route.ts`. From here, you can change the prompt and model, or add other modules and logic.
+
+## 📚 Learn More
+
+To learn more about what you can do with SolanaAgentKit and LangChain.js, check out the docs here:
+
+- https://github.com/sendaifun/solana-agent-kit
+- https://js.langchain.com/docs/
+
+## ▲ Deploy on Vercel
+
+When ready, you can deploy your app on the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme).
+
+Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+## Thank You!
+
+Thanks for reading! If you have any questions or comments, please drop an issue on this repo or reach out to us on [X](https://x.com/sendaifun)

examples/agent-kit-nextjs-langchain/app/api/chat/route.ts

@@ -0,0 +1,71 @@
+import { NextRequest, NextResponse } from "next/server";
+import { ChatOpenAI } from "@langchain/openai";
+import { MemorySaver } from "@langchain/langgraph";
+import { createReactAgent } from "@langchain/langgraph/prebuilt";
+import { SolanaAgentKit, createSolanaTools } from "solana-agent-kit";
+
+const llm = new ChatOpenAI({
+	temperature: 0.7,
+	model: "gpt-4o-mini",
+});
+
+const solanaAgent = new SolanaAgentKit(
+	process.env.SOLANA_PRIVATE_KEY!,
+	process.env.RPC_URL,
+	process.env.OPENAI_API_KEY!,
+);
+
+const tools = createSolanaTools(solanaAgent);
+const memory = new MemorySaver();
+
+const agent = createReactAgent({
+	llm,
+	tools,
+	checkpointSaver: memory,
+	messageModifier: `
+      You are a helpful agent that can interact onchain using the Solana Agent Kit. You are
+      empowered to interact onchain using your tools. If you ever need funds, you can request them from the
+      faucet. If not, you can provide your wallet details and request funds from the user. If there is a 5XX
+      (internal) HTTP error code, ask the user to try again later. If someone asks you to do something you
+      can't do with your currently available tools, you must say so, and encourage them to implement it
+      themselves using the Solana Agent Kit, recommend they go to https://www.solanaagentkit.xyz for more information. Be
+      concise and helpful with your responses. Refrain from restating your tools' descriptions unless it is explicitly requested.
+    `,
+});
+
+export async function POST(req: NextRequest) {
+	try {
+		const body = await req.json();
+		const messages = body.messages ?? [];
+
+		const eventStream = agent.streamEvents(
+			{
+				messages,
+			},
+			{
+				version: "v2",
+				configurable: {
+					thread_id: "Solana Agent Kit!",
+				},
+			},
+		);
+
+		const textEncoder = new TextEncoder();
+		const transformStream = new ReadableStream({
+			async start(controller) {
+				for await (const { event, data } of eventStream) {
+					if (event === "on_chat_model_stream") {
+						if (!!data.chunk.content) {
+							controller.enqueue(textEncoder.encode(data.chunk.content));
+						}
+					}
+				}
+				controller.close();
+			},
+		});
+
+		return new Response(transformStream);
+	} catch (e: any) {
+		return NextResponse.json({ error: e.message }, { status: e.status ?? 500 });
+	}
+}

examples/agent-kit-nextjs-langchain/app/globals.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  color: #f8f8f8;
+  background: #131318;
+}
+
+body input,
+body textarea {
+  color: black;
+}
+
+a {
+  color: #2d7bd4;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+}
+
+p {
+  margin: 8px 0;
+}
+
+code {
+  color: #ffa500;
+}
+
+li {
+  padding: 4px;
+}

examples/agent-kit-nextjs-langchain/app/layout.tsx

@@ -0,0 +1,45 @@
+import "./globals.css";
+import { Public_Sans } from "next/font/google";
+
+const publicSans = Public_Sans({ subsets: ["latin"] });
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<html lang="en">
+			<head>
+				<title>SolanaAgentKit + LangChain + Next.js Template</title>
+				<link rel="shortcut icon" href="/images/favicon.ico" />
+				<meta
+					name="description"
+					content="Starter template showing how to use SolanaAgentKit with Langchain in Next.js projects."
+				/>
+				<meta
+					property="og:title"
+					content="SolanaAgentKit + LangChain + Next.js Template"
+				/>
+				<meta
+					property="og:description"
+					content="Starter template showing how to use SolanaAgentKit with LangChain in Next.js projects."
+				/>
+				<meta property="og:image" content="/images/title-card.png" />
+				<meta name="twitter:card" content="summary_large_image" />
+				<meta
+					name="twitter:title"
+					content="SolanaAgentKit + LangChain + Next.js Template"
+				/>
+				<meta
+					name="twitter:description"
+					content="Starter template showing how to use SolanaAgentKit with LangChain in Next.js projects."
+				/>
+				<meta name="twitter:image" content="/images/title-card.png" />
+			</head>
+			<body className={publicSans.className}>
+				<div className="flex flex-col p-4 md:p-12 h-[100vh]">{children}</div>
+			</body>
+		</html>
+	);
+}

examples/agent-kit-nextjs-langchain/app/page.tsx

@@ -0,0 +1,75 @@
+import { ChatWindow } from "@/components/ChatWindow";
+
+export default function Home() {
+	const InfoCard = (
+		<div className="p-4 md:p-8 rounded bg-[#25252d] w-full max-h-[85%] overflow-hidden">
+			<h1 className="text-3xl md:text-4xl mb-4">
+				SolanaAgentKit + LangChain.js 🦜🔗 + Next.js
+			</h1>
+			<ul>
+				<li className="text-l">
+					🤝
+					<span className="ml-2">
+						This template showcases a simple agent chatbot using{" "}
+						<a href="https://https://www.solanaagentkit.xyz/">SolanaAgentKit</a>
+						{", "}
+						<a href="https://js.langchain.com/" target="_blank">
+							LangChain.js
+						</a>{" "}
+						and the Vercel{" "}
+						<a href="https://sdk.vercel.ai/docs" target="_blank">
+							AI SDK
+						</a>{" "}
+						in a{" "}
+						<a href="https://nextjs.org/" target="_blank">
+							Next.js
+						</a>{" "}
+						project.
+					</span>
+				</li>
+				<li className="hidden text-l md:block">
+					💻
+					<span className="ml-2">
+						You can find the prompt and model logic for this use-case in{" "}
+						<code>app/api/chat/route.ts</code>.
+					</span>
+				</li>
+				<li className="hidden text-l md:block">
+					🎨
+					<span className="ml-2">
+						The main frontend logic is found in <code>app/page.tsx</code>.
+					</span>
+				</li>
+				<li className="text-l">
+					🐙
+					<span className="ml-2">
+						This template is open source - you can see the source code and
+						deploy your own version{" "}
+						<a
+							href="https://github.com/michaelessiet/solana-agent-nextjs-starter-langchain"
+							target="_blank"
+						>
+							from the GitHub repo
+						</a>
+						!
+					</span>
+				</li>
+				<li className="text-l">
+					👇
+					<span className="ml-2">
+						Try asking e.g. <code>What is my wallet address?</code> below!
+					</span>
+				</li>
+			</ul>
+		</div>
+	);
+	return (
+		<ChatWindow
+			endpoint="api/chat"
+			emoji="🤖"
+			titleText="Solana agent"
+			placeholder="I'm your friendly Solana agent! Ask me anything..."
+			emptyStateComponent={InfoCard}
+		></ChatWindow>
+	);
+}