{"id":33319443,"url":"https://github.com/picahq/ai-chatbot-template","last_synced_at":"2025-11-19T20:03:01.766Z","repository":{"id":324280511,"uuid":"1096683699","full_name":"picahq/ai-chatbot-template","owner":"picahq","description":"A production-ready AI chatbot template built with Vercel AI SDK and AI Elements.","archived":false,"fork":false,"pushed_at":"2025-11-14T20:10:56.000Z","size":769,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-14T21:28:31.613Z","etag":null,"topics":["agent","ai","ai-elements","ai-sdk","anthropic","chatbot","integrations","openai","vercel"],"latest_commit_sha":null,"homepage":"https://ai-sdk.dev/elements","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/picahq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-14T19:42:44.000Z","updated_at":"2025-11-14T20:11:00.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/picahq/ai-chatbot-template","commit_stats":null,"previous_names":["picahq/ai-chatbot-template"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/picahq/ai-chatbot-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picahq%2Fai-chatbot-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picahq%2Fai-chatbot-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picahq%2Fai-chatbot-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picahq%2Fai-chatbot-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/picahq","download_url":"https://codeload.github.com/picahq/ai-chatbot-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picahq%2Fai-chatbot-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285319005,"owners_count":27151474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-19T02:00:05.673Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent","ai","ai-elements","ai-sdk","anthropic","chatbot","integrations","openai","vercel"],"created_at":"2025-11-19T20:01:00.023Z","updated_at":"2025-11-19T20:03:01.754Z","avatar_url":"https://github.com/picahq.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AI Chatbot Template\n\nA production-ready AI chatbot built with [Vercel AI SDK](https://ai-sdk.dev) and [AI Elements](https://ai-sdk.dev/elements). This template provides a beautiful, feature-rich chat interface with tool calling, web search, file attachments, and more.\n\n![AI Chatbot Template](./screenshot.png)\n\n## Features\n\n- 🤖 **Multiple AI Models** - Support for GPT 5.1, Claude Sonnet 4.5, and more\n- 🔧 **Tool Calling** - Visual UI components for tool invocations\n- 🔌 **Pica ToolKit Ready** - Easily extend with 200+ enterprise integrations (Gmail, Slack, Salesforce, etc.)\n- 🌐 **Web Search** - Built-in OpenAI web search with UI toggle\n- 📎 **File Attachments** - Drag-and-drop file support\n- 💭 **Reasoning Display** - Show AI reasoning steps\n- 📚 **Source Citations** - Display and reference sources\n- 🎨 **Beautiful UI** - Built with AI Elements and Tailwind CSS\n- 🌙 **Dark Mode** - Dark/Light theme toggle (defaults to dark)\n- ✨ **Empty State** - Clean, informative empty state UI\n- 🎯 **Professional Header** - Branded header with navigation\n- ⚡ **Streaming** - Real-time response streaming\n- 📱 **Responsive** - Mobile-friendly design\n\n## Quick Start\n\n### 1. Install Dependencies\n\n```bash\nnpm install\n```\n\n### 2. Set Up Environment Variables\n\nCreate a `.env.local` file in the root directory:\n\n```bash\n# Get your API key from https://platform.openai.com/api-keys\nOPENAI_API_KEY=your_openai_api_key_here\n\n# Get your API key from https://console.anthropic.com/settings/keys\nANTHROPIC_API_KEY=your_anthropic_api_key_here\n```\n\n### 3. Run the Development Server\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) to see your chatbot.\n\n## Project Structure\n\n```\nai-chatbot-template/\n├── app/\n│   ├── api/chat/route.ts    # Chat API endpoint\n│   ├── page.tsx              # Main chat interface\n│   ├── layout.tsx            # Root layout with theme provider\n│   └── globals.css           # Global styles\n├── components/\n│   ├── ai-elements/          # AI UI components (conversation, message, tool, etc.)\n│   ├── ui/                   # Base UI components (button, input, etc.)\n│   ├── header.tsx            # App header with branding\n│   ├── empty-state.tsx       # Empty state UI\n│   ├── theme-provider.tsx    # Theme context provider\n│   └── theme-toggle.tsx      # Dark/light mode toggle\n└── lib/\n    └── utils.ts              # Utility functions\n```\n\n## Customization\n\n### Adding AI Models\n\nEdit the `models` array in `app/page.tsx`:\n\n```typescript\nconst models = [\n  {\n    name: 'GPT 5.1',\n    value: 'openai/gpt-5.1',\n  },\n  {\n    name: 'Claude Sonnet 4.5',\n    value: 'anthropic/sonnet-4.5',\n  },\n];\n```\n\nThe chatbot automatically routes to the correct provider based on the model prefix (`openai/` or `anthropic/`).\n\n### Adding Custom Tools\n\nTo add tools, edit `app/api/chat/route.ts` and add a `tools` object to the `streamText` configuration:\n\n```typescript\nimport { z } from 'zod';\n\n// In the streamText call, add:\ntools: {\n  your_tool_name: {\n    description: 'Description of what your tool does',\n    parameters: z.object({\n      param1: z.string().describe('Parameter description'),\n      param2: z.number().optional().describe('Optional parameter'),\n    }),\n    execute: async ({ param1, param2 }) =\u003e {\n      // Your tool logic here\n      const result = await yourApiCall(param1, param2);\n      return { \n        success: true,\n        data: result \n      };\n    },\n  },\n}\n```\n\nTools will automatically appear in the chat interface with:\n- Formatted parameter display (JSON)\n- Collapsible UI showing input and output\n- Status indicators (pending, running, completed, error)\n\n### Web Search\n\nWeb search is built-in for OpenAI models! When you enable the web search toggle in the UI, the chatbot automatically uses OpenAI's web search tool to find current information.\n\n**How it works:**\n- Toggle the \"Search\" button in the chat interface\n- Web search only works with OpenAI models (GPT 5.1, etc.)\n- The tool automatically searches the web when needed\n- Results are integrated into the AI's responses\n\n**To use a different search provider** (like Tavily, Serper, or Brave Search), replace the web search tool in `app/api/chat/route.ts`:\n\n```typescript\ntools: {\n  web_search: {\n    description: 'Search the web for current information',\n    parameters: z.object({\n      query: z.string().describe('The search query'),\n    }),\n    execute: async ({ query }) =\u003e {\n      const response = await fetch('https://api.tavily.com/search', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n          'Authorization': `Bearer ${process.env.TAVILY_API_KEY}`,\n        },\n        body: JSON.stringify({ query }),\n      });\n      return await response.json();\n    },\n  },\n}\n```\n\n### Styling \u0026 Theming\n\nThe chatbot uses Tailwind CSS with dark mode support. Customize the appearance:\n\n- **Global Styles**: Edit `app/globals.css`\n- **Header Branding**: Edit `components/header.tsx`\n- **Empty State**: Edit `components/empty-state.tsx`\n- **Theme Toggle**: Edit `components/theme-toggle.tsx`\n- **AI Components**: Customize components in `components/ai-elements/`\n\nThe chatbot defaults to dark mode. Users can toggle themes using the sun/moon icon in the header.\n\n## Extending with Pica ToolKit\n\nAdd 200+ enterprise integrations to your AI agent with [Pica ToolKit](https://docs.picaos.com/toolkit/vercel-ai-sdk). Give your chatbot the ability to interact with Gmail, Slack, Google Calendar, HubSpot, Salesforce, and many more services with built-in authentication and error handling.\n\n### What is Pica ToolKit?\n\n[Pica's ToolKit](https://www.npmjs.com/package/@picahq/toolkit) provides enterprise-grade integration capabilities for AI agents built with the Vercel AI SDK. Instead of building custom integrations for each service, ToolKit gives you instant access to 25,000+ actions across 200+ platforms.\n\n**Key Features:**\n- 🔌 200+ enterprise-grade integrations (Gmail, Slack, Salesforce, HubSpot, etc.)\n- 🔐 Built-in authentication and credential management\n- 🛡️ Enterprise-grade security and error handling\n- 📚 Pica's knowledge base for accurate API usage\n- 🎯 Granular permission controls (read, write, admin)\n- 👥 Multi-tenant support with identity-based filtering\n\n### Installation\n\n```bash\nnpm install @picahq/toolkit\n```\n\n### Quick Setup\n\n1. **Get your Pica API key:**\n   - [Create a free Pica account](https://app.picaos.com)\n   - Navigate to [API keys](https://app.picaos.com/settings/api-keys)\n   - Create a new API key\n\n2. **Add to your environment variables:**\n\n```bash\nPICA_SECRET_KEY=your_pica_api_key_here\n```\n\n3. **Connect integrations:**\n   - Go to [Connections](https://app.picaos.com/connections)\n   - Connect the integrations you want to use (Gmail, Slack, etc.)\n\n4. **Update your API route:**\n\n```typescript\n// app/api/chat/route.ts\nimport { Pica } from '@picahq/toolkit';\nimport { openai } from '@ai-sdk/openai';\nimport { streamText, UIMessage, convertToModelMessages } from 'ai';\n\nexport const maxDuration = 60;\n\nexport async function POST(req: Request) {\n  const { messages, model, webSearch } = await req.json();\n\n  // Initialize Pica with your API key\n  const pica = new Pica(process.env.PICA_SECRET_KEY!, {\n    connectors: [\"*\"],  // Enable all connected integrations\n    actions: [\"*\"],     // Enable all available actions\n    permissions: \"admin\" // Full access (read, write, delete)\n  });\n\n  // Determine which provider to use\n  let selectedModel;\n  if (model.startsWith('openai/')) {\n    selectedModel = openai(model.replace('openai/', ''));\n  } else if (model.startsWith('anthropic/')) {\n    selectedModel = anthropic(model.replace('anthropic/', ''));\n  } else {\n    selectedModel = openai('gpt-5.1');\n  }\n\n  const result = streamText({\n    model: selectedModel,\n    messages: convertToModelMessages(messages),\n    tools: pica.tools(),          // Add Pica tools\n    system: pica.systemPrompt,    // Add Pica system prompt\n    ...(webSearch \u0026\u0026 model.startsWith('openai/') \u0026\u0026 {\n      tools: {\n        ...pica.tools(),          // Combine Pica tools with web search\n        web_search_preview: openai.tools.webSearch({\n          searchContextSize: 'high',\n        }),\n      },\n    }),\n  });\n\n  return result.toUIMessageStreamResponse({\n    sendSources: true,\n    sendReasoning: true,\n  });\n}\n```\n\n### Example Use Cases\n\nOnce integrated, your chatbot can:\n\n- **Email Management**: \"Send an email to john@example.com with the meeting notes\"\n- **Calendar Scheduling**: \"Find a free slot next week and schedule a meeting with the team\"\n- **CRM Updates**: \"Add this lead to Salesforce with a follow-up task\"\n- **Slack Notifications**: \"Post a summary of our conversation to the #team channel\"\n- **Data Sync**: \"Export today's customer inquiries to a Google Sheet\"\n\n### Learn More\n\n- [Pica ToolKit Documentation](https://docs.picaos.com/toolkit/vercel-ai-sdk)\n- [Available Integrations](https://app.picaos.com/tools)\n- [NPM Package](https://www.npmjs.com/package/@picahq/toolkit)\n\n## Deployment\n\n### Deploy to Vercel\n\nThe easiest way to deploy is with the [Vercel Platform](https://vercel.com/new):\n\n1. Push your code to GitHub\n2. Import your repository in Vercel\n3. Add your environment variables:\n   - `OPENAI_API_KEY`\n   - `ANTHROPIC_API_KEY`\n   - Any other API keys for tools\n4. Deploy!\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new)\n\n### Other Platforms\n\nThe template works on any platform that supports Next.js:\n- [Netlify](https://www.netlify.com/)\n- [Cloudflare Pages](https://pages.cloudflare.com/)\n- [AWS Amplify](https://aws.amazon.com/amplify/)\n\nMake sure to set the environment variables in your platform's dashboard.\n\n## Documentation\n\n- [Vercel AI SDK Documentation](https://ai-sdk.dev) - Core AI SDK\n- [AI Elements Components](https://ai-sdk.dev/elements) - Pre-built UI components\n- [Pica ToolKit Documentation](https://docs.picaos.com/toolkit/vercel-ai-sdk) - Enterprise integrations\n- [Next.js Documentation](https://nextjs.org/docs) - React framework\n- [Tailwind CSS](https://tailwindcss.com/docs) - Styling\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicahq%2Fai-chatbot-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpicahq%2Fai-chatbot-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicahq%2Fai-chatbot-template/lists"}