feat: appkit mcp server and client

apps/appkit-chat/.env.example

@@ -0,0 +1,14 @@
+# AppKit
+NEXT_PUBLIC_PROJECT_ID=
+
+# Sentry
+SENTRY_AUTH_TOKEN=
+
+# Google Tag Manager
+NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=
+
+# OpenAI
+OPENAI_API_KEY=
+
+# MCP
+MCP_URL=

apps/appkit-chat/.eslintrc.json

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

apps/appkit-chat/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# 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

apps/appkit-chat/README.md

@@ -0,0 +1,19 @@
+# AppKit MCP Client
+
+A Model Context Protocol Client to represent the capabilities of AppKit MCP Server, built with Next.js.
+
+## Development
+
+To start development, visit `.env.example` file, create your `.env` file in the project root and fill the variables.
+
+### Get your Reown Project ID
+
+To make AppKit work, you need to prove a project ID. Visit https://cloud.reown.com to get your project ID
+
+### Get your OpenAI API Key
+
+To make the chat work, visit https://platform.openai.com/settings/organization/api-keys to get your API key.
+
+## License
+
+[Apache License](../../LICENSE)

apps/appkit-chat/app/api/chat/route.ts

@@ -0,0 +1,38 @@
+import { createOpenAI } from '@ai-sdk/openai'
+import { experimental_createMCPClient as createMCPClient, streamText } from 'ai'
+
+export const maxDuration = 30
+
+const openai = createOpenAI({
+  apiKey: process.env.OPENAI_API_KEY
+})
+
+export async function POST(req: Request) {
+  const { messages, address } = await req.json()
+
+  const mcpClient = await createMCPClient({
+    transport: {
+      type: 'sse',
+      url: 'http://localhost:3003/sse'
+    }
+  })
+
+  console.log('>>> MCP Client created')
+
+  const result = streamText({
+    model: openai('gpt-4o-mini'),
+    system: `You're a helpful assistant for the AppKit. AppKit is tool to connect user's wallets to decentralized applications.
+    User's wallet address is ${address}.
+    With the given prompt, you should return responses to the user in markdown format. Please be clear, short, and helpful. 
+    If necessary, ask some data to call the tools.
+    When you return some set of data, return in markdown table format.
+    `,
+    tools: await mcpClient.tools(),
+    messages,
+    onFinish: async () => {
+      await mcpClient.close()
+    }
+  })
+
+  return result.toDataStreamResponse()
+}