✨ feat(example): add para plugin example

examples/para-plugin-example/.env.example

@@ -0,0 +1,7 @@
+LANGCHAIN_CALLBACKS_BACKGROUND=false
+OPENAI_API_KEY=
+RPC_URL=
+SOLANA_PRIVATE_KEY=
+PARA_API_KEY=
+PARA_ENV=
+GROQ_API_KEY=

examples/para-plugin-example/.eslintrc.json

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

examples/para-plugin-example/.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/para-plugin-example/.prettierrc.json

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

examples/para-plugin-example/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/para-plugin-example/README.md

@@ -0,0 +1,106 @@
+# Para Plugin Example
+
+This repository demonstrates how to integrate and use Solana Agent Kit v2 with Para plugins in your application.
+
+## 🎥 Demo
+
+Watch our implementation demo: [YouTube Video](https://www.youtube.com/watch?v=qItH-SnOcr8)
+
+## 🚀 Features
+
+- Integration of [solana-plugin-para](https://github.com/uratmangun/solana-plugin-para) for backend and frontend respectively
+- Complete example of Para wallet management
+- Real-world usage patterns and best practices
+
+## 📦 Prerequisites
+
+- Node.js 16.x or higher
+- pnpm or bun package manager
+- Solana development environment
+
+## 🛠️ Installation
+
+1. Clone the repository:
+```bash
+git clone <repository-url>
+cd <repository-name>/examples/para-plugin-example
+```
+
+2. Install dependencies:
+```bash
+pnpm install
+# or
+bun install
+```
+
+3. Copy the environment variables:
+```bash
+cp .env.example .env
+```
+
+4. Update the `.env` file with your credentials:
+```env
+LANGCHAIN_CALLBACKS_BACKGROUND=false
+OPENAI_API_KEY=
+RPC_URL=
+SOLANA_PRIVATE_KEY=
+PARA_API_KEY=
+PARA_ENV=BETA | PROD
+GROQ_API_KEY=
+NEXT_PUBLIC_PARA_ENV=BETA | PROD
+NEXT_PUBLIC_PARA_API_KEY=
+```
+
+## 🏃‍♂️ Running the Example
+
+1. Start the development server:
+```bash
+pnpm dev
+# or
+bun dev
+```
+
+2. Open [http://localhost:3000](http://localhost:3000) in your browser
+
+## 📚 Implementation Details
+
+### Server-Side Integration
+
+```typescript
+import { SolanaAgentKit } from "solana-agent-kit";
+import ParaServerPlugin from "@getpara/plugin-para-server";
+
+const solanaAgent = new SolanaAgentKit(/* config */);
+export const solanaAgentWithPara = solanaAgent.use(ParaServerPlugin);
+```
+
+### Web Integration
+
+```typescript
+import ParaWebPlugin from "@getpara/plugin-para-web";
+import { solanaAgent } from "./solana";
+
+export const solanaAgentWithPara = solanaAgent.use(ParaWebPlugin);
+export const para = solanaAgentWithPara.methods.getParaInstance();
+```
+
+## 🔑 Key Components
+
+- `app/api/*` - API routes for Para operations
+- `utils/*` - Utility functions and configurations
+- `components/*` - React components for the UI
+- `public/*` - Static assets
+
+## 📖 Documentation
+
+For more detailed information about the plugins, visit:
+- [Para Documentation](https://docs.getpara.com/integration-guides/solana)
+- [Solana Agent Kit v2 Documentation](https://github.com/sendaifun/solana-agent-kit/tree/v2)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

examples/para-plugin-example/app/api/chat/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest } from "next/server";
+import { Message,LanguageModelV1,streamText,tool } from "ai";
+import { createGroq } from "@ai-sdk/groq";
+import { createVercelAITools } from "solana-agent-kit";
+import { solanaAgentWithPara } from "@/utils/init_server";
+import {listParaToolsWeb} from "@/utils/get_all_tools"
+// Initialize Groq with the mixtral model
+const groq = createGroq({
+  baseURL: "https://api.groq.com/openai/v1",
+  apiKey: process.env.GROQ_API_KEY,
+});
+
+export async function POST(req: NextRequest) {
+  try {
+    const { messages } = await req.json() as { messages: Message[] };
+
+
+    const vercelTools = createVercelAITools(solanaAgentWithPara, solanaAgentWithPara.actions);
+    const webTools = listParaToolsWeb()
+
+    const tools = {...vercelTools,
+     ...webTools
+    }
+    const result = await streamText({
+      model: groq("qwen-qwq-32b") as LanguageModelV1,
+      tools:tools as any,
+      system: `
+      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.
+    `,
+      messages
+    });
+
+
+    return result.toDataStreamResponse();
+  } catch (error: any) {
+    console.error("Error in chat route:", error);
+    return new Response(JSON.stringify({ error: error.message }), {
+      status: error.status || 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+}

examples/para-plugin-example/app/api/wallet/init/route.ts

@@ -0,0 +1,24 @@
+import { NextRequest, NextResponse } from "next/server";
+import { useWallet } from "@/utils/init_server";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { userShare, walletId,session } = await req.json();
+
+    if (!userShare || !walletId || !session) {
+      return NextResponse.json(
+        { error: "userShare and walletId are required" },
+        { status: 400 }
+      );
+    }
+
+    await useWallet(userShare, walletId,session);
+
+    return NextResponse.json({ success: true });
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message },
+      { status: 500 }
+    );
+  }
+} 

examples/para-plugin-example/app/globals.css

@@ -0,0 +1,102 @@
+@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;
+}
+
+
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}